GH-2829 Add Sentry on frontend (#3111)

* GH-2829 pass sentry dsn key from backend in ClientConfig

* GH-2829 add Sentry library on frontend

* GH-2829 fetch dsnKey in GQL and add a state

* GH-2829 initialize Sentry on frontend

* GH-2829 fix linting issues

* Update yarn.lock

* GH-2829 update graphql schema for clientConfig

* GH-2829 remove Sentry comments

* GH-2829 rename sentry state

* GH-2829 rename dsnKey to dsn

* GH-2829 refactor to use componentEffect for sentry initialization

* GH-2829 fix linting issues

* GH-2829 update Graphql types

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/error-handler/components/ExceptionHandlerProvider.tsx

@@ -0,0 +1,12 @@
+import { SentryInitEffect } from '@/error-handler/components/SentryInitiEffect';
+
+export const ExceptionHandlerProvider: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
+  return (
+    <>
+      <SentryInitEffect />
+      {children}
+    </>
+  );
+};

packages/twenty-front/src/modules/error-handler/components/SentryInitiEffect.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import * as Sentry from '@sentry/react';
+import { useRecoilValue } from 'recoil';
+
+import { sentryConfigState } from '@/client-config/states/sentryConfigState';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
+
+export const SentryInitEffect = () => {
+  const sentryConfig = useRecoilValue(sentryConfigState);
+  const [isSentryInitialized, setIsSentryInitialized] = useState(false);
+
+  useEffect(() => {
+    if (sentryConfig?.dsn && !isSentryInitialized) {
+      Sentry.init({
+        dsn: sentryConfig?.dsn,
+        integrations: [
+          new Sentry.BrowserTracing({
+            tracePropagationTargets: [
+              'localhost:3001',
+              REACT_APP_SERVER_BASE_URL,
+            ],
+          }),
+          new Sentry.Replay(),
+        ],
+        tracesSampleRate: 1.0,
+        replaysSessionSampleRate: 0.1,
+        replaysOnErrorSampleRate: 1.0,
+      });
+
+      setIsSentryInitialized(true);
+    }
+  }, [sentryConfig, isSentryInitialized]);
+  return <></>;
+};