build(sentry): add sourcemaps upload to sentry (#642)

perf: import material submodules in waiting screen

.github/workflows/deploy-dev.yml

@@ -31,6 +31,7 @@ jobs:
           VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           VITE_VERSION: ${{ github.sha }}
           VITE_WS_HOST: ${{ vars.WS_HOST }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
           # add any env variable needed by your app here
         run: yarn build
         shell: bash

.github/workflows/deploy-prod.yml

@@ -46,6 +46,7 @@ jobs:
           VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           VITE_VERSION: ${{ steps.set-version.outputs.VERSION }}
           VITE_WS_HOST: ${{ vars.WS_HOST }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
           # add any env variable needed by your app here
         run: yarn build
         shell: bash

.github/workflows/deploy-stage.yml

@@ -46,6 +46,7 @@ jobs:
           VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           VITE_VERSION: ${{ steps.set-version.outputs.VERSION }}
           VITE_WS_HOST: ${{ vars.WS_HOST }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
           # add any env variable needed by your app here
         run: yarn build
         shell: bash

.gitignore

@@ -40,3 +40,6 @@ yarn-debug.log*
 cypress/screenshots/
 cypress/videos/
 cypress/downloads/
+
+# Sentry Config File
+.env.sentry-build-plugin

package.json

@@ -39,6 +39,7 @@
     "@mui/x-data-grid": "^6.19.4",
     "@nivo/boxplot": "^0.87.0",
     "@sentry/react": "^8.0.0",
+    "@sentry/vite-plugin": "^2.22.6",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^4.36.1",
     "@uiw/react-codemirror": "^4.21.22",

src/modules/common/WaitingScreen.tsx

@@ -1,7 +1,10 @@
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Alert, LinearProgress, Stack, Typography } from '@mui/material';
+import Alert from '@mui/material/Alert';
+import LinearProgress from '@mui/material/LinearProgress';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 
 import { ActivityStatus } from '@/interfaces/interactionProcess';
 

vite.config.ts

@@ -5,6 +5,7 @@ import { resolve } from 'path';
 import { UserConfigExport, defineConfig, loadEnv } from 'vite';
 import checker from 'vite-plugin-checker';
 import istanbul from 'vite-plugin-istanbul';
+import { sentryVitePlugin } from "@sentry/vite-plugin";
 
 // https://vitejs.dev/config/
 export default ({ mode }: { mode: string }): UserConfigExport => {
@@ -28,6 +29,7 @@ export default ({ mode }: { mode: string }): UserConfigExport => {
     },
     build: {
       outDir: 'build',
+      sourcemap: true,
     },
     plugins: [
       mode === 'test'
@@ -48,6 +50,12 @@ export default ({ mode }: { mode: string }): UserConfigExport => {
         forceBuildInstrument: mode === 'test',
         checkProd: true,
       }),
+      // Put the Sentry vite plugin after all other plugins
+    sentryVitePlugin({
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+      org: "graasp",
+      project: "graasp-app-collaborative-ideation",
+    }),
     ],
     resolve: {
       alias: {