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,5 +1,6 @@
 import { Metadata } from 'next';
 import GoogleTagManagerScript from '../components/head/GoogleTagManagerScript';
+import ErrorBoundary from '../components/layout/ErrorBoundary';
 
 // Nextjs automatically includes for each route two default meta tags, charset and viewport
 // https://nextjs.org/docs/app/building-your-application/optimizing/metadata#default-fields
@@ -22,7 +23,7 @@ export default function RootLayout({
         but sending an event using sendGTMEvent requires an object rather than a list of arguments so the current gtag api function would need to be adapted
         */}
         <GoogleTagManagerScript />
-        {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';