generated from nhcarrigan/template
hikari
a36c8e72a5
## 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>
69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
/**
|
|
* @file Frontend logger that forwards console output to the backend telemetry service.
|
|
* @copyright nhcarrigan
|
|
* @license Naomi's Public License
|
|
* @author Naomi Carrigan
|
|
*/
|
|
/* eslint-disable no-console -- This file intentionally overrides console methods */
|
|
|
|
type Level = "debug" | "info" | "warn";
|
|
|
|
const post = (path: string, body: object): void => {
|
|
void fetch(path, {
|
|
body: JSON.stringify(body),
|
|
// eslint-disable-next-line @typescript-eslint/naming-convention -- HTTP header names use kebab-case
|
|
headers: { "Content-Type": "application/json" },
|
|
method: "POST",
|
|
}).catch(() => {
|
|
// Intentionally swallowed — we cannot log logger failures without infinite recursion.
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Overrides the global console.log and console.error methods so that all
|
|
* frontend log output is forwarded to the backend telemetry endpoints.
|
|
* Must be called once at application startup before any other code runs.
|
|
*/
|
|
const initialiseFrontendLogger = (): void => {
|
|
const originalLog = console.log.bind(console);
|
|
const originalError = console.error.bind(console);
|
|
|
|
console.log = (...consoleArguments: Array<unknown>): void => {
|
|
originalLog(...consoleArguments);
|
|
const level: Level = "info";
|
|
const message = consoleArguments.map((argument) => {
|
|
return typeof argument === "string"
|
|
? argument
|
|
: JSON.stringify(argument);
|
|
}).join(" ");
|
|
post("/api/fe/log", { level, message });
|
|
};
|
|
|
|
console.error = (...consoleArguments: Array<unknown>): void => {
|
|
originalError(...consoleArguments);
|
|
const message = consoleArguments.map((argument) => {
|
|
if (argument instanceof Error) {
|
|
return `${argument.message}\n${argument.stack ?? ""}`;
|
|
}
|
|
return typeof argument === "string"
|
|
? argument
|
|
: JSON.stringify(argument);
|
|
}).join(" ");
|
|
const context = "console.error";
|
|
post("/api/fe/error", { context, message });
|
|
};
|
|
|
|
console.warn = (...consoleArguments: Array<unknown>): void => {
|
|
originalLog(...consoleArguments);
|
|
const level: Level = "warn";
|
|
const message = consoleArguments.map((argument) => {
|
|
return typeof argument === "string"
|
|
? argument
|
|
: JSON.stringify(argument);
|
|
}).join(" ");
|
|
post("/api/fe/log", { level, message });
|
|
};
|
|
};
|
|
|
|
export { initialiseFrontendLogger };
|