fix(call): prevent stale-data VideoCall mount and guard startRecording (#1230)

* fix(call): prevent stale-data VideoCall mount and guard startRecording (#1226)

Key Stage by stage.id to eliminate the one-render window where
player.stage updates before useStage(), causing VideoCall to mount
with stale discussion config during stage transitions. Also guard
startRecording() return value to prevent TypeError crash if the
Daily SDK returns undefined in a transitional state.

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

* fix(call): add deferred Sentry alert for non-Promise startRecording and test

Address Copilot review: add deferred Sentry capture in the non-Promise
fallback path so silently-missed recordings are surfaced. Add REC-005b
test verifying the component doesn't crash when startRecording returns
undefined and that Sentry fires the deferred alert.

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

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: JamesPHoughton

client/src/Game.jsx

@@ -136,7 +136,7 @@ export function Game() {
         <Profile />
       </div>
       <div className="absolute top-12 left-0 right-0 bottom-0 m-2">
-        <Stage />
+        <Stage key={stage.id} />
       </div>
     </>
   );

client/src/call/hooks/useCallStartSignaling.js

@@ -34,28 +34,46 @@ export function useCallStartSignaling(callObject, recordingEnabled, stageId) {
     const startRecordingIfNeeded = () => {
       if (recordingEnabled && !recordingStartedRef.current) {
         recordingStartedRef.current = true;
-        callObject.startRecording({ type: "raw-tracks" }).then(
-          () => console.log("[Recording] Started raw-tracks recording from client"),
-          (err) => {
-            console.warn("[Recording] Failed to start recording:", err.message);
-            recordingStartedRef.current = false;
+        const result = callObject.startRecording({ type: "raw-tracks" });
+        if (result && typeof result.then === "function") {
+          result.then(
+            () => console.log("[Recording] Started raw-tracks recording from client"),
+            (err) => {
+              console.warn("[Recording] Failed to start recording:", err.message);
+              recordingStartedRef.current = false;
 
-            // Defer Sentry alert: wait 5s and check if another participant
-            // successfully started recording (indicated by recording-started
-            // event setting recordingConfirmedRef). This avoids false alarms
-            // when one client fails but another succeeds — Daily broadcasts
-            // recording-started to all participants regardless of who initiated.
-            const timer = setTimeout(() => {
-              if (!recordingConfirmedRef.current) {
-                Sentry.captureMessage("Recording not started for stage", {
-                  level: "error",
-                  extra: { triggeringError: err.message, stageId },
-                });
-              }
-            }, 5000);
-            pendingTimers.push(timer);
-          }
-        );
+              // Defer Sentry alert: wait 5s and check if another participant
+              // successfully started recording (indicated by recording-started
+              // event setting recordingConfirmedRef). This avoids false alarms
+              // when one client fails but another succeeds — Daily broadcasts
+              // recording-started to all participants regardless of who initiated.
+              const timer = setTimeout(() => {
+                if (!recordingConfirmedRef.current) {
+                  Sentry.captureMessage("Recording not started for stage", {
+                    level: "error",
+                    extra: { triggeringError: err.message, stageId },
+                  });
+                }
+              }, 5000);
+              pendingTimers.push(timer);
+            }
+          );
+        } else {
+          console.warn("[Recording] startRecording() returned non-Promise; call may be in transitional state");
+          recordingStartedRef.current = false;
+
+          // Defer Sentry alert: if no participant confirms recording within 5s,
+          // surface the issue so we don't silently miss a whole stage of recording.
+          const timer = setTimeout(() => {
+            if (!recordingConfirmedRef.current) {
+              Sentry.captureMessage("Recording not started for stage", {
+                level: "error",
+                extra: { triggeringError: "non-promise return", stageId },
+              });
+            }
+          }, 5000);
+          pendingTimers.push(timer);
+        }
       }
     };
 

playwright/component-tests/video-call/mocked/Recording.ct.jsx

@@ -207,6 +207,51 @@ test.describe('Client-Side Recording (useCallStartSignaling)', () => {
     expect(recordingErrors[0].hint.extra.triggeringError).toBeTruthy();
   });
 
+  /**
+   * REC-005b: No crash when startRecording returns undefined (non-Promise)
+   *
+   * Validates:
+   * - callObject.startRecording() returns undefined (transitional state)
+   * - Component does NOT crash (no TypeError on .then())
+   * - Sentry fires deferred alert when no recording confirmed
+   *
+   * Regression test for #1226
+   */
+  test('REC-005b: no crash when startRecording returns undefined', async ({ mount, page }) => {
+    test.slow();
+
+    // Configure startRecording to return undefined BEFORE mount
+    await page.evaluate(() => {
+      window.__mockStartRecordingBehavior = 'return-undefined';
+    });
+
+    const component = await mount(<VideoCall showSelfView />, {
+      hooksConfig: recordingEnabledConfig,
+    });
+    await expect(component).toBeVisible({ timeout: 15000 });
+
+    // Verify startRecording was called (but returned undefined)
+    await expect(async () => {
+      const calls = await page.evaluate(() => window.mockCallObject._startRecordingCalls);
+      expect(calls.length).toBeGreaterThanOrEqual(1);
+    }).toPass({ timeout: 5000 });
+
+    // Reset Sentry after mount so we start clean
+    await page.evaluate(() => window.mockSentryCaptures.reset());
+
+    // Wait past the 5s deferred Sentry timer (no recording-started event)
+    await page.waitForTimeout(6000);
+
+    // Sentry should fire with "non-promise return" as the triggering error
+    const captures = await page.evaluate(() => window.mockSentryCaptures);
+    const recordingErrors = captures.messages.filter(
+      m => m.message === 'Recording not started for stage'
+    );
+    expect(recordingErrors.length).toBeGreaterThanOrEqual(1);
+    expect(recordingErrors[0].hint.level).toBe('error');
+    expect(recordingErrors[0].hint.extra.triggeringError).toBe('non-promise return');
+  });
+
   /**
    * REC-006: Sentry fires on recording-error when no recording confirmed
    *

playwright/mocks/daily/MockDailyProvider.jsx

@@ -105,6 +105,9 @@ class MockCallObject extends MockEventEmitter {
     if (this._startRecordingBehavior === 'reject') {
       return Promise.reject(new Error('Recording failed (mock)'));
     }
+    if (this._startRecordingBehavior === 'return-undefined') {
+      return undefined;
+    }
     return Promise.resolve();
   }