Create ErrorBoundary.tsx

fix: add global ErrorBoundary component and wrap _app to prevent blank-screen crash (#7872)

Author: Shiv10122003

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;
+  }
+          }