chore: Disable AppStart and NativeFrames integration by default in environments without native support

CHANGELOG.md

@@ -11,6 +11,7 @@
 ### Changes
 
 - Remove deprecated `appOwnership` constant use in Expo Go detection ([#4893](https://github.com/getsentry/sentry-react-native/pull/4893))
+- Disable AppStart and NativeFrames in unsupported environments (web, Expo Go) ([#4897](https://github.com/getsentry/sentry-react-native/pull/4897))
 
 ## 7.0.0-beta.0
 

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

@@ -98,11 +98,11 @@ export function getDefaultIntegrations(options: ReactNativeClientOptions): Integ
   // that's different from prev imp here and might lead misconfiguration
   // `tracesSampleRate: undefined` should not enable tracing
   const hasTracingEnabled = typeof options.tracesSampleRate === 'number' || typeof options.tracesSampler === 'function';
-  if (hasTracingEnabled && options.enableAppStartTracking) {
+  if (hasTracingEnabled && options.enableAppStartTracking && options.enableNative) {
     integrations.push(appStartIntegration());
   }
   const nativeFramesIntegrationInstance = createNativeFramesIntegrations(
-    hasTracingEnabled && options.enableNativeFramesTracking,
+    hasTracingEnabled && options.enableNativeFramesTracking && options.enableNative,
   );
   if (nativeFramesIntegrationInstance) {
     integrations.push(nativeFramesIntegrationInstance);

packages/core/src/js/sdk.tsx

@@ -11,10 +11,7 @@ import {
   stackParserFromStackParserOptions,
   withScope as coreWithScope,
 } from '@sentry/core';
-import {
-  defaultStackParser,
-  makeFetchTransport,
-} from '@sentry/react';
+import { defaultStackParser, makeFetchTransport, Profiler } from '@sentry/react';
 import * as React from 'react';
 import { ReactNativeClient } from './client';
 import { FeedbackWidgetProvider } from './feedback/FeedbackWidgetProvider';
@@ -27,7 +24,7 @@ import { TouchEventBoundary } from './touchevents';
 import { ReactNativeProfiler } from './tracing';
 import { useEncodePolyfill } from './transports/encodePolyfill';
 import { DEFAULT_BUFFER_SIZE, makeNativeTransportFactory } from './transports/native';
-import { getDefaultEnvironment, isExpoGo, isRunningInMetroDevServer } from './utils/environment';
+import { getDefaultEnvironment, isExpoGo, isRunningInMetroDevServer, isWeb } from './utils/environment';
 import { safeFactory, safeTracesSampler } from './utils/safe';
 import { NATIVE } from './wrapper';
 
@@ -170,14 +167,16 @@ export function wrap<P extends Record<string, unknown>>(
     updateProps: {}
   };
 
-  const RootApp: React.FC<P> = (appProps) => {
+  const ProfilerComponent = isWeb() ? Profiler : ReactNativeProfiler;
+
+  const RootApp: React.FC<P> = appProps => {
     return (
       <TouchEventBoundary {...(options?.touchEventBoundaryProps ?? {})}>
-        <ReactNativeProfiler {...profilerProps}>
+        <ProfilerComponent {...profilerProps}>
           <FeedbackWidgetProvider>
             <RootComponent {...appProps} />
           </FeedbackWidgetProvider>
-        </ReactNativeProfiler>
+        </ProfilerComponent>
       </TouchEventBoundary>
     );
   };

packages/core/test/sdk.test.ts

@@ -678,6 +678,15 @@ describe('Tests the SDK functionality', () => {
       expectNotIntegration('AppStart');
     });
 
+    it('when tracing enabled app start without native (on web, Expo Go) integration is not added', () => {
+      init({
+        tracesSampleRate: 0.5,
+        enableNative: false,
+      });
+
+      expectNotIntegration('AppStart');
+    });
+
     it('no native frames integration by default', () => {
       init({});
 
@@ -701,6 +710,15 @@ describe('Tests the SDK functionality', () => {
       expectNotIntegration('NativeFrames');
     });
 
+    it('when tracing enabled (on web, Expo Go) native frames integration is not added', () => {
+      init({
+        tracesSampleRate: 0.5,
+        enableNative: false,
+      });
+
+      expectNotIntegration('NativeFrames');
+    });
+
     it('when tracing not set stall tracking the integration is not added', () => {
       init({});
 

packages/core/test/wrap.mocked.test.tsx

@@ -2,23 +2,33 @@
 import { render } from '@testing-library/react-native';
 import * as React from 'react';
 import type { ReactNativeWrapperOptions } from 'src/js/options';
+import * as environment from '../src/js/utils/environment';
 
 jest.doMock('../src/js/touchevents', () => {
   return {
-        TouchEventBoundary: ({ children }: { children: React.ReactNode }) => (
-          // eslint-disable-next-line react/no-unknown-property
-          <div testID="touch-boundaryID">{children}</div>
-        ),
-      }
+    TouchEventBoundary: ({ children }: { children: React.ReactNode }) => (
+      // eslint-disable-next-line react/no-unknown-property
+      <div testID="touch-boundaryID">{children}</div>
+    ),
+  };
 });
 
 jest.doMock('../src/js/tracing', () => {
   return {
-        ReactNativeProfiler: jest.fn(({ children }: { children: React.ReactNode }) => (
-          // eslint-disable-next-line react/no-unknown-property
-          <div testID="profilerID">{children}</div>
-        )),
-      }
+    ReactNativeProfiler: jest.fn(({ children }: { children: React.ReactNode }) => (
+      // eslint-disable-next-line react/no-unknown-property
+      <div testID="react-native-profilerID">{children}</div>
+    )),
+  };
+});
+
+jest.doMock('@sentry/react', () => {
+  return {
+    Profiler: jest.fn(({ children }: { children: React.ReactNode }) => (
+      // eslint-disable-next-line react/no-unknown-property
+      <div testID="react-profilerID">{children}</div>
+    )),
+  };
 });
 
 jest.doMock('../src/js/feedback/FeedbackWidgetProvider', () => {
@@ -34,26 +44,50 @@ import { wrap } from '../src/js/sdk';
 import { ReactNativeProfiler } from '../src/js/tracing';
 
 describe('Sentry.wrap', () => {
+  const DummyComponent: React.FC<{ value?: string }> = ({ value }) => <div>{value}</div>;
 
-    const DummyComponent: React.FC<{ value?: string }> = ({ value }) => <div>{value}</div>;
+  it('should not enforce any keys on the wrapped component', () => {
+    const Mock: React.FC<{ test: 23 }> = () => <></>;
+    const ActualWrapped = wrap(Mock);
 
-    it('should not enforce any keys on the wrapped component', () => {
-      const Mock: React.FC<{ test: 23 }> = () => <></>;
-      const ActualWrapped = wrap(Mock);
+    expect(typeof ActualWrapped.defaultProps).toBe(typeof Mock.defaultProps);
+  });
 
-      expect(typeof ActualWrapped.defaultProps).toBe(typeof Mock.defaultProps);
-    });
+  it('wraps components with Sentry wrappers', () => {
+    const Wrapped = wrap(DummyComponent);
+    const renderResult = render(<Wrapped value="wrapped" />);
 
-    it('wraps components with Sentry wrappers', () => {
-      const Wrapped = wrap(DummyComponent);
-      const renderResult = render(<Wrapped value="wrapped" />);
+    expect(renderResult.toJSON()).toMatchInlineSnapshot(`
+  <div
+    testID="touch-boundaryID"
+  >
+    <div
+      testID="react-native-profilerID"
+    >
+      <div
+        testID="feedback-widgetID"
+      >
+        <div>
+          wrapped
+        </div>
+      </div>
+    </div>
+  </div>
+`);
+  });
+
+  it('wraps components with JS React Profiler on web', () => {
+    jest.spyOn(environment, 'isWeb').mockReturnValueOnce(true);
 
-      expect(renderResult.toJSON()).toMatchInlineSnapshot(`
+    const Wrapped = wrap(DummyComponent);
+    const renderResult = render(<Wrapped value="wrapped" />);
+
+    expect(renderResult.toJSON()).toMatchInlineSnapshot(`
   <div
     testID="touch-boundaryID"
   >
     <div
-      testID="profilerID"
+      testID="react-profilerID"
     >
       <div
         testID="feedback-widgetID"
@@ -65,46 +99,46 @@ describe('Sentry.wrap', () => {
     </div>
   </div>
 `);
+  });
+
+  describe('ReactNativeProfiler', () => {
+    it('uses given options when set', () => {
+      const options: ReactNativeWrapperOptions = {
+        profilerProps: { disabled: false, includeRender: true, includeUpdates: true },
+      };
+      const Wrapped = wrap(DummyComponent, options);
+      render(<Wrapped value="wrapped" />);
+
+      expect(ReactNativeProfiler).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: 'Root',
+          disabled: false,
+          includeRender: true,
+          includeUpdates: true,
+        }),
+        expect.anything(),
+      );
+
+      expect(ReactNativeProfiler).not.toHaveBeenCalledWith(
+        expect.objectContaining({
+          updateProps: expect.anything(),
+        }),
+      );
     });
 
-    describe('ReactNativeProfiler', () => {
-      it('uses given options when set', () => {
-        const options: ReactNativeWrapperOptions = {
-          profilerProps: { disabled: false, includeRender: true, includeUpdates: true },
-        };
-        const Wrapped = wrap(DummyComponent, options);
-        render(<Wrapped value="wrapped" />);
-
-        expect(ReactNativeProfiler).toHaveBeenCalledWith(
-          expect.objectContaining({
-            name: 'Root',
-            disabled: false,
-            includeRender: true,
-            includeUpdates: true
-          }),
-          expect.anything(),
-        );
-
-        expect(ReactNativeProfiler).not.toHaveBeenCalledWith(
-          expect.objectContaining({
-            updateProps: expect.anything(),
-          })
-        );
-      });
-
-      it('ignore updateProps when set', () => {
-        const { wrap } = jest.requireActual('../src/js/sdk');
-
-        const Wrapped = wrap(DummyComponent, { updateProps: ['prop'] });
-        render(<Wrapped value="wrapped" />);
-
-        expect(ReactNativeProfiler).toHaveBeenCalledWith(
-          expect.objectContaining({
-            name: 'Root',
-            updateProps: {},
-          }),
-          expect.anything(),
-        );
-      });
+    it('ignore updateProps when set', () => {
+      const { wrap } = jest.requireActual('../src/js/sdk');
+
+      const Wrapped = wrap(DummyComponent, { updateProps: ['prop'] });
+      render(<Wrapped value="wrapped" />);
+
+      expect(ReactNativeProfiler).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: 'Root',
+          updateProps: {},
+        }),
+        expect.anything(),
+      );
     });
   });
+});