Commit 133db22fae34cfb2e62a806e99d22674b0376f35 | the-knife

author	Wout Stiens <71498452+StiensWout@users.noreply.github.com> 2026-09-02 07:12:36+02:00
committer	GitHub <noreply@github.com> 2026-09-02 01:12:36-04:00
log	133db22fae34cfb2e62a806e99d22674b0376f35
tree	7b813c3e9dc378e1385623a0baa0b38a4479f8c6
parent	b520120cf169ce63a5606447a292451e97622c9a
signature	Signed by PGP key B5690EEEBB952194

feat(web): copy the full error report from the error page (#9166)

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>

1 files changed, 48 insertions(+), 11 deletions(-)

apps
- web
  - src
    routes
    __root.tsx

apps/web/src/routes/__root.tsx+48-11

 @@ -8,9 +8,10 @@ import {
   useLocation,
   useNavigate,
 } from "@tanstack/react-router";
-import { useEffect, useEffectEvent, useRef, useState } from "react";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
-import { APP_BASE_NAME, APP_DISPLAY_NAME, APP_STAGE_LABEL } from "../branding";
+import { APP_BASE_NAME, APP_DISPLAY_NAME, APP_STAGE_LABEL, APP_VERSION } from "../branding";
 import { resolveServerBackedAppDisplayName } from "../branding.logic";
 import { AppSidebarLayout } from "../components/AppSidebarLayout";
 import { CommandPalette } from "../components/CommandPalette";
 @@ -22,6 +23,7 @@ import { DesktopAppActivationCoordinator } from "../components/desktop/DesktopAp
 import { ProviderUpdateLaunchNotification } from "../components/ProviderUpdateLaunchNotification";
 import { SlowRpcRequestToastCoordinator } from "../components/SlowRpcRequestToastCoordinator";
 import { ThemeEditorHost } from "../components/settings/ThemeEditorHost";
+import { useCopyToClipboard } from "../hooks/useCopyToClipboard";
 import { useDefaultThemeAdoption } from "../hooks/useDefaultTheme";
 import { useEnvironmentThemeSync } from "../hooks/useEnvironmentTheme";
 import { Button } from "../components/ui/button";
 @@ -267,7 +269,9 @@ function HostedStaticEnvironmentBootstrap() {
 function RootRouteErrorView({ error, reset }: ErrorComponentProps) {
   const message = errorMessage(error);
-  const details = errorDetails(error);
+  // Router pathname rather than window.location: desktop uses hash history, where the window path is always "/".
+  const pathname = useLocation({ select: (location) => location.pathname });
+  const report = useMemo(() => errorReport(error, pathname), [error, pathname]);
   return (
     <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-background px-4 py-10 text-foreground sm:px-6">
 @@ -292,22 +296,32 @@ function RootRouteErrorView({ error, reset }: ErrorComponentProps) {
           <Button size="sm" variant="outline" onClick={() => window.location.reload()}>
             Reload app
           </Button>
+          <CopyErrorButton report={report} />
         </div>
-        <details className="group mt-5 overflow-hidden rounded-lg border border-border/70 bg-background/55">
+        <div className="mt-5 overflow-hidden rounded-lg border border-border/70 bg-background/55">
-          <summary className="cursor-pointer list-none px-3 py-2 text-xs font-medium text-muted-foreground">
+          <p className="px-3 py-1.5 text-xs font-medium text-muted-foreground">Error report</p>
-            <span className="group-open:hidden">Show error details</span>
+          <pre className="max-h-64 overflow-auto border-t border-border/70 bg-background/80 px-3 py-2 text-xs whitespace-pre-wrap text-foreground/85">
-            <span className="hidden group-open:inline">Hide error details</span>
+            {report}
-          </summary>
-          <pre className="max-h-56 overflow-auto border-t border-border/70 bg-background/80 px-3 py-2 text-xs text-foreground/85">
-            {details}
           </pre>
-        </details>
+        </div>
       </section>
     </div>
   );
 }
+/** Copies the full error report and swaps to a check mark for a moment as confirmation. */
+function CopyErrorButton({ report }: { report: string }) {
+  const { copyToClipboard, isCopied } = useCopyToClipboard({ target: "error-report" });
+  return (
+    <Button size="sm" variant="outline" onClick={() => copyToClipboard(report)}>
+      {isCopied ? <CheckIcon className="text-success" /> : <CopyIcon />}
+      {isCopied ? "Copied" : "Copy error"}
+    </Button>
+  );
+}
 function errorMessage(error: unknown): string {
   if (error instanceof Error && error.message.trim().length > 0) {
     return error.message;
 @@ -336,6 +350,29 @@ function errorDetails(error: unknown): string {
   }
 }
+const MAX_ERROR_CAUSE_DEPTH = 5;
+/**
+ * Full error text for bug reports: app build, page path, time, then the stack
+ * and any cause chain. Takes the pathname only so tokens in the query never
+ * land on the clipboard.
+ */
+function errorReport(error: unknown, pathname: string): string {
+  const lines = [
+    `${APP_DISPLAY_NAME} ${APP_VERSION}`,
+    `Path: ${pathname}`,
+    `Time: ${new Date().toISOString()}`,
+    "",
+    errorDetails(error),
+  ];
+  let cause = error instanceof Error ? error.cause : undefined;
+  for (let depth = 0; cause !== undefined && depth < MAX_ERROR_CAUSE_DEPTH; depth += 1) {
+    lines.push("", "Caused by:", errorDetails(cause));
+    cause = cause instanceof Error ? cause.cause : undefined;
+  }
+  return lines.join("\n");
+}
 function AuthenticatedTracingBootstrap() {
   useEffect(() => {
     void configureClientTracing();