feat: Allow Sentry to Track React Components Name

https://docs.sentry.io/platforms/javascript/guides/react/features/component-tracking/#component-name-tracking

package.json

@@ -61,6 +61,7 @@
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
+    "@sentry/vite-plugin": "^2.16.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "13.3.0",
     "@testing-library/user-event": "^14.2.1",

vite.config.ts

@@ -3,6 +3,7 @@ import react from "@vitejs/plugin-react-swc";
 import basicSsl from "@vitejs/plugin-basic-ssl";
 import { VitePWA, VitePWAOptions } from "vite-plugin-pwa";
 import eslint from "vite-plugin-eslint"
+import { sentryVitePlugin } from "@sentry/vite-plugin";
 
 // https://vitejs.dev/config/
 export default defineConfig(({mode}: ConfigEnv) => {
@@ -14,7 +15,15 @@ export default defineConfig(({mode}: ConfigEnv) => {
 
       }), 
       basicSsl(), 
-      VitePWA(getPwaOptions(env))
+      VitePWA(getPwaOptions(env)),
+      sentryVitePlugin({
+        // Put the Sentry vite plugin after all other plugins: https://www.npmjs.com/package/@sentry/vite-plugin
+        org: process.env.SENTRY_ORG,
+        project: process.env.SENTRY_PROJECT,
+        // Auth tokens can be obtained from https://sentry.io/orgredirect/organizations/:orgslug/settings/auth-tokens/
+        authToken: process.env.SENTRY_AUTH_TOKEN,
+        reactComponentAnnotation: {enabled: true},
+      }),
     ],
     server: {
       https: false,
@@ -23,6 +32,7 @@ export default defineConfig(({mode}: ConfigEnv) => {
       // strictPort: true,
     },
     build: {
+      sourcemap: true, // Source map generation must be turned on
       outDir: "./build"
     }
   }