From 8d28ee2058da55de2431a1581333b978fe4f0443 Mon Sep 17 00:00:00 2001
From: mr x -contributor <121688108+Shiv10122003@users.noreply.github.com>
Date: Wed, 16 Jul 2025 09:25:53 +0530
Subject: [PATCH 1/2] Create ErrorBoundary.tsx

fix: add global ErrorBoundary component and wrap _app to prevent blank-screen crash (#7872)
---
 src/components/ErrorBoundary.tsx | 38 ++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/components/ErrorBoundary.tsx

diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
new file mode 100644
index 00000000000..25c42fb9119
--- /dev/null
+++ b/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;
+  }
+          }

From 590a1089abc3b1b855de7f878fb3ce415d4f366d Mon Sep 17 00:00:00 2001
From: mr x -contributor <121688108+Shiv10122003@users.noreply.github.com>
Date: Wed, 16 Jul 2025 09:30:43 +0530
Subject: [PATCH 2/2] fix: wrap app in global ErrorBoundary to prevent
 blank-screen crash (#7872)  - Added src/components/ErrorBoundary.tsx -
 Wrapped <Component /> in _app.tsx with <ErrorBoundary> - Prevents complete UI
 loss on runtime errors - Logs error in console, shows friendly message to
 users  Closes #7872

---
 src/pages/_app.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 5431f87cc9e..7deeac26b77 100644
--- a/src/pages/_app.tsx
+++ b/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>;
 }