App router migration error boundary component

app/error-route-test/page.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+export default function Page() {
+  setTimeout(() => {
+    throw new Error('An Error');
+  }, 1000);
+  return <div>ERROR TESTING PAGE</div>;
+}

app/layout.tsx

@@ -1,4 +1,5 @@
 import GoogleTagManagerScript from '../components/head/GoogleTagManagerScript';
+import ErrorBoundary from '../components/layout/ErrorBoundary';
 import rootMetadata from './rootMetadata';
 import RollbarScript from '../components/head/RollbarScript';
 
@@ -20,7 +21,7 @@ export default function RootLayout({
         */}
         <GoogleTagManagerScript />
         <RollbarScript />
-        {children}
+        <ErrorBoundary>{children}</ErrorBoundary>
       </body>
     </html>
   );

components/layout/ErrorBoundary.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Alert, Snackbar } from '@mui/material';
 import { Component, ErrorInfo, ReactNode } from 'react';