feat(breadcrumbs): Add environment aware defaults for RN/Expo/Web (#4886)

Author: krystofwoldrich

CHANGELOG.md

@@ -42,6 +42,7 @@
 
 - `Sentry.captureUserFeedback` removed, use `Sentry.captureFeedback` instead ([#4855](https://github.com/getsentry/sentry-react-native/pull/4855))
 - Use global `TextEncoder` (available with Hermes in React Native 0.74 or higher) to greatly improve envelope encoding performance. ([#4874](https://github.com/getsentry/sentry-react-native/pull/4874))
+- `breadcrumbsIntegration` disables React Native incompatible options automatically ([#4886](https://github.com/getsentry/sentry-react-native/pull/4886))
 
 ### Changes
 

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

@@ -0,0 +1,74 @@
+import { breadcrumbsIntegration as browserBreadcrumbsIntegration } from '@sentry/browser';
+import type { Integration } from '@sentry/core';
+import { isWeb } from '../utils/environment';
+
+interface BreadcrumbsOptions {
+  /**
+   * Log calls to console.log, console.debug, and so on.
+   */
+  console: boolean;
+
+  /**
+   * Log all click and keypress events.
+   *
+   * Only available on web. In React Native this is a no-op.
+   */
+  dom:
+    | boolean
+    | {
+        serializeAttribute?: string | string[];
+        maxStringLength?: number;
+      };
+
+  /**
+   * Log HTTP requests done with the global Fetch API.
+   *
+   * Disabled by default in React Native because fetch is built on XMLHttpRequest.
+   * Enabled by default on web.
+   *
+   * Setting `fetch: true` and `xhr: true` will cause duplicates in React Native.
+   */
+  fetch: boolean;
+
+  /**
+   * Log calls to history.pushState and related APIs.
+   *
+   * Only available on web. In React Native this is a no-op.
+   */
+  history: boolean;
+
+  /**
+   * Log whenever we send an event to the server.
+   */
+  sentry: boolean;
+
+  /**
+   * Log HTTP requests done with the XHR API.
+   *
+   * Because React Native global fetch is built on XMLHttpRequest,
+   * this will also log `fetch` network requests.
+   *
+   * Setting `fetch: true` and `xhr: true` will cause duplicates in React Native.
+   */
+  xhr: boolean;
+}
+
+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.
+    xhr: true,
+    console: true,
+    sentry: true,
+    ...options,
+    fetch: options.fetch ?? (isWeb() ? true : false),
+    dom: isWeb() ? options.dom ?? true : false,
+    history: isWeb() ? options.history ?? true : false,
+  };
+
+  // Historically we had very little issue using the browser breadcrumbs integration
+  // and thus we don't cherry pick the implementation like for example the Sentry Deno SDK does.
+  // https://github.com/getsentry/sentry-javascript/blob/d007407c2e51d93d6d3933f9dea1e03ff3f4a4ab/packages/deno/src/integrations/breadcrumbs.ts#L34
+  return browserBreadcrumbsIntegration(_options);
+};

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

@@ -22,9 +22,9 @@ export { userInteractionIntegration } from '../tracing/integrations/userInteract
 export { createReactNativeRewriteFrames } from './rewriteframes';
 export { appRegistryIntegration } from './appRegistry';
 export { timeToDisplayIntegration } from '../tracing/integrations/timeToDisplayIntegration';
+export { breadcrumbsIntegration } from './breadcrumbs';
 
 export {
-  breadcrumbsIntegration,
   browserApiErrorsIntegration,
   dedupeIntegration,
   functionToStringIntegration,

packages/core/test/integrations/breadcrumbs.test.ts

@@ -0,0 +1,89 @@
+import { breadcrumbsIntegration as browserBreadcrumbsIntegration } from '@sentry/browser';
+import { breadcrumbsIntegration } from '../../src/js/integrations/breadcrumbs';
+import * as environment from '../../src/js/utils/environment';
+
+jest.mock('@sentry/browser', () => ({
+  breadcrumbsIntegration: jest.fn(),
+}));
+
+describe('breadcrumbsIntegration', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('passes React Native defaults to browserBreadcrumbsIntegration', () => {
+    jest.spyOn(environment, 'isWeb').mockReturnValue(false);
+
+    breadcrumbsIntegration();
+
+    expect(browserBreadcrumbsIntegration).toHaveBeenCalledWith({
+      xhr: true,
+      console: true,
+      sentry: true,
+      dom: false, // DOM is not available in React Native
+      fetch: false, // fetch is built on XMLHttpRequest in React Native
+      history: false, // history is not available in React Native
+    });
+  });
+
+  it('passes web defaults to browserBreadcrumbsIntegration when isWeb returns true', () => {
+    jest.spyOn(environment, 'isWeb').mockReturnValue(true);
+
+    breadcrumbsIntegration();
+
+    expect(browserBreadcrumbsIntegration).toHaveBeenCalledWith({
+      // Everything is enabled by default on web
+      xhr: true,
+      console: true,
+      sentry: true,
+      dom: true,
+      fetch: true,
+      history: true,
+    });
+  });
+
+  it('respects custom options React Native options', () => {
+    jest.spyOn(environment, 'isWeb').mockReturnValue(false);
+
+    breadcrumbsIntegration({
+      xhr: false,
+      console: false,
+      sentry: false,
+      dom: {}, // Integration should not let user enable DOM breadcrumbs on React Native
+      fetch: true, // If user enables it, we should log fetch requests
+      history: true, // Integration should not let user enable history breadcrumbs on React Native
+    });
+
+    expect(browserBreadcrumbsIntegration).toHaveBeenCalledWith({
+      xhr: false,
+      console: false,
+      sentry: false,
+      dom: false,
+      fetch: true,
+      history: false,
+    });
+  });
+
+  it('respects custom options when isWeb returns true', () => {
+    jest.spyOn(environment, 'isWeb').mockReturnValue(true);
+
+    breadcrumbsIntegration({
+      // Everything can be disabled on web
+      xhr: false,
+      console: false,
+      sentry: false,
+      dom: false,
+      fetch: false,
+      history: false,
+    });
+
+    expect(browserBreadcrumbsIntegration).toHaveBeenCalledWith({
+      xhr: false,
+      console: false,
+      sentry: false,
+      dom: false,
+      fetch: false,
+      history: false,
+    });
+  });
+});