AppErrorBoundary: report render crashes through reportError with a refId

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:*",

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<
           <EmptyState
             icon={<WarningCircle />}
             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.
+                  <br />
+                  <span className="app-boot-frame-refid">
+                    Reference: {this.state.refId}
+                  </span>
+                </>
+              )
+            }
             action={
               <Button
                 variant="outline"

apps/web/src/app.css

@@ -87,6 +87,13 @@ select:disabled,
   height: 100dvh;
 }
 
+/* A quoteable reference id under the error boundary's failure message
+   (CL-6632) — small and muted, same treatment as `.onboarding-error-refid`. */
+.app-boot-frame-refid {
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+}
+
 /* The app shell: one sidebar, the main pane, and the optional canvas.
    Columns are sized in rem/vw so they hold their proportions across
    viewports instead of clipping at a fixed pixel width. */

apps/web/test/app-error-boundary.test.tsx

@@ -55,4 +55,20 @@ describe("AppErrorBoundary", () => {
     expect(el.textContent).toContain("Reload");
     expect(el.textContent).not.toContain("Everything is fine");
   });
+
+  // CL-6632: a render crash that never reaches a sink is undiagnosable in
+  // production — the boundary must report through `reportError`
+  // (`@corbits/error-sink`) and show the refId that call returns, so a
+  // person hitting this can quote it back to support.
+  test("a caught render error surfaces a refId a person can quote", () => {
+    const originalError = console.error;
+    console.error = () => undefined;
+    let el: HTMLDivElement;
+    try {
+      el = render(<Bomb />);
+    } finally {
+      console.error = originalError;
+    }
+    expect(el.textContent).toMatch(/Reference: [0-9a-z]+-[0-9a-z]+/);
+  });
 });