feat: error handling, logging, analytics, OG tags, and sticky sidebar (#44)

## 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>

apps/web/src/components/errorBoundary.tsx

@@ -0,0 +1,70 @@
+/**
+ * @file React Error Boundary for catching unhandled render-time errors.
+ * @copyright nhcarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+import { Component, type ErrorInfo, type ReactNode } from "react";
+import { logError } from "../utils/logError.js";
+
+interface ErrorBoundaryProperties {
+  readonly children: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+}
+
+/**
+ * Catches unhandled render-time errors in the React tree, logs them to the
+ * backend telemetry service, and renders a fallback UI.
+ */
+class ErrorBoundary extends Component<
+  ErrorBoundaryProperties,
+  ErrorBoundaryState
+> {
+  // eslint-disable-next-line jsdoc/require-jsdoc -- React Error Boundary constructor is standard boilerplate
+  public constructor(properties: ErrorBoundaryProperties) {
+    super(properties);
+    this.state = { hasError: false };
+  }
+
+  /**
+   * Updates state so the next render shows the fallback UI.
+   * @returns The updated error boundary state.
+   */
+  public static getDerivedStateFromError(): ErrorBoundaryState {
+    return { hasError: true };
+  }
+
+  /**
+   * Logs the error to the backend telemetry service.
+   * @param error - The error that was thrown during render.
+   * @param info - React error info containing the component stack trace.
+   */
+  // eslint-disable-next-line @typescript-eslint/class-methods-use-this -- React lifecycle method cannot be static
+  public override componentDidCatch(error: Error, info: ErrorInfo): void {
+    logError("react_error_boundary", error, info.componentStack);
+  }
+
+  /**
+   * Renders the fallback UI when an error is caught, otherwise renders children.
+   * @returns The JSX element.
+   */
+  public override render(): ReactNode {
+    const { hasError } = this.state;
+    const { children } = this.props;
+
+    if (hasError) {
+      return (
+        <div className="error-screen">
+          <p>{"Something went wrong. Please refresh the page."}</p>
+        </div>
+      );
+    }
+
+    return children;
+  }
+}
+
+export { ErrorBoundary };

apps/web/src/components/game/characterPage.tsx

@@ -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) {

apps/web/src/components/game/characterSheetPanel.tsx

@@ -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 {

apps/web/src/components/game/gameLayout.tsx

@@ -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>
 

apps/web/src/components/game/profilePage.tsx

@@ -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) {