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>
2026-03-09 19:54:42 -07:00
parent 11e97325cb
commit a36c8e72a5
47 changed files with 2733 additions and 1724 deletions
@@ -59,6 +59,7 @@ import {
 } from "../engine/tick.js";
 import { updateChallengeProgress } from "../utils/dailyChallenges.js";
 import { formatNumber as formatNumberUtil } from "../utils/format.js";
+import { logError } from "../utils/logError.js";
 import { sendNotification } from "../utils/notification.js";
 import { playSound } from "../utils/sound.js";

@@ -1130,6 +1131,8 @@ export const GameProvider = ({
              ) {
                signatureReference.current = null;
                localStorage.removeItem("elysium_save_signature");
+              } else {
+                logError("auto_save", error_);
              }
            });
        }
@@ -1158,7 +1161,8 @@ export const GameProvider = ({
            }
            await reloadReference.current();
          }).
-          catch(() => {
+          catch((error_: unknown) => {
+            logError("auto_prestige", error_);

            /* Silently ignore — will retry next tick */
          }).
@@ -1200,7 +1204,8 @@ export const GameProvider = ({
              });
              setBattleResult({ bossName, result });
            }).
-            catch(() => {
+            catch((error_: unknown) => {
+              logError("auto_boss", error_);

              /* Silently ignore — will retry next tick */
            }).
@@ -1521,35 +1526,46 @@ export const GameProvider = ({
          },
        };
      });
-    } catch {
+    } catch (error_: unknown) {
+      logError("buy_prestige_upgrade", error_);
      // Silently ignore — server errors shouldn't crash the UI
    }
  }, []);

  const transcend = useCallback(async() => {
-    const result = await transcendApi({});
-    setShowTranscendenceToast(true);
-    if (enableSoundsReference.current) {
-      playSound("transcendence");
+    try {
+      const result = await transcendApi({});
+      setShowTranscendenceToast(true);
+      if (enableSoundsReference.current) {
+        playSound("transcendence");
+      }
+      if (enableNotificationsReference.current) {
+        sendNotification("🌌 Transcendence!", "You have transcended reality!");
+      }
+      await reload();
+      return result;
+    } catch (error_: unknown) {
+      logError("transcend", error_);
+      throw error_;
    }
-    if (enableNotificationsReference.current) {
-      sendNotification("🌌 Transcendence!", "You have transcended reality!");
-    }
-    await reload();
-    return result;
  }, [ reload ]);

  const apotheosis = useCallback(async() => {
-    const result = await achieveApotheosisApi({});
-    setShowApotheosisToast(true);
-    if (enableSoundsReference.current) {
-      playSound("apotheosis");
+    try {
+      const result = await achieveApotheosisApi({});
+      setShowApotheosisToast(true);
+      if (enableSoundsReference.current) {
+        playSound("apotheosis");
+      }
+      if (enableNotificationsReference.current) {
+        sendNotification("✨ Apotheosis!", "You have achieved godhood!");
+      }
+      await reload();
+      return result;
+    } catch (error_: unknown) {
+      logError("apotheosis", error_);
+      throw error_;
    }
-    if (enableNotificationsReference.current) {
-      sendNotification("✨ Apotheosis!", "You have achieved godhood!");
-    }
-    await reload();
-    return result;
  }, [ reload ]);

  const buyEchoUpgrade = useCallback(async(upgradeId: string) => {
@@ -1575,114 +1591,125 @@ export const GameProvider = ({
          },
        };
      });
-    } catch {
-      // Silently ignore server errors
+    } catch (error_: unknown) {
+      logError("buy_echo_upgrade", error_);
+      // Silently ignore — server errors shouldn't crash the UI
    }
  }, []);

  const startExploration = useCallback(async(areaId: string) => {
-    const response = await startExplorationApi({ areaId });
-    const areaData = EXPLORATION_AREAS.find((a) => {
-      return a.id === areaId;
-    });
-    if (areaData === undefined) {
-      return;
-    }
-    // eslint-disable-next-line stylistic/no-mixed-operators -- duration * 1000 is clear
-    const startedAt = response.endsAt - areaData.durationSeconds * 1000;
-    setState((previous) => {
-      if (previous?.exploration === undefined) {
-        return previous;
+    try {
+      const response = await startExplorationApi({ areaId });
+      const areaData = EXPLORATION_AREAS.find((a) => {
+        return a.id === areaId;
+      });
+      if (areaData === undefined) {
+        return;
      }
-      return {
-        ...previous,
-        exploration: {
-          ...previous.exploration,
-          areas: previous.exploration.areas.map((a) => {
-            return a.id === areaId
-              ? { ...a, startedAt: startedAt, status: "in_progress" as const }
-              : a;
-          }),
-        },
-      };
-    });
-  }, []);
-
-  const collectExploration = useCallback(
-    async(areaId: string): Promise<ExploreCollectResponse> => {
-      const result = await collectExplorationApi({ areaId });
+      // eslint-disable-next-line stylistic/no-mixed-operators -- duration * 1000 is clear
+      const startedAt = response.endsAt - areaData.durationSeconds * 1000;
      setState((previous) => {
        if (previous?.exploration === undefined) {
          return previous;
        }
-        let materials = [ ...previous.exploration.materials ];
-
-        // Apply material drops from the random loot roll
-        for (const drop of result.materialsFound) {
-          const existing = materials.find((mat) => {
-            return mat.materialId === drop.materialId;
-          });
-          if (existing === undefined) {
-            materials = [
-              ...materials,
-              { materialId: drop.materialId, quantity: drop.quantity },
-            ];
-          } else {
-            materials = materials.map((mat) => {
-              return mat.materialId === drop.materialId
-                ? { ...mat, quantity: mat.quantity + drop.quantity }
-                : mat;
-            });
-          }
-        }
-
-        // Apply material from event (if any)
-        const materialGained = result.event?.materialGained;
-        if (materialGained !== null && materialGained !== undefined) {
-          const { materialId, quantity } = materialGained;
-          const existing = materials.find((mat) => {
-            return mat.materialId === materialId;
-          });
-          if (existing === undefined) {
-            materials = [ ...materials, { materialId, quantity } ];
-          } else {
-            materials = materials.map((mat) => {
-              return mat.materialId === materialId
-                ? { ...mat, quantity: mat.quantity + quantity }
-                : mat;
-            });
-          }
-        }
-
        return {
          ...previous,
          exploration: {
            ...previous.exploration,
            areas: previous.exploration.areas.map((a) => {
              return a.id === areaId
-                ? { ...a, completedOnce: true, status: "available" as const }
+                ? { ...a, startedAt: startedAt, status: "in_progress" as const }
                : a;
            }),
-            materials: materials,
-          },
-          player: {
-            ...previous.player,
-            totalGoldEarned:
-              previous.player.totalGoldEarned
-              + Math.max(0, result.event?.goldChange ?? 0),
-          },
-          resources: {
-            ...previous.resources,
-            essence:
-              previous.resources.essence + (result.event?.essenceChange ?? 0),
-            gold: Math.max(
-              0,
-              previous.resources.gold + (result.event?.goldChange ?? 0),
-            ),
          },
        };
      });
-      return result;
+    } catch (error_: unknown) {
+      logError("start_exploration", error_);
+      throw error_;
+    }
+  }, []);
+
+  const collectExploration = useCallback(
+    async(areaId: string): Promise<ExploreCollectResponse> => {
+      try {
+        const result = await collectExplorationApi({ areaId });
+        setState((previous) => {
+          if (previous?.exploration === undefined) {
+            return previous;
+          }
+          let materials = [ ...previous.exploration.materials ];
+
+          // Apply material drops from the random loot roll
+          for (const drop of result.materialsFound) {
+            const existing = materials.find((mat) => {
+              return mat.materialId === drop.materialId;
+            });
+            if (existing === undefined) {
+              materials = [
+                ...materials,
+                { materialId: drop.materialId, quantity: drop.quantity },
+              ];
+            } else {
+              materials = materials.map((mat) => {
+                return mat.materialId === drop.materialId
+                  ? { ...mat, quantity: mat.quantity + drop.quantity }
+                  : mat;
+              });
+            }
+          }
+
+          // Apply material from event (if any)
+          const materialGained = result.event?.materialGained;
+          if (materialGained !== null && materialGained !== undefined) {
+            const { materialId, quantity } = materialGained;
+            const existing = materials.find((mat) => {
+              return mat.materialId === materialId;
+            });
+            if (existing === undefined) {
+              materials = [ ...materials, { materialId, quantity } ];
+            } else {
+              materials = materials.map((mat) => {
+                return mat.materialId === materialId
+                  ? { ...mat, quantity: mat.quantity + quantity }
+                  : mat;
+              });
+            }
+          }
+
+          return {
+            ...previous,
+            exploration: {
+              ...previous.exploration,
+              areas: previous.exploration.areas.map((a) => {
+                return a.id === areaId
+                  ? { ...a, completedOnce: true, status: "available" as const }
+                  : a;
+              }),
+              materials: materials,
+            },
+            player: {
+              ...previous.player,
+              totalGoldEarned:
+                previous.player.totalGoldEarned
+                + Math.max(0, result.event?.goldChange ?? 0),
+            },
+            resources: {
+              ...previous.resources,
+              essence:
+                previous.resources.essence + (result.event?.essenceChange ?? 0),
+              gold: Math.max(
+                0,
+                previous.resources.gold + (result.event?.goldChange ?? 0),
+              ),
+            },
+          };
+        });
+        return result;
+      } catch (error_: unknown) {
+        logError("collect_exploration", error_);
+        throw error_;
+      }
    },
    [],
  );
@@ -1694,35 +1721,40 @@ export const GameProvider = ({
    if (recipe === undefined) {
      return;
    }
-    const result = await craftRecipeApi({ recipeId });
-    setState((previous) => {
-      if (previous?.exploration === undefined) {
-        return previous;
-      }
-      let materials = [ ...previous.exploration.materials ];
-      for (const request of recipe.requiredMaterials) {
-        materials = materials.map((mat) => {
-          return mat.materialId === request.materialId
-            ? { ...mat, quantity: mat.quantity - request.quantity }
-            : mat;
-        });
-      }
-      return {
-        ...previous,
-        exploration: {
-          ...previous.exploration,
-          craftedClickMultiplier:   result.craftedClickMultiplier,
-          craftedCombatMultiplier:  result.craftedCombatMultiplier,
-          craftedEssenceMultiplier: result.craftedEssenceMultiplier,
-          craftedGoldMultiplier:    result.craftedGoldMultiplier,
-          craftedRecipeIds:         [
-            ...previous.exploration.craftedRecipeIds,
-            recipeId,
-          ],
-          materials: materials,
-        },
-      };
-    });
+    try {
+      const result = await craftRecipeApi({ recipeId });
+      setState((previous) => {
+        if (previous?.exploration === undefined) {
+          return previous;
+        }
+        let materials = [ ...previous.exploration.materials ];
+        for (const request of recipe.requiredMaterials) {
+          materials = materials.map((mat) => {
+            return mat.materialId === request.materialId
+              ? { ...mat, quantity: mat.quantity - request.quantity }
+              : mat;
+          });
+        }
+        return {
+          ...previous,
+          exploration: {
+            ...previous.exploration,
+            craftedClickMultiplier:   result.craftedClickMultiplier,
+            craftedCombatMultiplier:  result.craftedCombatMultiplier,
+            craftedEssenceMultiplier: result.craftedEssenceMultiplier,
+            craftedGoldMultiplier:    result.craftedGoldMultiplier,
+            craftedRecipeIds:         [
+              ...previous.exploration.craftedRecipeIds,
+              recipeId,
+            ],
+            materials: materials,
+          },
+        };
+      });
+    } catch (error_: unknown) {
+      logError("craft_recipe", error_);
+      throw error_;
+    }
  }, []);

  const toggleAutoPrestige = useCallback(() => {
@@ -1798,7 +1830,8 @@ export const GameProvider = ({
        return applyBossResult(previous, bossId, result);
      });
      setBattleResult({ bossName: boss.name, result: result });
-    } catch {
+    } catch (error_: unknown) {
+      logError("challenge_boss", error_);
      // Silently ignore — server errors shouldn't crash the UI
    }
  }, []);