chore: wip

packages/app/src/app/layout.tsx

@@ -10,6 +10,7 @@ import { config } from "@common/config";
 import { ConfigProvider } from "@components/utils/ConfigProvider";
 import { FeatureStatusProvider } from "@components/utils/FeatureStatusProvider";
 import { Matomo } from "@components/utils/Matomo";
+import { SentryErrorBoundary } from "@components/utils/SentryErrorBoundary";
 import { ClientAnimate } from "@design-system/utils/client/ClientAnimate";
 import { SkeletonTheme } from "@design-system/utils/client/skeleton";
 import { headers } from "next/headers";
@@ -101,7 +102,9 @@ const RootLayout = ({ children }: PropsWithChildren) => {
                   ]}
                 />
                 <ConsentBannerAndConsentManagement />
-                <ConfigProvider config={mcpconfig}>{children}</ConfigProvider>
+                <ConfigProvider config={mcpconfig}>
+                  <SentryErrorBoundary>{children}</SentryErrorBoundary>
+                </ConfigProvider>
               </SkeletonTheme>
             </DsfrProvider>
           </SessionProvider>

packages/app/src/components/utils/SentryErrorBoundary.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import { Component, type PropsWithChildren } from "react";
+
+interface State {
+  hasError: boolean;
+}
+
+export class SentryErrorBoundary extends Component<PropsWithChildren, State> {
+  constructor(props: PropsWithChildren) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  public static getDerivedStateFromError(): State {
+    return { hasError: true };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    console.log("Error caught by Sentry boundary:", error, errorInfo);
+    Sentry.captureException(error, {
+      contexts: {
+        react: {
+          componentStack: errorInfo.componentStack,
+        },
+      },
+    });
+  }
+
+  public render(): React.ReactNode {
+    if (this.state.hasError) {
+      return (
+        <div className="fr-alert fr-alert--error fr-my-3w">
+          <h3 className="fr-alert__title">Une erreur est survenue</h3>
+          <p>L'erreur a été signalée automatiquement à notre équipe.</p>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}