add sentry logging (#186)

Author: adeebshihadeh

bun.lock

@@ -16,6 +16,8 @@
     "@commaai/qdl": "git+https://github.com/commaai/qdl.js.git#21d7be79fa5178f253d32a0879bd8bdd4fa37e30",
     "@fontsource-variable/inter": "^5.2.5",
     "@fontsource-variable/jetbrains-mono": "^5.2.5",
+    "@sentry/react": "^10.32.1",
+    "posthog-js": "^1.310.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "xz-decompress": "^0.2.2"

package.json

@@ -1,4 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
+import posthog from 'posthog-js'
+import * as Sentry from '@sentry/react'
 
 import { FlashManager, StepCode, ErrorCode, DeviceType } from '../utils/manager'
 import { useImageManager } from '../utils/image'
@@ -38,9 +40,9 @@ function ImagePreloader() {
   )
 }
 
-// Capture console logs for debug reports
+// Capture console logs for debug reports and telemetry
 const consoleLogs = []
-const MAX_LOGS = 100
+const MAX_LOGS = 500
 const originalConsole = { log: console.log, warn: console.warn, error: console.error, info: console.info, debug: console.debug }
 ;['log', 'warn', 'error', 'info', 'debug'].forEach(level => {
   console[level] = (...args) => {
@@ -622,6 +624,7 @@ export default function Flash() {
   const [serial, setSerial] = useState(null)
   const [selectedDevice, setSelectedDevice] = useState(null)
   const [wizardScreen, setWizardScreen] = useState('landing') // 'landing', 'device', 'zadig', 'connect', 'unbind', 'webusb', 'flash'
+  const reportSentRef = useRef(false)
 
   const qdlManager = useRef(null)
   const imageManager = useImageManager()
@@ -643,7 +646,7 @@ export default function Flash() {
           onProgressChange: setProgress,
           onErrorChange: setError,
           onConnectionChange: setConnected,
-          onSerialChange: setSerial
+          onSerialChange: setSerial,
         })
 
         // Initialize the manager
@@ -655,6 +658,45 @@ export default function Flash() {
       })
   }, [config, imageManager.current])
 
+  // Helper to send a single pass/fail summary
+  function sendSessionSummary(result) {
+    if (reportSentRef.current) return
+    reportSentRef.current = true
+
+    const errorName = Object.keys(ErrorCode).find(k => ErrorCode[k] === error) || 'NONE'
+    const stepName = Object.keys(StepCode).find(k => StepCode[k] === step) || 'UNKNOWN'
+
+    // PostHog
+    posthog.capture('flash_session', {
+      result,
+      serial,
+      device_type: selectedDevice,
+      error_code: errorName,
+      step: stepName,
+    })
+
+    // Sentry
+    Sentry.captureMessage('flash_session', {
+      level: result === 'pass' ? 'info' : 'error',
+      tags: { result, serial, device_type: selectedDevice, error_code: errorName, step: stepName },
+      extra: { console_tail: consoleLogs.slice(-200) },
+    })
+  }
+
+  // Send report on failure
+  useEffect(() => {
+    if (error !== ErrorCode.NONE && !reportSentRef.current) {
+      sendSessionSummary('fail')
+    }
+  }, [error])
+
+  // Send report on success
+  useEffect(() => {
+    if (step === StepCode.DONE && error === ErrorCode.NONE && !reportSentRef.current) {
+      sendSessionSummary('pass')
+    }
+  }, [step, error])
+
   // Transition to flash screen when connected
   useEffect(() => {
     if (connected && wizardScreen === 'webusb') {

src/app/Flash.jsx

@@ -1,12 +1,25 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import posthog from 'posthog-js'
+import * as Sentry from '@sentry/react'
 
 import '@fontsource-variable/inter'
 import '@fontsource-variable/jetbrains-mono'
 
 import './index.css'
 import App from './app'
 
+posthog.init('phc_O4kXIsdyB2cm9Wne1pwJkj5jk9Ua51ABVPAhtSuYQ4V', {
+  api_host: 'https://us.i.posthog.com',
+  capture_pageview: false,
+  persistence: 'memory',
+})
+
+Sentry.init({
+  dsn: 'https://acb8cfad1992fafc3dc90ab1bfa3d07f@o33823.ingest.us.sentry.io/4510604761825280',
+  sendDefaultPii: true,
+})
+
 // Explicitly load fonts before rendering to prevent FOUT
 async function loadFonts() {
   await Promise.all([