Fix Sentry init (#19)

* Fix Sentry init

* Run linters

sentry.client.config.ts

@@ -1,15 +1,2 @@
-import * as Sentry from '@sentry/nextjs';
-import { Integrations as TracingIntegrations } from '@sentry/tracing';
-import { publicRuntimeConfig } from './src/runtimeConfig';
-
-const { APP_ENVIRONMENT, APP_FRONTEND_RELEASE, PUBLIC_SENTRY_DSN } = publicRuntimeConfig;
-
-if (publicRuntimeConfig.PUBLIC_SENTRY_DSN) {
-  Sentry.init({
-    dsn: PUBLIC_SENTRY_DSN,
-    release: APP_FRONTEND_RELEASE,
-    environment: APP_ENVIRONMENT,
-    integrations: [new TracingIntegrations.BrowserTracing()],
-    tracesSampleRate: 1.0,
-  });
-}
+// We initialize Sentry in SentryClientSideInitializer to use environment variables.
+// Empty file so that Sentry wouldn't complain about missing config.

sentry.server.config.ts

@@ -1,9 +1,9 @@
 import * as Sentry from '@sentry/nextjs';
-import { publicRuntimeConfig } from './src/runtimeConfig';
+import environment from './src/environment/server';
 
-const { APP_ENVIRONMENT, APP_FRONTEND_RELEASE, PUBLIC_SENTRY_DSN } = publicRuntimeConfig;
+const { APP_ENVIRONMENT, APP_FRONTEND_RELEASE, PUBLIC_SENTRY_DSN } = environment.publicEnvironment;
 
-if (publicRuntimeConfig.PUBLIC_SENTRY_DSN) {
+if (PUBLIC_SENTRY_DSN) {
   Sentry.init({
     dsn: PUBLIC_SENTRY_DSN,
     release: APP_FRONTEND_RELEASE,

src/app/[projectID]/_components/SentryClientSideInitializer.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import useSentryInit from '../../../hooks/useSentryInit';
+
+const SentryClientSideInitializer = () => {
+  useSentryInit();
+  return null;
+};
+
+export default SentryClientSideInitializer;

src/app/[projectID]/layout.tsx

@@ -7,6 +7,7 @@ import { ProjectPageT } from '../../types';
 import { defaultMetadata } from '../../utils/seo';
 import Analytics from './_components/Analytics';
 import { ProjectConfig } from '../../api/projectConfig/types';
+import SentryClientSideInitializer from './_components/SentryClientSideInitializer';
 
 export const metadata = defaultMetadata;
 
@@ -15,6 +16,7 @@ const Layout: ProjectPageT = async ({ children, params }) => {
   return (
     <Providers projectConfig={projectConfig} environment={environment}>
       <Analytics />
+      <SentryClientSideInitializer />
       <AppLayout className="h-full">{children}</AppLayout>
     </Providers>
   );

src/hooks/useSentryInit.ts

@@ -0,0 +1,26 @@
+'use client';
+
+import * as Sentry from '@sentry/nextjs';
+import { Integrations as TracingIntegrations } from '@sentry/tracing';
+import { useEnvironment } from '../environment/environmentContext';
+import { useEffect } from 'react';
+
+const useSentryInit = () => {
+  const {
+    publicEnvironment: { APP_ENVIRONMENT, APP_FRONTEND_RELEASE, PUBLIC_SENTRY_DSN },
+  } = useEnvironment();
+  useEffect(() => {
+    if (PUBLIC_SENTRY_DSN) {
+      Sentry.init({
+        dsn: PUBLIC_SENTRY_DSN,
+        release: APP_FRONTEND_RELEASE,
+        environment: APP_ENVIRONMENT,
+        integrations: [new TracingIntegrations.BrowserTracing()],
+        tracesSampleRate: 1.0,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};
+
+export default useSentryInit;