From ba2f66ebc14870b3908fbb896205a97ca71ca6c1 Mon Sep 17 00:00:00 2001
From: legop3 <minecratfd8@gmail.com>
Date: Wed, 7 Oct 2026 13:38:56 -0400
Subject: [PATCH] add react wrapper thingy to find crashings

---
 webui/src/admin/components/AdminOverview.jsx |  2 +-
 webui/src/components/AppErrorBoundary.jsx    | 51 ++++++++++++++++++++
 webui/src/main.jsx                           |  5 +-
 3 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 webui/src/components/AppErrorBoundary.jsx

diff --git a/webui/src/admin/components/AdminOverview.jsx b/webui/src/admin/components/AdminOverview.jsx
index 260b6504..d8436a2f 100644
--- a/webui/src/admin/components/AdminOverview.jsx
+++ b/webui/src/admin/components/AdminOverview.jsx
@@ -141,7 +141,7 @@ export default function AdminOverview({ snapshot, socket, runSensitive, onSnapsh
         <label className="flex max-w-md flex-col gap-0.5">
           <span>Container tag</span>
           <input
-            className="rounded border border-slate-600 bg-slate-900 px-2 py-1 text-slate-100"
+            className="field-input w-full"
             value={containerTag ?? lifecycle?.selectedTag ?? ''}
             placeholder="Enter a tag"
             maxLength={128}
diff --git a/webui/src/components/AppErrorBoundary.jsx b/webui/src/components/AppErrorBoundary.jsx
new file mode 100644
index 00000000..fd9e6865
--- /dev/null
+++ b/webui/src/components/AppErrorBoundary.jsx
@@ -0,0 +1,51 @@
+import { Component } from 'react';
+
+export default class AppErrorBoundary extends Component {
+  state = { crashed: false, error: null, componentStack: '', copyStatus: '' };
+
+  static getDerivedStateFromError(error) {
+    return { crashed: true, error };
+  }
+
+  componentDidCatch(error, info) {
+    this.setState({ componentStack: info.componentStack || '' });
+  }
+
+  getDetails() {
+    const { error, componentStack } = this.state;
+    return [
+      String(error?.message ?? error ?? 'Unknown error'),
+      'JavaScript stack:',
+      error?.stack || 'Unavailable',
+      'React component stack:',
+      componentStack || 'Unavailable',
+    ].join('\n\n');
+  }
+
+  copyDetails = async () => {
+    try {
+      await navigator.clipboard.writeText(this.getDetails());
+      this.setState({ copyStatus: 'Copied.' });
+    } catch {
+      // Clipboard access may be unavailable on the display device; the text
+      // remains selectable so the error can still be copied manually.
+      this.setState({ copyStatus: 'Copy unavailable. Select the details below to copy manually.' });
+    }
+  };
+
+  render() {
+    if (!this.state.crashed) return this.props.children;
+
+    // Keep recovery independent of providers and shared UI components: one of
+    // those dependencies may be the reason the application failed.
+    return (
+      <main style={{ backgroundColor: '#b2339f', minHeight: '100vh' }}>
+        <h1>Application crashed</h1>
+        <button type="button" onClick={this.copyDetails}>Copy details</button>
+        <button type="button" onClick={() => window.location.reload()}>Reload</button>
+        {this.state.copyStatus ? <p role="status">{this.state.copyStatus}</p> : null}
+        <pre>{this.getDetails()}</pre>
+      </main>
+    );
+  }
+}
diff --git a/webui/src/main.jsx b/webui/src/main.jsx
index 632fb8b0..19a4e571 100644
--- a/webui/src/main.jsx
+++ b/webui/src/main.jsx
@@ -22,6 +22,7 @@ import AnalyticsReporter from './analytics/AnalyticsReporter.jsx'
 import PtzAppRoot from './ptz/PtzAppRoot.jsx'
 import OperatingModeRouteSync from './components/OperatingModeRouteSync/index.jsx'
 import InitialSessionOverlay from './components/InitialSessionOverlay/index.jsx'
+import AppErrorBoundary from './components/AppErrorBoundary.jsx'
 
 // Reporting and administration carry substantial route-specific libraries.
 // Loading each only on its own route keeps charting and JSON Schema tooling out
@@ -40,6 +41,7 @@ function lazyRoute(element, label) {
 }
 
 createRoot(document.getElementById('root')).render(
+  <AppErrorBoundary>
   <StrictMode>
     <SocketProvider>
       <SessionProvider>
@@ -84,5 +86,6 @@ createRoot(document.getElementById('root')).render(
         </TelemetryProvider>
       </SessionProvider>
     </SocketProvider>
-  </StrictMode>,
+  </StrictMode>
+  </AppErrorBoundary>,
 )