fix(core): Deduplicate native HTTP breadcrumbs (#6132)

* fix(core): Deduplicate native HTTP breadcrumbs that duplicate JS XHR/fetch breadcrumbs

Closes #3045

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

* docs: Add changelog entry for duplicate HTTP breadcrumbs fix

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

* fix(core): Handle missing status_code in breadcrumb deduplication

Network errors, aborted requests, and CORS failures produce breadcrumbs
without a status_code. Treat both sides being null/undefined as a match.

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

* fix(core): Handle numeric timestamps in breadcrumbFromObject

Previously only string timestamps were parsed; numeric timestamps
(seconds since epoch) were silently dropped.

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

* Fix changelog

---------

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

Author: antonis

CHANGELOG.md

@@ -20,6 +20,7 @@
 
 ### Fixes
 
+- Deduplicate native HTTP breadcrumbs that duplicate JS XHR/fetch breadcrumbs ([#6132](https://github.com/getsentry/sentry-react-native/pull/6132))
 - Fix duplicate JS error reporting on iOS New Architecture when the native SDK is initialized early via `sentry.options.json` ("Capture App Start Errors"). It's done by applying the `ExceptionsManager.reportException` C++ wrapper filter in both init paths ([#6145](https://github.com/getsentry/sentry-react-native/pull/6145))
 - Fix boolean options from `sentry.options.json` being ignored on Android when using `RNSentrySDK.init` ([#6130](https://github.com/getsentry/sentry-react-native/pull/6130))
 - Fix `sentry-expo-upload-sourcemaps` failing for projects with `devEngines.packageManager` set to non-npm managers ([#6155](https://github.com/getsentry/sentry-react-native/pull/6155))

packages/core/src/js/breadcrumb.ts

@@ -37,6 +37,8 @@ export function breadcrumbFromObject(candidate: BreadcrumbCandidate): Breadcrumb
     if (!isNaN(timestampSeconds)) {
       breadcrumb.timestamp = timestampSeconds;
     }
+  } else if (typeof candidate.timestamp === 'number' && !isNaN(candidate.timestamp)) {
+    breadcrumb.timestamp = candidate.timestamp;
   }
 
   return breadcrumb;

packages/core/src/js/integrations/breadcrumbs.ts

@@ -57,9 +57,8 @@ interface BreadcrumbsOptions {
 
 export const breadcrumbsIntegration = (options: Partial<BreadcrumbsOptions> = {}): Integration => {
   const _options: BreadcrumbsOptions = {
-    // FIXME: In mobile environment XHR is implemented by native APIs, which are instrumented by the Native SDK.
-    // This will cause duplicates in React Native. On iOS `NSURLSession` is instrumented by default. On Android
-    // `OkHttp` is only instrumented by SAGP.
+    // In mobile environment XHR is implemented by native APIs, which are instrumented by the Native SDK.
+    // Duplicates from JS and native HTTP breadcrumbs are deduplicated in `deviceContextIntegration`.
     xhr: true,
     console: true,
     sentry: true,

packages/core/src/js/integrations/devicecontext.ts

@@ -1,5 +1,5 @@
 /* oxlint-disable eslint(complexity) */
-import type { Client, Event, EventHint, Integration } from '@sentry/core';
+import type { Breadcrumb, Client, Event, EventHint, Integration } from '@sentry/core';
 
 import { debug, severityLevelFromString } from '@sentry/core';
 import { AppState } from 'react-native';
@@ -86,11 +86,72 @@ async function processEvent(event: Event, _hint: EventHint, client: Client): Pro
     : undefined;
   if (nativeBreadcrumbs) {
     const maxBreadcrumbs = client?.getOptions().maxBreadcrumbs ?? 100; // Default is 100.
-    event.breadcrumbs = nativeBreadcrumbs
-      .concat(event.breadcrumbs || []) // concatenate the native and js breadcrumbs
-      .sort((a, b) => (a.timestamp ?? 0) - (b.timestamp ?? 0)) // sort by timestamp
-      .slice(-maxBreadcrumbs); // keep the last maxBreadcrumbs
+    const dedupedNativeBreadcrumbs = deduplicateNativeHttpBreadcrumbs(nativeBreadcrumbs, event.breadcrumbs || []);
+    event.breadcrumbs = dedupedNativeBreadcrumbs
+      .concat(event.breadcrumbs || [])
+      .sort((a, b) => (a.timestamp ?? 0) - (b.timestamp ?? 0))
+      .slice(-maxBreadcrumbs);
   }
 
   return event;
 }
+
+const HTTP_BREADCRUMB_DEDUP_TIMESTAMP_TOLERANCE_SECONDS = 2;
+
+/**
+ * Removes native HTTP breadcrumbs that are duplicates of JS XHR/fetch breadcrumbs.
+ *
+ * React Native's networking (fetch/XHR) is implemented via native APIs (NSURLSession on iOS,
+ * OkHttp on Android). Both the JS SDK and the native SDK instrument these requests independently,
+ * resulting in duplicate breadcrumbs: a JS "xhr" breadcrumb and a native "http" breadcrumb
+ * for the same request.
+ *
+ * Each JS breadcrumb can only consume one native match to avoid false positives
+ * when there are legitimate consecutive identical requests.
+ */
+function deduplicateNativeHttpBreadcrumbs(nativeBreadcrumbs: Breadcrumb[], jsBreadcrumbs: Breadcrumb[]): Breadcrumb[] {
+  const jsHttpBreadcrumbs = jsBreadcrumbs.filter(
+    b => b.type === 'http' && (b.category === 'xhr' || b.category === 'fetch'),
+  );
+
+  if (jsHttpBreadcrumbs.length === 0) {
+    return nativeBreadcrumbs;
+  }
+
+  const consumedJsIndices = new Set<number>();
+
+  return nativeBreadcrumbs.filter(nativeBreadcrumb => {
+    if (nativeBreadcrumb.type !== 'http' || nativeBreadcrumb.category !== 'http') {
+      return true;
+    }
+
+    const matchIndex = jsHttpBreadcrumbs.findIndex((jsBreadcrumb, index) => {
+      if (consumedJsIndices.has(index)) {
+        return false;
+      }
+
+      const sameMethod = nativeBreadcrumb.data?.method === jsBreadcrumb.data?.method;
+      const sameUrl = nativeBreadcrumb.data?.url === jsBreadcrumb.data?.url;
+      const nativeStatus = nativeBreadcrumb.data?.status_code;
+      const jsStatus = jsBreadcrumb.data?.status_code;
+      const sameStatus =
+        nativeStatus == null && jsStatus == null
+          ? true
+          : nativeStatus != null && jsStatus != null && Number(nativeStatus) === Number(jsStatus);
+      const withinTimeTolerance =
+        nativeBreadcrumb.timestamp != null &&
+        jsBreadcrumb.timestamp != null &&
+        Math.abs(nativeBreadcrumb.timestamp - jsBreadcrumb.timestamp) <=
+          HTTP_BREADCRUMB_DEDUP_TIMESTAMP_TOLERANCE_SECONDS;
+
+      return sameMethod && sameUrl && sameStatus && withinTimeTolerance;
+    });
+
+    if (matchIndex !== -1) {
+      consumedJsIndices.add(matchIndex);
+      return false;
+    }
+
+    return true;
+  });
+}

packages/core/test/breadcrumb.test.ts

@@ -43,6 +43,31 @@ describe('Breadcrumb', () => {
       });
     });
 
+    it('convert plain object with numeric timestamp to a valid Breadcrumb', () => {
+      const candidate = {
+        type: 'test',
+        level: 'info',
+        timestamp: 1730985899,
+      };
+      const breadcrumb = breadcrumbFromObject(candidate);
+      expect(breadcrumb).toEqual(<Breadcrumb>{
+        type: 'test',
+        level: 'info',
+        timestamp: 1730985899,
+      });
+    });
+
+    it('ignores NaN numeric timestamp', () => {
+      const candidate = {
+        type: 'test',
+        timestamp: NaN,
+      };
+      const breadcrumb = breadcrumbFromObject(candidate);
+      expect(breadcrumb).toEqual(<Breadcrumb>{
+        type: 'test',
+      });
+    });
+
     it('convert empty object to a valid Breadcrumb', () => {
       const candidate = {};
       const breadcrumb = breadcrumbFromObject(candidate);