fix(perf): Cancel spans in background doesn't crash in environments without AppState

CHANGELOG.md

@@ -9,6 +9,7 @@
 ### Fixes
 
 - Do not enable NativeFramesTracking when native is not available ([#3705](https://github.com/getsentry/sentry-react-native/pull/3705))
+- Cancel spans in background doesn't crash in environments without AppState ([#3727](https://github.com/getsentry/sentry-react-native/pull/3727))
 
 ### Dependencies
 

src/js/tracing/transaction.ts

@@ -1,6 +1,6 @@
 import { type BeforeFinishCallback, type IdleTransaction } from '@sentry/core';
 import { logger } from '@sentry/utils';
-import type { AppStateStatus } from 'react-native';
+import type { AppStateStatus, NativeEventSubscription } from 'react-native';
 import { AppState } from 'react-native';
 
 /**
@@ -22,15 +22,25 @@ export const onlySampleIfChildSpans: BeforeFinishCallback = (transaction: IdleTr
  * Hooks on AppState change to cancel the transaction if the app goes background.
  */
 export const cancelInBackground = (transaction: IdleTransaction): void => {
-  const subscription = AppState.addEventListener('change', (newState: AppStateStatus) => {
-    if (newState === 'background') {
-      logger.debug(`Setting ${transaction.op} transaction to cancelled because the app is in the background.`);
-      transaction.setStatus('cancelled');
-      transaction.finish();
-    }
-  });
-  transaction.registerBeforeFinishCallback(() => {
-    logger.debug(`Removing AppState listener for ${transaction.op} transaction.`);
-    subscription.remove();
-  });
+  if (!AppState || !AppState.isAvailable) {
+    logger.warn('AppState is not available, spans will not be canceled in background.');
+    return;
+  }
+
+  // RN Web can return undefined, https://github.com/necolas/react-native-web/blob/8cf720f0e57c74a254bfa7bed0313e33a4b29c11/packages/react-native-web/src/exports/AppState/index.js#L55
+  const subscription: NativeEventSubscription | undefined = AppState.addEventListener(
+    'change',
+    (newState: AppStateStatus) => {
+      if (newState === 'background') {
+        logger.debug(`Setting ${transaction.op} transaction to cancelled because the app is in the background.`);
+        transaction.setStatus('cancelled');
+        transaction.finish();
+      }
+    },
+  );
+  subscription &&
+    transaction.registerBeforeFinishCallback(() => {
+      logger.debug(`Removing AppState listener for ${transaction.op} transaction.`);
+      subscription && subscription.remove && subscription.remove();
+    });
 };

test/tracing/reactnativetracing.test.ts

@@ -127,6 +127,13 @@ describe('ReactNativeTracing', () => {
   beforeEach(() => {
     jest.useFakeTimers();
     NATIVE.enableNative = true;
+    mockedAppState.isAvailable = true;
+    mockedAppState.addEventListener = (_, listener) => {
+      mockedAppState.listener = listener;
+      return {
+        remove: mockedAppState.removeSubscription,
+      };
+    };
   });
 
   afterEach(() => {
@@ -357,6 +364,26 @@ describe('ReactNativeTracing', () => {
         expect(mockedAppState.removeSubscription).toBeCalledTimes(1);
       });
 
+      it('Does not crash when AppState is not available', async () => {
+        mockedAppState.isAvailable = false;
+        mockedAppState.addEventListener = (() => {
+          return undefined;
+        }) as unknown as (typeof mockedAppState)['addEventListener']; // RN Web can return undefined
+        const integration = new ReactNativeTracing();
+
+        mockAppStartResponse({ cold: false });
+
+        const mockHub = getMockHub();
+        integration.setupOnce(addGlobalEventProcessor, () => mockHub);
+
+        await jest.advanceTimersByTimeAsync(500);
+        const transaction = mockHub.getScope()?.getTransaction();
+
+        jest.runAllTimers();
+
+        expect(transaction?.endTimestamp).toBeDefined();
+      });
+
       it('Does not add app start measurement if more than 60s', async () => {
         const integration = new ReactNativeTracing();