Change @sentry/browser to @sentry/react (#27)

.github/workflows/firebase-hosting-merge.yml

@@ -1,6 +1,3 @@
-# This file was auto-generated by the Firebase CLI
-# https://github.com/firebase/firebase-tools
-
 name: Deploy to Firebase Hosting on merge
 'on':
   push:
@@ -14,6 +11,7 @@ jobs:
       - run: npm ci && npm run build
         env:
           VITE_SENTRY_AUTH_TOKEN: '${{ secrets.SENTRY_AUTH_TOKEN }}'
+          VITE_SENTRY_DSN: '${{ secrets.SENTRY_DSN }}'
           VITE_FIREBASE_API_KEY: '${{ secrets.FIREBASE_API_KEY }}'
           VITE_FIREBASE_AUTH_DOMAIN: '${{ secrets.FIREBASE_AUTH_DOMAIN }}'
           VITE_FIREBASE_MEASUREMENT_ID: '${{ secrets.FIREBASE_MEASUREMENT_ID }}'

package.json

@@ -20,7 +20,7 @@
         "@fontsource/roboto": "^5.1.0",
         "@mui/icons-material": "^6.1.2",
         "@mui/material": "^6.1.2",
-        "@sentry/browser": "^8.33.1",
+        "@sentry/react": "^8.34.0",
         "@sentry/vite-plugin": "^2.22.5",
         "@types/node": "^22.7.5",
         "dayjs": "^1.11.13",

src/components/feedback-dialog/feedback-dialog.tsx

@@ -14,7 +14,7 @@ import {
     HowToVote as HowToVoteIcon,
     Send as SendIcon,
 } from '@mui/icons-material'
-import * as sentry from '@sentry/browser'
+import { captureFeedback, captureMessage } from '@sentry/react'
 
 export function FeedbackDialog() {
     const [open, setOpen] = useState(false)
@@ -64,12 +64,11 @@ export function FeedbackDialog() {
                                 return
                             }
 
-                            sentry.captureFeedback({
+                            captureFeedback({
                                 name: formValues.name,
                                 email: formValues.email,
                                 message: formValues.message,
-                                associatedEventId:
-                                    sentry.captureMessage('Feedback'),
+                                associatedEventId: captureMessage('Feedback'),
                             })
 
                             setOpen(false)

src/instrument.ts

@@ -0,0 +1,8 @@
+import { init } from '@sentry/react'
+
+if (import.meta.env.PROD) {
+    init({
+        dsn: import.meta.env.VITE_SENTRY_DSN,
+        integrations: [],
+    })
+}

src/main.tsx

@@ -3,6 +3,7 @@ import '@fontsource/roboto/400.css'
 import '@fontsource/roboto/500.css'
 import '@fontsource/roboto/700.css'
 
+import './instrument'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { Providers } from './providers'