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
+11 -6
View File
@@ -14,6 +14,7 @@ import {
type PublicProfileResponse,
} from "@elysium/types";
import { type JSX, useEffect, useState } from "react";
import { logError } from "../../utils/logError.js";
interface CharacterPageProperties {
readonly discordId: string;
@@ -78,12 +79,16 @@ const CharacterPage = ({ discordId }: CharacterPageProperties): JSX.Element => {
}, [ discordId ]);
function handleCopy(): void {
void navigator.clipboard.writeText(window.location.href).then(() => {
setCopied(true);
setTimeout(() => {
setCopied(false);
}, 2000);
});
void navigator.clipboard.writeText(window.location.href).
then(() => {
setCopied(true);
setTimeout(() => {
setCopied(false);
}, 2000);
}).
catch((error_: unknown) => {
logError("clipboard_copy", error_);
});
}
if (error !== null) {
@@ -19,6 +19,7 @@ import {
import { type ChangeEvent, type JSX, useEffect, useRef, useState } from "react";
import { updateProfile } from "../../api/client.js";
import { useGame } from "../../context/gameContext.js";
import { logError } from "../../utils/logError.js";
interface EquippedItem {
name: string;
@@ -205,12 +206,16 @@ const CharacterSheetPanel = (): JSX.Element => {
function handleShareClick(): void {
const discordId = player?.discordId ?? "";
const url = `${window.location.origin}/character/${discordId}`;
void navigator.clipboard.writeText(url).then(() => {
setCopied(true);
setTimeout(() => {
setCopied(false);
}, 2000);
});
void navigator.clipboard.writeText(url).
then(() => {
setCopied(true);
setTimeout(() => {
setCopied(false);
}, 2000);
}).
catch((error_: unknown) => {
logError("clipboard_copy", error_);
});
}
function handleNameChange(event: ChangeEvent<HTMLInputElement>): void {
@@ -189,6 +189,7 @@ const GameLayout = (): JSX.Element => {
<div className="game-main">
<aside className="game-sidebar">
<ClickArea />
<div id="tree-nation-offset-website" />
<p className="game-copyright">{"© NHCarrigan"}</p>
</aside>
+11 -6
View File
@@ -8,6 +8,7 @@
/* eslint-disable complexity -- Many conditional stat visibility checks */
import { useEffect, useState, type JSX } from "react";
import { formatNumber } from "../../utils/format.js";
import { logError } from "../../utils/logError.js";
import type { PublicProfileResponse } from "@elysium/types";
interface ProfilePageProperties {
@@ -52,12 +53,16 @@ const ProfilePage = ({ discordId }: ProfilePageProperties): JSX.Element => {
}, [ discordId ]);
function handleCopy(): void {
void navigator.clipboard.writeText(window.location.href).then(() => {
setCopied(true);
setTimeout(() => {
setCopied(false);
}, 2000);
});
void navigator.clipboard.writeText(window.location.href).
then(() => {
setCopied(true);
setTimeout(() => {
setCopied(false);
}, 2000);
}).
catch((error_: unknown) => {
logError("clipboard_copy", error_);
});
}
if (error !== null) {