add sentry error monitoring (#145)

.github/workflows/build.yaml

@@ -20,11 +20,6 @@ jobs:
       - run: timeout 12s bun lefthook run pre-commit
       - run: bun run test
       - run: ./check-lines.sh
-      - name: Bundle size breakdown
-        run: |
-          bun run build --sourcemap true
-          bun src/ci/dependency_report.ts dist/ | column -t -s ":"
-      - run: ./check-bundle-size.sh
 
   build:
     runs-on: ubuntu-latest
@@ -35,6 +30,12 @@ jobs:
 
       - run: bun install --frozen-lockfile
       - run: bun run build
+        env:
+          VITE_SENTRY_ENVIRONMENT: ${{ github.ref == 'refs/heads/master' && 'production' || 'staging' }}
+
+      - name: Bundle size breakdown
+        run: bun src/ci/dependency_report.ts dist/ | column -t -s ":"
+      - run: ./check-bundle-size.sh
 
       - name: Upload built project
         uses: actions/upload-artifact@v4

.gitignore

@@ -45,3 +45,6 @@ Thumbs.db
 .classpath
 *.launch
 .settings/
+
+# Sentry Config File
+.env.sentry-build-plugin

check-bundle-size.sh

@@ -12,7 +12,7 @@ if [ $BUNDLE_SIZE -lt 200 ]; then
   exit 1
 fi
 
-if [ $BUNDLE_SIZE -gt 235 ]; then
+if [ $BUNDLE_SIZE -gt 245 ]; then
   echo "Exceeded bundle size limit!"
   exit 1
 fi

package.json

@@ -74,6 +74,7 @@
   },
   "//dependencies": {
     "@mapbox/polyline": "display series of map coordinates as a line",
+    "@sentry/solid": "error monitoring",
     "@solidjs/router": "changes view based on browser url",
     "clsx": "construct className strings conditionally",
     "dayjs": "work with dates (e.g., parse, validate, etc.)",
@@ -83,6 +84,8 @@
   },
   "dependencies": {
     "@mapbox/polyline": "^1.2.1",
+    "@sentry/solid": "^8.53.0",
+    "@sentry/vite-plugin": "^3.1.1",
     "@solid-primitives/state-machine": "^0.0.3",
     "@solidjs/router": "^0.15.2",
     "clsx": "^2.1.1",

src/index.tsx

@@ -1,15 +1,20 @@
 /* @refresh reload */
 import './index.css'
 
+import * as Sentry from '@sentry/solid'
 import { render } from 'solid-js/web'
 import App from './App'
 
+const environment = import.meta.env.VITE_SENTRY_ENVIRONMENT as string | undefined
+if (environment) {
+  Sentry.init({
+    dsn: 'https://[email protected]/4508738328854529',
+    environment,
+  })
+}
+
 const root = document.getElementById('root')
 
-if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
-  throw new Error(
-    'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?',
-  )
-}
+if (!root) throw new Error('No #root element found in the DOM.')
 
-render(() => <App />, root!)
+render(() => <App />, root)

vite.config.ts

@@ -1,19 +1,27 @@
 import { defineConfig } from 'vite'
 import solid from 'vite-plugin-solid'
 import devtools from 'solid-devtools/vite'
+import { sentryVitePlugin } from '@sentry/vite-plugin'
 
 export default defineConfig({
   plugins: [
     devtools(),
     solid({
       ssr: false,
     }),
+    sentryVitePlugin({
+      org: 'commaai',
+      project: 'new-connect',
+      telemetry: false,
+      disable: !process.env.CI,
+    }),
   ],
   server: {
     port: 3000,
   },
   build: {
     target: 'esnext',
+    sourcemap: true,
   },
   resolve: {
     alias: {