fix(expo): Do not try to load native components in Expo Go (#4696)

Author: krystofwoldrich

CHANGELOG.md

@@ -33,6 +33,7 @@
 ### Fixes
 
 - Equalize TTID and TTFD duration when TTFD manual API is called and resolved before auto TTID ([#4680](https://github.com/getsentry/sentry-react-native/pull/4680))
+- Avoid loading Sentry native components in Expo Go ([#4696](https://github.com/getsentry/sentry-react-native/pull/4696))
 
 ### Changes
 

packages/core/src/js/replay/CustomMask.tsx

@@ -3,6 +3,8 @@ import * as React from 'react';
 import type { HostComponent, ViewProps } from 'react-native';
 import { UIManager, View } from 'react-native';
 
+import { isExpoGo } from '../utils/environment';
+
 const NativeComponentRegistry: {
   get<T, C extends Record<string, unknown>>(componentName: string, createViewConfig: () => C): HostComponent<T>;
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -35,7 +37,7 @@ const UnmaskFallback = (viewProps: ViewProps): React.ReactElement => {
 const hasViewManagerConfig = (nativeComponentName: string): boolean => UIManager.hasViewManagerConfig && UIManager.hasViewManagerConfig(nativeComponentName);
 
 const Mask = ((): HostComponent<ViewProps> | React.ComponentType<ViewProps> => {
-  if (!hasViewManagerConfig(MaskNativeComponentName)) {
+  if (isExpoGo() || !hasViewManagerConfig(MaskNativeComponentName)) {
     logger.warn(`[SentrySessionReplay] Can't load ${MaskNativeComponentName}.`);
     return MaskFallback;
   }
@@ -48,7 +50,7 @@ const Mask = ((): HostComponent<ViewProps> | React.ComponentType<ViewProps> => {
 })()
 
 const Unmask = ((): HostComponent<ViewProps> | React.ComponentType<ViewProps> => {
-  if (!hasViewManagerConfig(UnmaskNativeComponentName)) {
+  if (isExpoGo() || !hasViewManagerConfig(UnmaskNativeComponentName)) {
     logger.warn(`[SentrySessionReplay] Can't load ${UnmaskNativeComponentName}.`);
     return UnmaskFallback;
   }

packages/core/src/js/tracing/timetodisplaynative.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import type { HostComponent } from 'react-native';
 import { UIManager, View } from 'react-native';
 
+import { isExpoGo } from '../utils/environment';
 import { ReactNativeLibraries } from '../utils/rnlibraries';
 import type { RNSentryOnDrawReporterProps } from './timetodisplaynative.types';
 
@@ -29,7 +30,7 @@ let RNSentryOnDrawReporter: HostComponent<RNSentryOnDrawReporterProps> | typeof
  */
 export const getRNSentryOnDrawReporter = (): typeof RNSentryOnDrawReporter => {
   if (!RNSentryOnDrawReporter) {
-    RNSentryOnDrawReporter = nativeComponentExists && ReactNativeLibraries.ReactNative?.requireNativeComponent
+    RNSentryOnDrawReporter = !isExpoGo() && nativeComponentExists && ReactNativeLibraries.ReactNative?.requireNativeComponent
       ? ReactNativeLibraries.ReactNative.requireNativeComponent(RNSentryOnDrawReporterClass)
       : RNSentryOnDrawReporterNoop;
   }

packages/core/test/replay/CustomMask.test.ts

@@ -2,9 +2,23 @@ import { beforeEach, describe, expect, it } from '@jest/globals';
 
 describe('CustomMask', () => {
   beforeEach(() => {
+    jest.mock('../../src/js/utils/environment', () => ({
+      isExpoGo: () => false,
+    }));
     jest.resetModules();
   });
 
+  it('returns a fallback when isExpoGo is true', () => {
+    jest.mock('../../src/js/utils/environment', () => ({
+      isExpoGo: () => true,
+    }));
+
+    const { Mask, Unmask, MaskFallback, UnmaskFallback } = require('../../src/js/replay/CustomMask');
+
+    expect(Mask).toBe(MaskFallback);
+    expect(Unmask).toBe(UnmaskFallback);
+  });
+
   it('returns a fallback when native view manager is missing', () => {
     jest.mock('react-native', () => ({
       UIManager: {},

packages/core/test/tracing/timetodisplaynative.test.tsx

@@ -0,0 +1,15 @@
+import { getRNSentryOnDrawReporter } from '../../src/js/tracing/timetodisplaynative';
+import * as Environment from '../../src/js/utils/environment';
+
+describe('timetodisplaynative', () => {
+  beforeEach(() => {
+    jest.spyOn(Environment, 'isExpoGo').mockReturnValue(false);
+  });
+
+  test('getRNSentryOnDrawReporter returns Noop in Expo Go', () => {
+    jest.spyOn(Environment, 'isExpoGo').mockReturnValue(true);
+    const drawReported = getRNSentryOnDrawReporter();
+
+    expect(drawReported.name).toBe('RNSentryOnDrawReporterNoop');
+  });
+});