fix(tracing): Fix inflated http.client span durations on iOS background cancellation (#5944)

* fix(tracing): Use foreground-exit timestamp for http.client spans on iOS background cancellation

On iOS, when the app goes inactive, `cancelInBackground` schedules a
5-second deferred cancellation timer. If the JS thread is suspended
between the `inactive` and `background` transitions, the timer fires
only after JS resumes — potentially seconds or minutes later. The idle
span's `onIdleSpanEnded` then force-ends all still-recording child
spans with this late timestamp, producing http.client spans with
inflated durations that don't match the corresponding breadcrumbs.

This was reported by a customer whose traces showed http.client spans
with long durations and `cancelled` status, while the app was marked
as "In Foreground" with no backgrounding breadcrumb — the hallmark of
the iOS inactive timer race.

The fix records `timestampInSeconds()` when the app first leaves the
foreground (`inactive` or `background` event) and uses that timestamp
to end http.client child spans in `cancelSpan()`, before the parent
idle span ends. This prevents `onIdleSpanEnded` from overwriting them
with the later timer-fire timestamp.

Fixes #5942

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* docs: Add changelog entry for http.client span duration fix

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix(tracing): Remove unused variable in test

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix(tracing): Make timestamp reset test independent of fake timer clock

The test was asserting on duration ranges (>2s, <5s) which relied on
jest.advanceTimersByTime advancing the value returned by
timestampInSeconds(). Since performance is not faked, this only works
when the cached time function falls back to Date.now() — a fragile
implementation detail.

Instead, capture timestampInSeconds() at each state transition and
compare the span's end time directly against the background timestamp.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Lint fix

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: antonis

CHANGELOG.md

@@ -17,6 +17,7 @@
 
 ### Fixes
 
+- Fix inflated `http.client` span durations on iOS when the app backgrounds during a request ([#5944](https://github.com/getsentry/sentry-react-native/pull/5944))
 - Fix crash caused by nullish response in supabase PostgREST handler ([#5938](https://github.com/getsentry/sentry-react-native/pull/5938))
 - Fix iOS crash (EXC_BAD_ACCESS) in time-to-initial-display when navigating between screens ([#5887](https://github.com/getsentry/sentry-react-native/pull/5887))
 

packages/core/src/js/tracing/onSpanEndUtils.ts

@@ -1,7 +1,7 @@
 import type { Client, Span } from '@sentry/core';
 import type { AppStateStatus } from 'react-native';
 
-import { debug, getSpanDescendants, SPAN_STATUS_ERROR, spanToJSON } from '@sentry/core';
+import { debug, getSpanDescendants, SPAN_STATUS_ERROR, spanToJSON, timestampInSeconds } from '@sentry/core';
 import { AppState, Platform } from 'react-native';
 
 import { isRootSpan, isSentrySpan } from '../utils/span';
@@ -198,20 +198,44 @@ export const onlySampleIfChildSpans = (client: Client, span: Span): void => {
 export const cancelInBackground = (client: Client, span: Span): void => {
   let inactiveTimeout: ReturnType<typeof setTimeout> | undefined;
 
+  // The timestamp when the app actually left the foreground. Used to end
+  // http.client child spans at the right time instead of whenever the
+  // deferred cancellation timer fires (which can be much later if the JS
+  // thread was suspended on iOS).
+  let leftForegroundTimestamp: number | undefined;
+
   const cancelSpan = (): void => {
     if (inactiveTimeout !== undefined) {
       clearTimeout(inactiveTimeout);
       inactiveTimeout = undefined;
     }
     debug.log(`Setting ${spanToJSON(span).op} transaction to cancelled because the app is in the background.`);
+
+    // End still-recording http.client children at the time the app left
+    // the foreground, not when the deferred timer fires. On iOS, the JS
+    // thread can be suspended after the `inactive` event, so the 5-second
+    // timer may fire long after the app backgrounded. Using the original
+    // timestamp prevents inflated span durations.
+    const childEndTimestamp = leftForegroundTimestamp ?? timestampInSeconds();
+    const children = getSpanDescendants(span);
+    for (const child of children) {
+      if (child !== span && child.isRecording() && spanToJSON(child).op === 'http.client') {
+        child.setStatus({ code: SPAN_STATUS_ERROR, message: 'cancelled' });
+        child.end(childEndTimestamp);
+      }
+    }
+
     span.setStatus({ code: SPAN_STATUS_ERROR, message: 'cancelled' });
     span.end();
   };
 
   const subscription = AppState.addEventListener('change', (newState: AppStateStatus) => {
     if (newState === 'background') {
+      leftForegroundTimestamp = leftForegroundTimestamp ?? timestampInSeconds();
       cancelSpan();
     } else if (Platform.OS === 'ios' && newState === 'inactive') {
+      // Record when the app actually left the foreground.
+      leftForegroundTimestamp = timestampInSeconds();
       // Schedule a deferred cancellation — if the JS thread is suspended
       // before the 'background' event fires, this timer will execute when
       // the app is eventually resumed and end the span.
@@ -220,6 +244,7 @@ export const cancelInBackground = (client: Client, span: Span): void => {
       }
     } else if (newState === 'active') {
       // App returned to foreground — clear any pending inactive cancellation.
+      leftForegroundTimestamp = undefined;
       if (inactiveTimeout !== undefined) {
         clearTimeout(inactiveTimeout);
         inactiveTimeout = undefined;

packages/core/test/tracing/idleNavigationSpan.test.ts

@@ -1,7 +1,14 @@
 import type { Span } from '@sentry/core';
 import type { AppStateStatus } from 'react-native';
 
-import { getActiveSpan, getCurrentScope, spanToJSON, startInactiveSpan, startSpanManual } from '@sentry/core';
+import {
+  getActiveSpan,
+  getCurrentScope,
+  spanToJSON,
+  startInactiveSpan,
+  startSpanManual,
+  timestampInSeconds,
+} from '@sentry/core';
 import { AppState } from 'react-native';
 
 import type { ScopeWithMaybeSpan } from '../../src/js/tracing/span';
@@ -40,7 +47,7 @@ const mockedAppState = AppState as jest.Mocked<typeof AppState & MockAppState>;
 
 describe('startIdleNavigationSpan', () => {
   beforeEach(() => {
-    jest.useFakeTimers();
+    jest.useFakeTimers({ doNotFake: ['performance'] });
     NATIVE.enableNative = true;
     mockedAppState.isAvailable = true;
     mockedAppState.currentState = 'active';
@@ -217,6 +224,110 @@ describe('startIdleNavigationSpan', () => {
     });
   });
 
+  describe('http.client child spans during background cancellation', () => {
+    it('ends http.client child at the time the app went inactive, not when the deferred timer fires', () => {
+      const navSpan = startIdleNavigationSpan({ name: 'test' });
+      const httpSpan = startInactiveSpan({ name: 'GET /api/data', op: 'http.client' });
+      const httpStartTime = spanToJSON(httpSpan).start_timestamp;
+
+      // App goes inactive at a known time (e.g. user presses home on iOS)
+      mockedAppState.setState('inactive');
+
+      // Simulate JS thread suspension + resume: advance well past the 5s timer.
+      // In production this delay is caused by the JS thread being suspended
+      // while the app is in the background, then resumed much later.
+      jest.advanceTimersByTime(30_000);
+
+      expect(spanToJSON(navSpan!).status).toBe('cancelled');
+
+      // The http.client span should be ended at approximately when the app
+      // went inactive, NOT 30 seconds later when the timer fired.
+      const httpEndTime = spanToJSON(httpSpan).timestamp!;
+      const httpDuration = httpEndTime - httpStartTime;
+      expect(httpDuration).toBeLessThan(1);
+      expect(spanToJSON(httpSpan).status).toBe('cancelled');
+    });
+
+    it('uses fresh timestamp after inactive → active → background cycle', () => {
+      startIdleNavigationSpan({ name: 'test' });
+      const httpSpan = startInactiveSpan({ name: 'GET /api/data', op: 'http.client' });
+
+      // App goes inactive briefly (e.g. Control Center)
+      mockedAppState.setState('inactive');
+      const inactiveTime = timestampInSeconds();
+
+      jest.advanceTimersByTime(1_000);
+
+      // App returns to active — the inactive timestamp should be reset
+      mockedAppState.setState('active');
+
+      jest.advanceTimersByTime(2_000);
+
+      // Now app goes to background — should use this new timestamp, not the old inactive one
+      const backgroundTime = timestampInSeconds();
+      mockedAppState.setState('background');
+
+      const httpEndTime = spanToJSON(httpSpan).timestamp!;
+
+      // The end time should match the background event, not the earlier inactive event.
+      // Use toBeCloseTo because timestampInSeconds() may advance slightly between calls.
+      expect(httpEndTime).toBeCloseTo(backgroundTime, 1);
+
+      // If the inactive timestamp was NOT reset, the span would have ended
+      // at inactiveTime instead — verify that's not the case when they differ.
+      if (Math.abs(backgroundTime - inactiveTime) > 0.01) {
+        expect(httpEndTime).not.toBeCloseTo(inactiveTime, 1);
+      }
+    });
+
+    it('ends http.client child at background time on immediate background', () => {
+      const navSpan = startIdleNavigationSpan({ name: 'test' });
+      const httpSpan = startInactiveSpan({ name: 'GET /api/data', op: 'http.client' });
+
+      // App goes directly to background (Android, or iOS without inactive)
+      mockedAppState.setState('background');
+
+      expect(spanToJSON(navSpan!).status).toBe('cancelled');
+      expect(spanToJSON(httpSpan).timestamp).toBeDefined();
+      expect(spanToJSON(httpSpan).status).toBe('cancelled');
+    });
+
+    it('preserves already-ended http.client spans when app backgrounds', () => {
+      const navSpan = startIdleNavigationSpan({ name: 'test' });
+
+      // HTTP request that completed before backgrounding
+      const httpSpan = startInactiveSpan({ name: 'GET /api/data', op: 'http.client' });
+      httpSpan.setStatus({ code: 1 }); // OK
+      httpSpan.end();
+
+      const httpEndTimeBefore = spanToJSON(httpSpan).timestamp;
+
+      // App goes to background
+      mockedAppState.setState('background');
+
+      expect(spanToJSON(navSpan!).status).toBe('cancelled');
+
+      // The already-ended http.client span should be untouched
+      expect(spanToJSON(httpSpan).status).toBe('ok');
+      expect(spanToJSON(httpSpan).timestamp).toBe(httpEndTimeBefore);
+    });
+
+    it('still cancels non-http.client children when app backgrounds', () => {
+      const navSpan = startIdleNavigationSpan({ name: 'test' });
+
+      // A non-http span (e.g. a UI rendering span)
+      const uiSpan = startInactiveSpan({ name: 'ui.render', op: 'ui.load' });
+
+      mockedAppState.setState('background');
+
+      expect(spanToJSON(navSpan!).status).toBe('cancelled');
+
+      // Non-http.client children should still be cancelled by idle span logic
+      expect(spanToJSON(uiSpan).timestamp).toBeDefined();
+      expect(spanToJSON(uiSpan).status).toBe('cancelled');
+    });
+  });
+
   describe('Start a new active root span (without parent)', () => {
     it('Starts a new span when there is no active span', () => {
       const span = startIdleNavigationSpan({