fix(sentry): use normalizeDepth config for nested object capture (#1143)

* 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>

* update test cases

---------

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

Author: JamesPHoughton

client/src/call/Call.jsx

@@ -14,6 +14,23 @@ import { computePixelsForLayout } from "./layouts/computePixelsForLayout";
 import { Tile } from "./Tile";
 import { useStageEventLogger } from "./hooks/eventLogger";
 
+/**
+ * Module-level ref for diagnostic access to desired subscription state.
+ *
+ * This allows FixAV error reporting to capture what subscriptions SHOULD be
+ * (based on layout) vs what they actually are (from Daily API), without
+ * adding React context complexity for a single diagnostic use case.
+ *
+ * The Map stores: dailyId → { audio: boolean, video: boolean, screenVideo: boolean }
+ *
+ * Why use a module-level ref instead of React context?
+ * - Only one piece of diagnostic state needs sharing between components
+ * - Avoids the overhead of creating a context provider/consumer
+ * - Easy to refactor to context later if we need more shared state
+ * - Simpler and more pragmatic for this specific debugging scenario
+ */
+export const latestDesiredSubscriptions = { current: new Map() };
+
 export function Call({ showSelfView = true, layout, rooms }) {
   // ------------------- measure container size ---------------------
   const containerRef = useRef(null);
@@ -312,6 +329,9 @@ export function Call({ showSelfView = true, layout, rooms }) {
       nextSubscriptions.set(dailyId, tracks);
     });
 
+    // Store desired subscriptions in module-level ref for FixAV error reporting
+    latestDesiredSubscriptions.current = nextSubscriptions;
+
     // Log desired subscription state for debugging (appears in Sentry breadcrumbs)
     // Only log when the desired state actually changes to avoid spam
     const desiredStateSignature = JSON.stringify(

client/src/call/FixAV.jsx

@@ -2,6 +2,7 @@ import React, { useCallback, useState } from "react";
 import * as Sentry from "@sentry/react";
 import { useDaily, useLocalSessionId } from "@daily-co/daily-react";
 import { Button } from "../components/Button";
+import { latestDesiredSubscriptions } from "./Call";
 
 /**
  * Hook for reporting audio/video issues to Sentry and refreshing the page.
@@ -45,9 +46,17 @@ export function useFixAV() {
       },
     }));
 
+    // Convert desired subscriptions Map to a plain object for Sentry.
+    // The Map stores what tracks SHOULD be subscribed based on layout,
+    // which helps diagnose mismatches between desired and actual state.
+    const desiredSubscriptions = Object.fromEntries(
+      latestDesiredSubscriptions.current || new Map()
+    );
+
     const reportData = {
       userReportedIssues: selectedIssues,
       participants: participantSummary,
+      desiredSubscriptions,
       meetingState: callObject?.meetingState?.(),
       localSessionId,
     };

client/src/index.jsx

@@ -23,6 +23,15 @@ Sentry.init({
   // We recommend adjusting this value in production
   tracesSampleRate: 0.1,
   enabled: process.env.NODE_ENV === "production",
+
+  // Increase depth for serializing nested objects in breadcrumbs and event extras.
+  // Default is 3 levels, which was causing objects in AV diagnostic logs to appear
+  // as [Object] instead of their actual data. Setting to 6 ensures we capture:
+  // - Desired subscription state (2-3 levels: dailyId → {a, v})
+  // - Status check arrays (4 levels: array → object → {desired/actual} → properties)
+  // - Participant data (4 levels: participants → array → object → track properties)
+  // See: https://docs.sentry.io/platforms/javascript/configuration/apis/
+  normalizeDepth: 6,
 });
 
 // Todo: can we move this button to a separate file?

cypress/fixtures/mockCDN/demo/annotated_demo/demo.treatments.yaml

@@ -69,7 +69,7 @@ templates:
               displayTime: 5
 
         - name: Discussion
-          duration: 900
+          duration: 1200
           discussion: # this section describes the video chat that takes place during the discussion stage
             chatType: video # you can also have just a text chat
             showNickname: true # you can choose to show or hide the names participants gave themselves

cypress/fixtures/mockCDN/test/subscriptionHell/test.config.json

@@ -5,8 +5,8 @@
   "customIdInstructions": "none",
   "platformConsent": "US",
   "consentAddendum": "none",
-  "checkAudio": false,
-  "checkVideo": false,
+  "checkAudio": true,
+  "checkVideo": true,
   "introSequence": "subscription_hell_intro",
   "treatments": ["subscription_hell_test"],
   "payoffs": "equal",