feat: error handling, logging, analytics, OG tags, and sticky sidebar (#44)
Security Scan and Upload / Security & DefectDojo Upload (push) Successful in 1m3s
CI / Lint, Build & Test (push) Successful in 1m8s

## Summary

- Add comprehensive try/catch error handling across all API routes, middleware, and the Hono global error handler, piping every unhandled error to the `@nhcarrigan/logger` service to prevent silent crashes and unhandled Promise rejections
- Add a `logError` utility on the frontend that forwards errors through the overridden `console.error` to the backend telemetry endpoint; apply it to every silent `catch {}` block in the game context, sound, notification, and clipboard utilities, and wrap the React tree in an `ErrorBoundary`
- Add Plausible analytics, Open Graph + Twitter Card meta tags, Tree-Nation widget, and Google Ads to `index.html`
- Make the game sidebar sticky with a `--resource-bar-height` CSS custom property offset so it stays viewport-height without overlapping the resource bar; reset sticky behaviour in the mobile responsive override

## Test plan

- [ ] Lint passes: `pnpm lint`
- [ ] Build passes: `pnpm build`
- [ ] Verify errors thrown in API routes appear in the logger service rather than crashing the process
- [ ] Verify frontend errors appear in the `/api/fe/error` backend log
- [ ] Verify Open Graph tags render correctly when sharing the URL
- [ ] Verify Plausible analytics fires on page load
- [ ] Verify Tree-Nation badge renders in the sidebar
- [ ] Verify sidebar stays fixed while the main content scrolls on desktop
- [ ] Verify mobile layout is unaffected

 This issue was created with help from Hikari~ 🌸

Reviewed-on: #44
Co-authored-by: Hikari <hikari@nhcarrigan.com>
Co-committed-by: Hikari <hikari@nhcarrigan.com>
This commit was merged in pull request #44.
This commit is contained in:
2026-03-09 19:54:42 -07:00
committed by Naomi Carrigan
parent 11e97325cb
commit a36c8e72a5
47 changed files with 2733 additions and 1724 deletions
+183 -162
View File
@@ -20,6 +20,7 @@ import { Hono } from "hono";
import { gameTitles } from "../data/titles.js";
import { prisma } from "../db/client.js";
import { authMiddleware } from "../middleware/auth.js";
import { logger } from "../services/logger.js";
import { parseUnlockedTitles } from "../services/titles.js";
import type { HonoEnvironment } from "../types/hono.js";
@@ -81,190 +82,210 @@ const resolveTitle = (id: string): { id: string; name: string } => {
};
profileRouter.get("/:discordId", async(context) => {
const { discordId } = context.req.param();
try {
const { discordId } = context.req.param();
const [ player, gameStateRecord ] = await Promise.all([
prisma.player.findUnique({ where: { discordId } }),
prisma.gameState.findUnique({ where: { discordId } }),
]);
const [ player, gameStateRecord ] = await Promise.all([
prisma.player.findUnique({ where: { discordId } }),
prisma.gameState.findUnique({ where: { discordId } }),
]);
if (!player) {
return context.json({ error: "Player not found" }, 404);
}
if (!player) {
return context.json({ error: "Player not found" }, 404);
}
/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- Prisma returns JsonValue */
const state = gameStateRecord?.state as unknown as GameState | undefined;
const prestigeCount = state?.prestige.count ?? 0;
const transcendenceCount = state?.transcendence?.count ?? 0;
const apotheosisCount = state?.apotheosis?.count ?? 0;
const profileSettings = parseProfileSettings(player.profileSettings);
/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- Prisma returns JsonValue */
const state = gameStateRecord?.state as unknown as GameState | undefined;
const prestigeCount = state?.prestige.count ?? 0;
const transcendenceCount = state?.transcendence?.count ?? 0;
const apotheosisCount = state?.apotheosis?.count ?? 0;
const profileSettings = parseProfileSettings(player.profileSettings);
const bossesDefeated
= state?.bosses.filter((boss) => {
return boss.status === "defeated";
}).length ?? 0;
const questsCompleted
= state?.quests.filter((quest) => {
return quest.status === "completed";
}).length ?? 0;
const bossesDefeated
= state?.bosses.filter((boss) => {
return boss.status === "defeated";
}).length ?? 0;
const questsCompleted
= state?.quests.filter((quest) => {
return quest.status === "completed";
}).length ?? 0;
let adventurersRecruited = 0;
if (state) {
// eslint-disable-next-line capitalized-comments -- v8 ignore
/* v8 ignore next 3 -- @preserve */
for (const adventurer of state.adventurers) {
adventurersRecruited = adventurersRecruited + adventurer.count;
}
}
let adventurersRecruited = 0;
if (state) {
// eslint-disable-next-line capitalized-comments -- v8 ignore
/* v8 ignore next 3 -- @preserve */
for (const adventurer of state.adventurers) {
adventurersRecruited = adventurersRecruited + adventurer.count;
}
}
const achievementsUnlocked = (state?.achievements ?? []).filter((achievement) => {
return achievement.unlockedAt !== null;
}).length;
// eslint-disable-next-line capitalized-comments -- v8 ignore
/* v8 ignore next 3 -- @preserve */
const achievementsUnlocked = (state?.achievements ?? []).filter((achievement) => {
return achievement.unlockedAt !== null;
}).length;
const unlockedTitleIds = parseUnlockedTitles(player.unlockedTitles);
const unlockedTitles = unlockedTitleIds.map((id) => {
return resolveTitle(id);
});
// eslint-disable-next-line capitalized-comments -- v8 ignore
/* v8 ignore next 12 -- @preserve */
const equippedItems = (state?.equipment ?? []).
filter((item) => {
return item.owned && item.equipped;
}).
map((item) => {
return {
bonus: item.bonus,
name: item.name,
rarity: item.rarity,
type: item.type,
};
const unlockedTitleIds = parseUnlockedTitles(player.unlockedTitles);
const unlockedTitles = unlockedTitleIds.map((id) => {
return resolveTitle(id);
});
const completedChapters = state?.story?.completedChapters ?? [];
// eslint-disable-next-line capitalized-comments -- v8 ignore
/* v8 ignore next 12 -- @preserve */
const equippedItems = (state?.equipment ?? []).
filter((item) => {
return item.owned && item.equipped;
}).
map((item) => {
return {
bonus: item.bonus,
name: item.name,
rarity: item.rarity,
type: item.type,
};
});
return context.json({
achievementsUnlocked: achievementsUnlocked,
activeTitle: player.activeTitle,
adventurersRecruited: adventurersRecruited,
apotheosisCount: apotheosisCount,
avatar: player.avatar,
bio: player.bio ?? "",
bossesDefeated: bossesDefeated,
characterClass: player.characterClass,
characterName: player.characterName,
characterRace: player.characterRace ?? "",
completedChapters: completedChapters,
createdAt: player.createdAt,
currentRunClicks: state?.player.totalClicks ?? 0,
currentRunGold: state?.player.totalGoldEarned ?? 0,
equippedItems: equippedItems,
guildDescription: player.guildDescription,
guildName: player.guildName,
lifetimeAchievementsUnlocked: player.lifetimeAchievementsUnlocked,
lifetimeAdventurersRecruited: player.lifetimeAdventurersRecruited,
lifetimeBossesDefeated: player.lifetimeBossesDefeated,
lifetimeQuestsCompleted: player.lifetimeQuestsCompleted,
prestigeCount: prestigeCount,
profileSettings: profileSettings,
pronouns: player.pronouns ?? "",
questsCompleted: questsCompleted,
totalClicks: player.lifetimeClicks,
totalGoldEarned: player.lifetimeGoldEarned,
transcendenceCount: transcendenceCount,
unlockedTitles: unlockedTitles,
username: player.username,
});
const completedChapters = state?.story?.completedChapters ?? [];
return context.json({
achievementsUnlocked: achievementsUnlocked,
activeTitle: player.activeTitle,
adventurersRecruited: adventurersRecruited,
apotheosisCount: apotheosisCount,
avatar: player.avatar,
bio: player.bio ?? "",
bossesDefeated: bossesDefeated,
characterClass: player.characterClass,
characterName: player.characterName,
characterRace: player.characterRace ?? "",
completedChapters: completedChapters,
createdAt: player.createdAt,
currentRunClicks: state?.player.totalClicks ?? 0,
currentRunGold: state?.player.totalGoldEarned ?? 0,
equippedItems: equippedItems,
guildDescription: player.guildDescription,
guildName: player.guildName,
lifetimeAchievementsUnlocked: player.lifetimeAchievementsUnlocked,
lifetimeAdventurersRecruited: player.lifetimeAdventurersRecruited,
lifetimeBossesDefeated: player.lifetimeBossesDefeated,
lifetimeQuestsCompleted: player.lifetimeQuestsCompleted,
prestigeCount: prestigeCount,
profileSettings: profileSettings,
pronouns: player.pronouns ?? "",
questsCompleted: questsCompleted,
totalClicks: player.lifetimeClicks,
totalGoldEarned: player.lifetimeGoldEarned,
transcendenceCount: transcendenceCount,
unlockedTitles: unlockedTitles,
username: player.username,
});
} catch (error) {
void logger.error(
"profile_get",
error instanceof Error
? error
: new Error(String(error)),
);
return context.json({ error: "Internal server error" }, 500);
}
});
profileRouter.put("/", authMiddleware, async(context) => {
const discordId = context.get("discordId");
const body = await context.req.json<UpdateProfileRequest>();
try {
const discordId = context.get("discordId");
const body = await context.req.json<UpdateProfileRequest>();
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions -- Runtime body validation
if (!body.characterName) {
return context.json({ error: "Character name cannot be empty" }, 400);
}
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions -- Runtime body validation
if (!body.characterName) {
return context.json({ error: "Character name cannot be empty" }, 400);
}
const characterName = body.characterName.trim().slice(0, 32);
const characterName = body.characterName.trim().slice(0, 32);
if (characterName === "") {
return context.json({ error: "Character name cannot be empty" }, 400);
}
if (characterName === "") {
return context.json({ error: "Character name cannot be empty" }, 400);
}
const pronouns = (body.pronouns ?? "").trim().slice(0, 20);
const characterRace = (body.characterRace ?? "").trim().slice(0, 32);
const characterClass = (body.characterClass ?? "").trim().slice(0, 32);
const bio = (body.bio ?? "").trim().slice(0, 200);
const guildName = (body.guildName ?? "").trim().slice(0, 64);
const guildDescription = (body.guildDescription ?? "").trim().slice(0, 500);
// eslint-disable-next-line capitalized-comments -- v8 ignore
/* v8 ignore next 2 -- @preserve */
/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- Runtime shape check */
const parsedNumberFormat = (body.profileSettings.numberFormat ?? "") as string;
const numberFormat = validNumberFormats.has(parsedNumberFormat)
const pronouns = (body.pronouns ?? "").trim().slice(0, 20);
const characterRace = (body.characterRace ?? "").trim().slice(0, 32);
const characterClass = (body.characterClass ?? "").trim().slice(0, 32);
const bio = (body.bio ?? "").trim().slice(0, 200);
const guildName = (body.guildName ?? "").trim().slice(0, 64);
const guildDescription = (body.guildDescription ?? "").trim().slice(0, 500);
// eslint-disable-next-line capitalized-comments -- v8 ignore
/* v8 ignore next 2 -- @preserve */
/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- Runtime shape check */
? (parsedNumberFormat as ProfileSettings["numberFormat"])
: "suffix";
const profileSettings: ProfileSettings = {
enableNotifications: body.profileSettings.enableNotifications ?? false,
enableSounds: body.profileSettings.enableSounds ?? false,
numberFormat: numberFormat,
showAchievementsUnlocked: body.profileSettings.showAchievementsUnlocked ?? true,
showAdventurersRecruited: body.profileSettings.showAdventurersRecruited ?? true,
showApotheosis: body.profileSettings.showApotheosis ?? true,
showBossesDefeated: body.profileSettings.showBossesDefeated ?? true,
showCurrentClicks: body.profileSettings.showCurrentClicks ?? true,
showCurrentGold: body.profileSettings.showCurrentGold ?? true,
showGuildFounded: body.profileSettings.showGuildFounded ?? true,
showLifetimeAchievementsUnlocked: body.profileSettings.showLifetimeAchievementsUnlocked ?? true,
showLifetimeAdventurersRecruited: body.profileSettings.showLifetimeAdventurersRecruited ?? true,
showLifetimeBossesDefeated: body.profileSettings.showLifetimeBossesDefeated ?? true,
showLifetimeQuestsCompleted: body.profileSettings.showLifetimeQuestsCompleted ?? true,
showOnLeaderboards: body.profileSettings.showOnLeaderboards ?? true,
showPrestige: body.profileSettings.showPrestige ?? true,
showQuestsCompleted: body.profileSettings.showQuestsCompleted ?? true,
showTotalClicks: body.profileSettings.showTotalClicks ?? true,
showTotalGold: body.profileSettings.showTotalGold ?? true,
showTranscendence: body.profileSettings.showTranscendence ?? true,
};
const parsedNumberFormat = (body.profileSettings.numberFormat ?? "") as string;
const numberFormat = validNumberFormats.has(parsedNumberFormat)
/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- Runtime shape check */
? (parsedNumberFormat as ProfileSettings["numberFormat"])
: "suffix";
const profileSettings: ProfileSettings = {
enableNotifications: body.profileSettings.enableNotifications ?? false,
enableSounds: body.profileSettings.enableSounds ?? false,
numberFormat: numberFormat,
showAchievementsUnlocked: body.profileSettings.showAchievementsUnlocked ?? true,
showAdventurersRecruited: body.profileSettings.showAdventurersRecruited ?? true,
showApotheosis: body.profileSettings.showApotheosis ?? true,
showBossesDefeated: body.profileSettings.showBossesDefeated ?? true,
showCurrentClicks: body.profileSettings.showCurrentClicks ?? true,
showCurrentGold: body.profileSettings.showCurrentGold ?? true,
showGuildFounded: body.profileSettings.showGuildFounded ?? true,
showLifetimeAchievementsUnlocked: body.profileSettings.showLifetimeAchievementsUnlocked ?? true,
showLifetimeAdventurersRecruited: body.profileSettings.showLifetimeAdventurersRecruited ?? true,
showLifetimeBossesDefeated: body.profileSettings.showLifetimeBossesDefeated ?? true,
showLifetimeQuestsCompleted: body.profileSettings.showLifetimeQuestsCompleted ?? true,
showOnLeaderboards: body.profileSettings.showOnLeaderboards ?? true,
showPrestige: body.profileSettings.showPrestige ?? true,
showQuestsCompleted: body.profileSettings.showQuestsCompleted ?? true,
showTotalClicks: body.profileSettings.showTotalClicks ?? true,
showTotalGold: body.profileSettings.showTotalGold ?? true,
showTranscendence: body.profileSettings.showTranscendence ?? true,
};
const activeTitle
= typeof body.activeTitle === "string"
? body.activeTitle.slice(0, 64)
: undefined;
const activeTitle
= typeof body.activeTitle === "string"
? body.activeTitle.slice(0, 64)
: undefined;
const updated = await prisma.player.update({
data: {
bio: bio,
characterClass: characterClass,
characterName: characterName,
characterRace: characterRace,
guildDescription: guildDescription,
guildName: guildName,
/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- Prisma requires object */
profileSettings: profileSettings as object,
pronouns: pronouns,
...activeTitle === undefined
? {}
: { activeTitle },
},
where: { discordId },
});
const updated = await prisma.player.update({
data: {
bio: bio,
characterClass: characterClass,
characterName: characterName,
characterRace: characterRace,
guildDescription: guildDescription,
guildName: guildName,
/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- Prisma requires object */
profileSettings: profileSettings as object,
pronouns: pronouns,
...activeTitle === undefined
? {}
: { activeTitle },
},
where: { discordId },
});
return context.json({
activeTitle: updated.activeTitle,
bio: updated.bio,
characterClass: updated.characterClass,
characterName: updated.characterName,
characterRace: updated.characterRace,
guildDescription: updated.guildDescription,
guildName: updated.guildName,
profileSettings: profileSettings,
pronouns: updated.pronouns,
});
return context.json({
activeTitle: updated.activeTitle,
bio: updated.bio,
characterClass: updated.characterClass,
characterName: updated.characterName,
characterRace: updated.characterRace,
guildDescription: updated.guildDescription,
guildName: updated.guildName,
profileSettings: profileSettings,
pronouns: updated.pronouns,
});
} catch (error) {
void logger.error(
"profile_update",
error instanceof Error
? error
: new Error(String(error)),
);
return context.json({ error: "Internal server error" }, 500);
}
});
export { profileRouter };