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