Add global ErrorBoundary to prevent blank screen crashes (#7872)

src/components/ErrorBoundary.tsx

@@ -0,0 +1,38 @@
+"use client";
+import { Component, ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+};
+
+type State = {
+  hasError: boolean;
+};
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(_: Error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: any) {
+    console.error("Caught by ErrorBoundary:", error, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <main style={{ padding: "2rem", textAlign: "center" }}>
+          <h1>Something went wrong.</h1>
+          <p>Try refreshing the page. If the problem persists, please report it.</p>
+        </main>
+      );
+    }
+
+    return this.props.children;
+  }
+          }

src/pages/_app.tsx

@@ -1,6 +1,7 @@
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
+import { ErrorBoundary } from '../components/ErrorBoundary';
 
 import {useEffect} from 'react';
 import {AppProps} from 'next/app';
@@ -54,5 +55,7 @@ export default function MyApp({Component, pageProps}: AppProps) {
     };
   }, [router.events]);
 
-  return <Component {...pageProps} />;
+  return <ErrorBoundary>
+    <Component {...pageProps} />
+  </ErrorBoundary>;
 }