🧐(frontend) add sentry on the frontend side

We want to monitor the frontend side with sentry.
This commit adds the necessary configuration
to the frontend side to send errors to sentry.

.github/workflows/docker-hub.yml

@@ -11,6 +11,7 @@ on:
 
 env:
   DOCKER_USER: 1001:127
+  SENTRY_DSN: ""
 
 jobs:
   build-and-push-backend:
@@ -109,7 +110,10 @@ jobs:
           context: .
           file: ./src/frontend/Dockerfile
           target: frontend-production
-          build-args: DOCKER_USER=${{ env.DOCKER_USER }}:-1000
+          build-args: |
+            DOCKER_USER=${{ env.DOCKER_USER }}:-1000
+            SENTRY_DSN=${{ env.SENTRY_DSN }}
+            SENTRY_ENV=${{ github.event_name != 'pull_request' && github.ref == 'refs/heads/main' && 'production' || 'staging' }}
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to
 
 - 🌐(frontend) Add German translation #255
 - ✨(frontend) Add a broadcast store #387
+- 🔊(project) Add sentry #410
 
 ## Changed
 

src/frontend/Dockerfile

@@ -76,6 +76,12 @@ ENV NEXT_PUBLIC_MEDIA_URL=${MEDIA_URL}
 ARG SW_DEACTIVATED
 ENV NEXT_PUBLIC_SW_DEACTIVATED=${SW_DEACTIVATED}
 
+ARG SENTRY_DSN
+ENV NEXT_PUBLIC_SENTRY_DSN=${SENTRY_DSN}
+
+ARG SENTRY_ENV
+ENV NEXT_PUBLIC_SENTRY_ENV=${SENTRY_ENV}
+
 RUN yarn build
 
 # ---- Front-end image ----

src/frontend/apps/impress/.env

@@ -3,3 +3,5 @@ NEXT_PUBLIC_Y_PROVIDER_URL=
 NEXT_PUBLIC_MEDIA_URL=
 NEXT_PUBLIC_THEME=dsfr
 NEXT_PUBLIC_SW_DEACTIVATED=
+NEXT_PUBLIC_SENTRY_DSN=
+NEXT_PUBLIC_SENTRY_ENV=production

src/frontend/apps/impress/.env.development

@@ -2,3 +2,4 @@ NEXT_PUBLIC_API_ORIGIN=http://localhost:8071
 NEXT_PUBLIC_Y_PROVIDER_URL=ws://localhost:4444
 NEXT_PUBLIC_MEDIA_URL=http://localhost:8083
 NEXT_PUBLIC_SW_DEACTIVATED=true
+NEXT_PUBLIC_SENTRY_ENV=development

src/frontend/apps/impress/next.config.js

@@ -1,5 +1,6 @@
 const crypto = require('crypto');
 
+const { withSentryConfig } = require('@sentry/nextjs');
 const { InjectManifest } = require('workbox-webpack-plugin');
 
 const buildId = crypto.randomBytes(256).toString('hex').slice(0, 8);
@@ -65,4 +66,6 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+module.exports = withSentryConfig(nextConfig, {
+  silent: false,
+});

src/frontend/apps/impress/package.json

@@ -21,6 +21,7 @@
     "@gouvfr-lasuite/integration": "1.0.2",
     "@hocuspocus/provider": "2.13.7",
     "@openfun/cunningham-react": "2.9.4",
+    "@sentry/nextjs": "8.37.1",
     "@tanstack/react-query": "5.59.15",
     "i18next": "23.16.2",
     "i18next-browser-languagedetector": "8.0.0",

src/frontend/apps/impress/sentry.client.config.ts

@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/nextjs';
+
+import packageJson from './package.json';
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  environment: process.env.NEXT_PUBLIC_SENTRY_ENV,
+  integrations: [Sentry.replayIntegration()],
+  release: packageJson.version,
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+  tracesSampleRate: 1.0,
+});