feat: Allow Sentry to Track React Components Name

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

package.json

@@ -60,6 +60,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

@@ -2,19 +2,29 @@ import { ConfigEnv, defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import basicSsl from "@vitejs/plugin-basic-ssl";
 import { VitePWA, VitePWAOptions } from "vite-plugin-pwa";
+import { sentryVitePlugin } from "@sentry/vite-plugin";
 
 // https://vitejs.dev/config/
 export default defineConfig(({mode}: ConfigEnv) => {
   const env = loadEnv(mode, process.cwd(), "");
   return {
-    plugins: [react(), basicSsl(), VitePWA(getPwaOptions(env))],
+    plugins: [react(), basicSsl(), 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,
       host: true,
       // port: parseInt(env.PORT ?? "9100", 10),
       // strictPort: true,
     },
     build: {
+      sourcemap: true, // Source map generation must be turned on
       outDir: "./build"
     }
   }