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>
71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
/**
|
|
* @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 };
|