feat(web): add client-side telemetry for API calls, errors, and scan operations

apps/web/src/app.tsx

@@ -16,7 +16,7 @@ import { ExpertReviewsPage } from "@/pages/expert-reviews-page";
 import { DiagnosesPage } from "@/pages/diagnoses-page";
 import { TelemetryPage } from "@/pages/telemetry-page";
 import { MainLayout } from "@/components/layout/main-layout";
-import { trackPageView } from "./lib/telemetry";
+import { trackPageView, trackError } from "./lib/telemetry";
 
 const queryClient = new QueryClient();
 
@@ -104,11 +104,23 @@ function PageViewTracker() {
   return null;
 }
 
+function GlobalErrorTracker() {
+  useEffect(() => {
+    const handler = (event: ErrorEvent) => {
+      trackError(event.filename || "global");
+    };
+    window.addEventListener("error", handler);
+    return () => window.removeEventListener("error", handler);
+  }, []);
+  return null;
+}
+
 export function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <AuthInitializer />
       <PageViewTracker />
+      <GlobalErrorTracker />
       <RouterProvider router={router} />
     </QueryClientProvider>
   );

apps/web/src/lib/api-client.ts

@@ -12,6 +12,7 @@ import type {
   ReviewDiagnosisRequest,
   DashboardSummary,
 } from '@zeavis/shared';
+import { recordApiCall } from './telemetry';
 
 const apiBaseUrl = import.meta.env.VITE_API_BASE_URL ?? '';
 
@@ -21,6 +22,7 @@ export interface ApiError extends Error {
 }
 
 async function fetchApi<T>(endpoint: string, options?: RequestInit): Promise<T> {
+  const start = performance.now();
   const url = `${apiBaseUrl}${endpoint}`;
   const response = await fetch(url, {
     credentials: 'include',
@@ -28,6 +30,10 @@ async function fetchApi<T>(endpoint: string, options?: RequestInit): Promise<T>
     headers: options?.headers,
   });
 
+  const duration = performance.now() - start;
+  const method = options?.method ?? 'GET';
+  recordApiCall(method, endpoint, duration, response.status);
+
   if (!response.ok) {
     let errorMessage = `HTTP ${response.status}`;
     let source: 'uploader' | 'model-service' | 'unknown' | undefined;

apps/web/src/pages/scan-page.tsx

@@ -18,6 +18,7 @@ import { Modal } from "@/components/ui/modal";
 import { DiagnosisStatusBadge } from "@/components/diagnosis-status-badge";
 import type { DiagnosisRecord } from "@zeavis/shared";
 import { apiClient } from "@/lib/api-client";
+import { trackScan, trackDiagnosisResult } from "@/lib/telemetry";
 
 export function ScanPage() {
   const [fileName, setFileName] = useState<string | null>(null);
@@ -31,6 +32,7 @@ export function ScanPage() {
   const mutation = useMutation({
     mutationFn: (file: File) => apiClient.createDiagnosis(file),
     onSuccess: (diagnosis) => {
+      trackDiagnosisResult(diagnosis.status !== "failed");
       queryClient.invalidateQueries({ queryKey: ["diagnoses"] });
       setDiagnosisPreview(diagnosis);
       setPreviewOpen(true);
@@ -38,6 +40,9 @@ export function ScanPage() {
       setPreviewUrl(null);
       if (inputRef.current) inputRef.current.value = "";
     },
+    onError: () => {
+      trackDiagnosisResult(false);
+    },
   });
 
   const handleFile = (f?: File) => {
@@ -61,6 +66,7 @@ export function ScanPage() {
   const handleUpload = () => {
     const file = inputRef.current?.files?.[0];
     if (!file) return;
+    trackScan();
     mutation.mutate(file);
   };