fix(sentry): improve AV error diagnostics and logging (#1146)

* fix(call): stringify console logs for Sentry breadcrumb capture

Sentry's breadcrumb capture doesn't serialize nested objects from
console.log - it just shows [Object] or [Array]. This makes the
diagnostic logging useless for debugging AV issues.

Changed all AV diagnostic console.log calls to use JSON.stringify:
- Desired subscription state logging in Call.jsx
- Status check logging in Call.jsx
- Participant updated logging in eventLogger.js
- AV issue reporting in FixAV.jsx

The pretty-printed JSON (null, 2) ensures:
1. Sentry breadcrumbs capture full data as readable strings
2. Local console output remains human-readable for debugging

Fixes #1142

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

* fix(sentry): use normalizeDepth config instead of JSON.stringify

Replace JSON.stringify logging with Sentry normalizeDepth configuration
to properly capture nested objects in breadcrumbs and error reports.

Changes:
- Add normalizeDepth: 6 to Sentry.init() to handle 4-6 level objects
- Revert JSON.stringify calls in Call.jsx, eventLogger.js, and FixAV.jsx
- Add module-level ref for desired subscription state tracking
- Include desiredSubscriptions in FixAV error reports for diagnosing
  mismatches between layout-computed and actual subscription states

This approach is cleaner and preserves object structure in Sentry UI,
making it easier to diagnose AV issues.

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

* fix(sentry): improve media error diagnostics with Daily event and permissions

Capture additional context when camera/mic errors occur to aid diagnosis:
- Extract and log Daily's error type (not-found, permissions, in-use, etc.)
- Preserve the full Daily event payload in Sentry reports
- Query browser Permissions API to capture camera/mic permission state

This helps distinguish between permission denials, hardware issues,
and in-use conflicts when debugging user media errors.

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

* feat(sentry): enhance AV error reports with device, network, and summary info

Add comprehensive diagnostic data to help debug audio/video issues:

FixAV.jsx:
- Add track off/blocked reasons to identify why audio/video isn't working
- Add audioDevices info (current mic/camera, available audio outputs)
- Add networkStats from Daily for quality diagnosis
- Add audioContextState to detect browser autoplay blocking
- Add summary field for easy log scanning

UserMediaError.jsx:
- Add summary field with error type, permissions, and device counts

Example summaries:
- "[AV Issue] User reported "cant-hear" with 1 remote participant(s), audioContext=suspended"
- "[Media Error] camera-error (in-use): cam=granted, mic=granted, 1 cam, 2 mic"

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

---------

Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: JamesPHoughton

client/src/call/FixAV.jsx

@@ -28,7 +28,7 @@ export function useFixAV() {
     );
   }, []);
 
-  const handleSubmitFix = useCallback(() => {
+  const handleSubmitFix = useCallback(async () => {
     if (selectedIssues.length === 0) return;
 
     // Capture current state for debugging
@@ -39,10 +39,14 @@ export function useFixAV() {
       audio: {
         subscribed: p.tracks?.audio?.subscribed,
         state: p.tracks?.audio?.state,
+        off: p.tracks?.audio?.off, // reason track is off (e.g., "user", "bandwidth")
+        blocked: p.tracks?.audio?.blocked, // browser blocked playback
       },
       video: {
         subscribed: p.tracks?.video?.subscribed,
         state: p.tracks?.video?.state,
+        off: p.tracks?.video?.off,
+        blocked: p.tracks?.video?.blocked,
       },
     }));
 
@@ -53,16 +57,68 @@ export function useFixAV() {
       latestDesiredSubscriptions.current || new Map()
     );
 
+    // Get audio device info (input from Daily, output from browser)
+    let audioDevices = null;
+    try {
+      const inputDevices = callObject?.getInputDevices?.();
+      const browserDevices = await navigator.mediaDevices?.enumerateDevices();
+      const audioOutputs = browserDevices?.filter(
+        (d) => d.kind === "audiooutput"
+      );
+      audioDevices = {
+        currentMic: inputDevices?.mic || null,
+        currentCamera: inputDevices?.camera || null,
+        audioOutputCount: audioOutputs?.length || 0,
+        audioOutputs: audioOutputs?.map((d) => ({
+          label: d.label || "Unknown",
+          idSuffix: d.deviceId?.slice(-6) || "unknown",
+        })),
+      };
+    } catch (err) {
+      audioDevices = { error: err?.message || String(err) };
+    }
+
+    // Get network stats for quality diagnosis
+    let networkStats = null;
+    try {
+      networkStats = await callObject?.getNetworkStats?.();
+    } catch (err) {
+      networkStats = { error: err?.message || String(err) };
+    }
+
+    // Check AudioContext state (suspended = autoplay blocked)
+    let audioContextState = "unknown";
+    try {
+      const AudioContextClass =
+        window.AudioContext || window.webkitAudioContext;
+      if (AudioContextClass) {
+        const ctx = new AudioContextClass();
+        audioContextState = ctx.state;
+        ctx.close().catch(() => {});
+      }
+    } catch (err) {
+      audioContextState = `error: ${err?.message || String(err)}`;
+    }
+
+    // Build summary for easy scanning
+    const remoteCount = participantSummary.filter((p) => !p.local).length;
+    const issueList = selectedIssues.join(", ");
+    const summary = `User reported "${issueList}" with ${remoteCount} remote participant(s), audioContext=${audioContextState}`;
+
     const reportData = {
+      summary,
       userReportedIssues: selectedIssues,
       participants: participantSummary,
       desiredSubscriptions,
       meetingState: callObject?.meetingState?.(),
       localSessionId,
+      audioDevices,
+      networkStats,
+      audioContextState,
     };
 
     // Log to console (appears in Sentry breadcrumbs)
-    console.log("[AV Issue] User reported problem:", reportData);
+    console.log("[AV Issue]", summary, reportData);
 
     // Send to Sentry
     if (Sentry?.captureMessage) {

client/src/call/UserMediaError.jsx

@@ -64,11 +64,28 @@ export function UserMediaError({ error }) {
       const details = {
         type: error?.type,
         message: error?.message,
+        dailyErrorType: error?.dailyErrorType, // e.g., "not-found", "permissions", "in-use"
         audioOk,
         videoOk,
-        raw: error,
+        dailyEvent: error?.dailyEvent, // Full Daily event for diagnosis
       };
 
+      // Check browser permissions state for additional context
+      try {
+        if (navigator.permissions) {
+          const [camPerm, micPerm] = await Promise.all([
+            navigator.permissions.query({ name: "camera" }).catch(() => null),
+            navigator.permissions.query({ name: "microphone" }).catch(() => null),
+          ]);
+          details.permissions = {
+            camera: camPerm?.state || "unknown", // "granted", "denied", "prompt"
+            microphone: micPerm?.state || "unknown",
+          };
+        }
+      } catch (permErr) {
+        details.permissionsError = permErr?.message || String(permErr);
+      }
+
       try {
         if (navigator?.mediaDevices?.enumerateDevices) {
           const devices = await navigator.mediaDevices.enumerateDevices();
@@ -99,7 +116,17 @@ export function UserMediaError({ error }) {
         console.warn("Failed to enumerate media devices", err);
       }
 
-      console.error("User media error", details);
+      // Build summary for easy scanning
+      const permStatus = details.permissions
+        ? `cam=${details.permissions.camera}, mic=${details.permissions.microphone}`
+        : "permissions unknown";
+      const deviceCount = details.deviceSurvey
+        ? `${details.deviceSurvey.cameraCount} cam, ${details.deviceSurvey.micCount} mic`
+        : "devices unknown";
+      const summary = `${error?.type || "unknown"} error (${error?.dailyErrorType || "no daily type"}): ${permStatus}, ${deviceCount}`;
+      details.summary = summary;
+
+      console.error("[Media Error]", summary, details);
       if (Sentry?.captureMessage) {
         Sentry.captureMessage("User media error", {
           level: "error",

client/src/call/VideoCall.jsx

@@ -249,9 +249,15 @@ export function VideoCall({
             ? ev.errorMsg
             : ev?.errorMsg?.message || ev?.error?.message;
 
+        // Extract Daily's error type (e.g., "not-found", "permissions", "in-use", "constraints")
+        const dailyErrorType =
+          ev?.error?.type || ev?.errorMsg?.type || ev?.type;
+
         setDeviceError({
           type,
           message: rawMessage || null,
+          dailyErrorType: dailyErrorType || null,
+          dailyEvent: ev, // Preserve the full Daily event for diagnosis
         });
       };