diff --git a/apps/web/package.json b/apps/web/package.json index 987c1a2c..dcfd638a 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -26,6 +26,7 @@ "@corbits/client-log": "workspace:*", "@corbits/command-palette": "workspace:*", "@corbits/context-menu": "workspace:*", + "@corbits/error-sink": "workspace:*", "@corbits/inbox": "workspace:*", "@corbits/inference-settings": "workspace:*", "@corbits/insights": "workspace:*", diff --git a/apps/web/src/app-error-boundary.tsx b/apps/web/src/app-error-boundary.tsx index 1462a671..83373313 100644 --- a/apps/web/src/app-error-boundary.tsx +++ b/apps/web/src/app-error-boundary.tsx @@ -3,28 +3,33 @@ // this as a class component (no hook equivalent exists), so it's the one // class in an otherwise function-component codebase. -import { getLogger } from "@corbits/client-log"; +import { reportError } from "@corbits/error-sink"; import { Button, EmptyState } from "@corbits/react-ui"; import { BoldIconProvider, WarningCircle } from "@corbits/icons"; import { Component, type ErrorInfo, type ReactNode } from "react"; -const log = getLogger("web.app-error-boundary"); - export class AppErrorBoundary extends Component< { readonly children: ReactNode }, - { readonly hasError: boolean } + { readonly hasError: boolean; readonly refId?: string } > { - override state = { hasError: false }; + override state: { readonly hasError: boolean; readonly refId?: string } = { + hasError: false, + }; static getDerivedStateFromError(): { hasError: boolean } { return { hasError: true }; } override componentDidCatch(error: Error, info: ErrorInfo): void { - log.error(error.message, { - stack: error.stack, - componentStack: info.componentStack, + const refId = reportError(error, { + operation: "app_render", + extra: { + ...(info.componentStack !== null + ? { componentStack: info.componentStack } + : {}), + }, }); + this.setState({ hasError: true, refId }); } override render(): ReactNode { @@ -35,7 +40,19 @@ export class AppErrorBoundary extends Component< } title="This screen hit a snag" - description="Something broke while rendering. Reloading usually fixes it." + description={ + this.state.refId === undefined ? ( + "Something broke while rendering. Reloading usually fixes it." + ) : ( + <> + Something broke while rendering. Reloading usually fixes it. +
+ + Reference: {this.state.refId} + + + ) + } action={