revert to sentry, log all sessions with serial

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: adeebshihadeh

.env

@@ -0,0 +1 @@
+VITE_SENTRY_DSN=https://acb8cfad1992fafc3dc90ab1bfa3d07f@o33823.ingest.us.sentry.io/4510604761825280

package-lock.json

@@ -16,7 +16,6 @@
     "@commaai/qdl": "git+https://github.com/commaai/qdl.js.git#21d7be79fa5178f253d32a0879bd8bdd4fa37e30",
     "@fontsource-variable/inter": "^5.2.5",
     "@fontsource-variable/jetbrains-mono": "^5.2.5",
-    "@openreplay/tracker": "^17.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "xz-decompress": "^0.2.2"

package.json

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { tracker } from '../main'
+import { addBreadcrumb, setTags, setTag, setContext, captureSessionSummary } from '../utils/telemetry'
 
 import { FlashManager, StepCode, ErrorCode, DeviceType } from '../utils/manager'
 import { useImageManager } from '../utils/image'
@@ -51,6 +51,41 @@ const originalConsole = { log: console.log, warn: console.warn, error: console.e
   }
 })
 
+// Unique per-page session id for correlating events
+const SESSION_ID = (crypto && 'randomUUID' in crypto) ? crypto.randomUUID() : String(Math.random()).slice(2)
+
+// Helper for building environment metadata
+function buildEnvMeta() {
+  const ua = navigator.userAgent
+  let os = 'Unknown'
+  if (ua.includes('Windows NT 10.0')) os = 'Windows 10/11'
+  else if (ua.includes('Windows NT 6.3')) os = 'Windows 8.1'
+  else if (ua.includes('Windows NT 6.2')) os = 'Windows 8'
+  else if (ua.includes('Windows NT 6.1')) os = 'Windows 7'
+  else if (ua.includes('Mac OS X')) {
+    const match = ua.match(/Mac OS X (\d+[._]\d+[._]?\d*)/)
+    os = match ? `macOS ${match[1].replace(/_/g, '.')}` : 'macOS'
+  } else if (ua.includes('Linux')) {
+    os = 'Linux'
+    if (ua.includes('Ubuntu')) os += ' (Ubuntu)'
+    else if (ua.includes('Fedora')) os += ' (Fedora)'
+    else if (ua.includes('Debian')) os += ' (Debian)'
+  } else if (ua.includes('CrOS')) os = 'ChromeOS'
+
+  const sandboxHints = []
+  if (ua.includes('snap')) sandboxHints.push('Snap')
+  if (ua.includes('Flatpak')) sandboxHints.push('Flatpak')
+  if (navigator.userAgentData?.brands?.some(b => b.brand.includes('snap'))) sandboxHints.push('Snap')
+
+  return {
+    os,
+    sandbox: sandboxHints.length ? sandboxHints.join(', ') : 'None detected',
+    browser: navigator.userAgent,
+    url: window.location.href,
+    version: import.meta.env.VITE_PUBLIC_GIT_SHA || 'dev',
+  }
+}
+
 // Debug info component for error reporting
 function DebugInfo({ error, step, selectedDevice, serial, message, onClose }) {
   const [copied, setCopied] = useState(false)
@@ -640,12 +675,33 @@ export default function Flash() {
       .then((programmer) => {
         // Create QDL manager with callbacks that update React state
         qdlManager.current = new FlashManager(programmer, {
-          onStepChange: setStep,
-          onMessageChange: setMessage,
-          onProgressChange: setProgress,
-          onErrorChange: setError,
-          onConnectionChange: setConnected,
-          onSerialChange: setSerial,
+          onStepChange: (s) => {
+            setStep(s)
+            addBreadcrumb({ category: 'flash', message: `step:${s}`, level: 'info', data: { step: s } })
+            setTag('last_step', String(s))
+          },
+          onMessageChange: (m) => {
+            setMessage(m)
+            if (m) addBreadcrumb({ category: 'flash', message: m, level: 'info' })
+          },
+          onProgressChange: (p) => {
+            setProgress(p)
+          },
+          onErrorChange: (e) => {
+            setError(e)
+            if (e !== ErrorCode.NONE) {
+              addBreadcrumb({ category: 'flash', message: 'error', level: 'error', data: { errorCode: e } })
+              setTag('error_code', String(e))
+            }
+          },
+          onConnectionChange: (c) => {
+            setConnected(c)
+            addBreadcrumb({ category: 'flash', message: c ? 'connected' : 'disconnected', level: c ? 'info' : 'warning' })
+          },
+          onSerialChange: (sn) => {
+            setSerial(sn)
+            setTag('serial', sn)
+          }
         })
 
         // Initialize the manager
@@ -657,34 +713,59 @@ export default function Flash() {
       })
   }, [config, imageManager.current])
 
-  // OpenReplay: set metadata when device is selected
+  // Telemetry: set static tags/context once
+  useEffect(() => {
+    setTags({ session_id: SESSION_ID })
+    setContext('env', buildEnvMeta())
+  }, [])
+
+  // Telemetry: tag device selection
   useEffect(() => {
     if (selectedDevice) {
-      tracker.setMetadata('deviceType', selectedDevice)
+      setTag('device_type', selectedDevice)
+      addBreadcrumb({ category: 'flash', message: `device:${selectedDevice}`, level: 'info' })
     }
   }, [selectedDevice])
 
-  // OpenReplay: set serial as user ID and metadata
+  // Telemetry: wizard screen transitions
   useEffect(() => {
-    if (serial) {
-      tracker.setUserID(serial)
-      tracker.setMetadata('serial', serial)
+    if (wizardScreen) addBreadcrumb({ category: 'wizard', message: wizardScreen, level: 'info' })
+  }, [wizardScreen])
+
+  // Helper to send a single pass/fail summary
+  function sendSessionSummary(result) {
+    if (reportSentRef.current) return
+    reportSentRef.current = true
+    const meta = {
+      ...buildEnvMeta(),
+      selectedDevice,
+      connected,
+      serial,
+      step,
+      message,
     }
-  }, [serial])
+    const tail = consoleLogs.slice(-200)
+    captureSessionSummary({
+      sessionId: SESSION_ID,
+      result,
+      errorCode: error,
+      step,
+      meta,
+      consoleTail: tail,
+    })
+  }
 
-  // OpenReplay: track session result
+  // Send report on failure
   useEffect(() => {
     if (error !== ErrorCode.NONE && !reportSentRef.current) {
-      reportSentRef.current = true
-      const errorName = Object.keys(ErrorCode).find(k => ErrorCode[k] === error) || 'UNKNOWN'
-      tracker.event('flash_result', { result: 'fail', errorCode: error, errorName, step, serial })
+      sendSessionSummary('fail')
     }
   }, [error])
 
+  // Send report on success
   useEffect(() => {
     if (step === StepCode.DONE && error === ErrorCode.NONE && !reportSentRef.current) {
-      reportSentRef.current = true
-      tracker.event('flash_result', { result: 'pass', serial })
+      sendSessionSummary('pass')
     }
   }, [step, error])
 

src/app/Flash.jsx

@@ -1,23 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import Tracker from '@openreplay/tracker'
+import { initSentry } from './utils/telemetry'
 
 import '@fontsource-variable/inter'
 import '@fontsource-variable/jetbrains-mono'
 
 import './index.css'
 import App from './app'
 
-// Initialize OpenReplay session tracking
-const tracker = new Tracker({
-  projectKey: 'rN9Ir1HEKHJDs8P5rymv',
-  __DISABLE_SECURE_MODE: location.hostname === 'localhost',
-})
-tracker.start()
-
-// Export for use in other components
-export { tracker }
-
 // Explicitly load fonts before rendering to prevent FOUT
 async function loadFonts() {
   await Promise.all([
@@ -26,6 +16,9 @@ async function loadFonts() {
   ])
 }
 
+// Initialize telemetry (no-op if DSN unset)
+initSentry()
+
 loadFonts().then(() => {
   ReactDOM.createRoot(document.getElementById('root')).render(
     <React.StrictMode>