visionos-monorepo 0.1.0

package/client/src/components/ErrorBoundary.tsx

@@ -0,0 +1,92 @@
+import React, { Component, type ErrorInfo, type ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+    error: null,
+    errorInfo: null
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error, errorInfo: null };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("VisionOS Client Runtime Crash caught by ErrorBoundary:", error, errorInfo);
+    this.setState({ errorInfo });
+  }
+
+  private handleRetry = () => {
+    window.localStorage.removeItem("visionos.authToken");
+    window.location.href = "/";
+  };
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <div className="monitor-bezel" style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
+          <div className="monitor-screen" style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", padding: "40px" }}>
+            <div style={{ maxWidth: "800px", width: "100%", background: "var(--m-white, #FFFFFF)", border: "1px solid rgba(224, 90, 58, 0.3)", borderRadius: "var(--radius-lg, 12px)", padding: "32px", boxShadow: "0 8px 32px rgba(224, 90, 58, 0.1)", position: "relative" }}>
+              <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: "4px", background: "var(--accent-red, #E05A3A)" }} />
+              
+              <span className="text-label" style={{ color: "var(--accent-red, #E05A3A)", fontFamily: "var(--font-mono, monospace)" }}>
+                ● SYSTEM CRASH DETECTED
+              </span>
+              
+              <h1 style={{ marginTop: "12px", fontSize: "2rem", fontWeight: 800, color: "var(--m-ink, #0A0A0A)", fontFamily: "var(--font-sans, sans-serif)", letterSpacing: "-0.02em" }}>
+                Vite Dev Runtime Error
+              </h1>
+              
+              <p className="m-text-body" style={{ marginTop: "16px", color: "var(--ink-soft, #4A4A4A)", lineHeight: 1.6 }}>
+                An unexpected exception halted the React application thread. This usually happens when an unhandled API connection gets refused, or a property lookup fails on an uninitialized data array.
+              </p>
+
+              <div style={{ marginTop: "24px", padding: "20px", background: "rgba(224, 90, 58, 0.04)", border: "1px solid rgba(224, 90, 58, 0.15)", borderRadius: "var(--radius-md, 8px)", fontFamily: "var(--font-mono, monospace)", fontSize: "0.85rem", color: "var(--m-ink, #0A0A0A)", overflowX: "auto" }}>
+                <div style={{ fontWeight: 700, color: "var(--accent-red, #E05A3A)", marginBottom: "8px" }}>
+                  Error: {this.state.error?.message || "Unknown error"}
+                </div>
+                {this.state.error?.stack && (
+                  <pre style={{ margin: 0, whiteSpace: "pre-wrap", wordBreak: "break-all", opacity: 0.8, lineHeight: 1.45, maxHeight: "250px", overflowY: "auto" }}>
+                    {this.state.error.stack}
+                  </pre>
+                )}
+              </div>
+
+              <div style={{ marginTop: "32px", display: "flex", gap: "12px" }}>
+                <button
+                  onClick={() => window.location.reload()}
+                  className="auth-submit"
+                  style={{ background: "#000000", color: "var(--bg-beige)", border: "1px solid var(--bezel-outer)", padding: "10px 20px", borderRadius: "var(--radius-md, 6px)", cursor: "pointer", fontWeight: 700, boxShadow: "0 0 12px rgba(168, 168, 160, 0.4)", transition: "all 0.2s ease" }}
+                >
+                  Reload Page
+                </button>
+                <button
+                  onClick={this.handleRetry}
+                  className="auth-google-fallback"
+                  style={{ background: "#000000", color: "var(--m-ink)", border: "1px solid rgba(255,255,255,0.25)", padding: "10px 20px", borderRadius: "var(--radius-md, 6px)", cursor: "pointer", boxShadow: "0 0 8px rgba(255,255,255,0.05)" }}
+                >
+                  Clear Session & Reset
+                </button>
+              </div>
+            </div>
+          </div>
+          <div className="bezel-notch">
+            <div className="bezel-notch-inner" />
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}