From 0f7d11a19784fb6c7a547c4326c65d3458abf3b4 Mon Sep 17 00:00:00 2001
From: nmemmert <67961292+nmemmert@users.noreply.github.com>
Date: Mon, 15 Dec 2025 13:04:25 -0500
Subject: [PATCH] Client: add ErrorBoundary to avoid blank screen and surface
 errors; rebuild

---
 client/build/asset-manifest.json |  6 +++---
 client/build/index.html          |  2 +-
 client/src/ErrorBoundary.js      | 37 ++++++++++++++++++++++++++++++++
 client/src/index.js              |  5 ++++-
 4 files changed, 45 insertions(+), 5 deletions(-)
 create mode 100644 client/src/ErrorBoundary.js

diff --git a/client/build/asset-manifest.json b/client/build/asset-manifest.json
index 231fe39..8f12f90 100644
--- a/client/build/asset-manifest.json
+++ b/client/build/asset-manifest.json
@@ -1,15 +1,15 @@
 {
   "files": {
     "main.css": "/static/css/main.44e40ac2.css",
-    "main.js": "/static/js/main.49450b63.js",
+    "main.js": "/static/js/main.3a72e5e4.js",
     "static/js/453.d456ce70.chunk.js": "/static/js/453.d456ce70.chunk.js",
     "index.html": "/index.html",
     "main.44e40ac2.css.map": "/static/css/main.44e40ac2.css.map",
-    "main.49450b63.js.map": "/static/js/main.49450b63.js.map",
+    "main.3a72e5e4.js.map": "/static/js/main.3a72e5e4.js.map",
     "453.d456ce70.chunk.js.map": "/static/js/453.d456ce70.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.44e40ac2.css",
-    "static/js/main.49450b63.js"
+    "static/js/main.3a72e5e4.js"
   ]
 }
\ No newline at end of file
diff --git a/client/build/index.html b/client/build/index.html
index 8b6ae45..e5cfbc7 100644
--- a/client/build/index.html
+++ b/client/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="SkyWatch - Infrastructure monitoring and alerting system"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>SkyWatch</title><script defer="defer" src="/static/js/main.49450b63.js"></script><link href="/static/css/main.44e40ac2.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
\ No newline at end of file
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="SkyWatch - Infrastructure monitoring and alerting system"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>SkyWatch</title><script defer="defer" src="/static/js/main.3a72e5e4.js"></script><link href="/static/css/main.44e40ac2.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
\ No newline at end of file
diff --git a/client/src/ErrorBoundary.js b/client/src/ErrorBoundary.js
new file mode 100644
index 0000000..01f760e
--- /dev/null
+++ b/client/src/ErrorBoundary.js
@@ -0,0 +1,37 @@
+import React from 'react';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, info) {
+    // Log to console; could later POST to /api if needed
+    // eslint-disable-next-line no-console
+    console.error('App error:', error, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ padding: '2rem', fontFamily: 'sans-serif' }}>
+          <h2>Something went wrong.</h2>
+          <p>Please check the browser console for details.</p>
+          {process.env.NODE_ENV === 'development' && this.state.error && (
+            <pre style={{ whiteSpace: 'pre-wrap', color: '#b71c1c' }}>
+              {String(this.state.error)}
+            </pre>
+          )}
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
diff --git a/client/src/index.js b/client/src/index.js
index d563c0f..266af4b 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -2,12 +2,15 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import ErrorBoundary from './ErrorBoundary';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
   </React.StrictMode>
 );