feat(expo): Automatically detect Release name and version for Expo Web

CHANGELOG.md

@@ -6,6 +6,12 @@
 > make sure you follow our [migration guide](https://docs.sentry.io/platforms/react-native/migration/) first.
 <!-- prettier-ignore-end -->
 
+## Unreleased
+
+### Features
+
+- Automatically detect Release name and version for Expo Web ([#4910](https://github.com/getsentry/sentry-react-native/pull/4910))
+
 ## 6.15.1
 
 ### Dependencies

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

@@ -1,9 +1,15 @@
 import type { BaseTransportOptions, Client, ClientOptions, Event, EventHint, Integration } from '@sentry/core';
 
+import { isExpo, isWeb } from '../utils/environment';
 import { NATIVE } from '../wrapper';
 
 const INTEGRATION_NAME = 'Release';
 
+interface ExpoConfig {
+  name?: string;
+  version?: string;
+}
+
 /** Release integration responsible to load release from file. */
 export const nativeReleaseIntegration = (): Integration => {
   return {
@@ -15,6 +21,48 @@ export const nativeReleaseIntegration = (): Integration => {
   };
 };
 
+/**
+ * Get Expo Web configuration name and version from environment variables
+ */
+function getExpoWebConfig(): ExpoConfig | null {
+  if (!isWeb() || !isExpo()) {
+    return null;
+  }
+
+  try {
+    const processEnv = (globalThis as { process?: { env?: Record<string, string> } }).process?.env;
+
+    if (processEnv) {
+      const envConfig = {
+        name: processEnv.EXPO_PUBLIC_APP_NAME,
+        version: processEnv.EXPO_PUBLIC_APP_VERSION,
+      };
+
+      if (envConfig.name && envConfig.version) {
+        return envConfig;
+      }
+    }
+  } catch {
+    // Config detection failed, do nothing
+  }
+
+  return null;
+}
+
+/**
+ * Generates release string from Expo Web config
+ */
+function generateExpoWebRelease(config: ExpoConfig): string | null {
+  const name = config.name;
+  const version = config.version;
+
+  if (!name || !version) {
+    return null;
+  }
+
+  return `${name}@${version}`;
+}
+
 async function processEvent(
   event: Event,
   _: EventHint,
@@ -23,8 +71,11 @@ async function processEvent(
   const options = client.getOptions();
 
   /*
-    __sentry_release and __sentry_dist is set by the user with setRelease and setDist. If this is used then this is the strongest.
-    Otherwise we check for the release and dist in the options passed on init, as this is stronger than the release/dist from the native build.
+    Priority order:
+    1. __sentry_release and __sentry_dist set by user with setRelease and setDist (strongest)
+    2. release and dist in options passed on init
+    3. Native release (mobile)
+    4. Expo Web auto-detection (web only, no additional dependencies)
   */
   if (typeof event.extra?.__sentry_release === 'string') {
     event.release = `${event.extra.__sentry_release}`;
@@ -56,5 +107,19 @@ async function processEvent(
     // Something went wrong, we just continue
   }
 
+  if (!event.release && isExpo() && isWeb()) {
+    try {
+      const expoConfig = getExpoWebConfig();
+      if (expoConfig) {
+        const autoRelease = generateExpoWebRelease(expoConfig);
+        if (autoRelease) {
+          event.release = autoRelease;
+        }
+      }
+    } catch {
+      // Something went wrong, we just continue
+    }
+  }
+
   return event;
 }

packages/core/src/js/tools/metroconfig.ts

@@ -16,6 +16,44 @@ import { withSentryMiddleware } from './metroMiddleware';
 
 enableLogger();
 
+interface ExpoConfig {
+  name?: string;
+  version?: string;
+}
+
+interface ExpoConfigResult {
+  exp: ExpoConfig;
+}
+
+/**
+ * Try to inject Expo config name and version as environment variables.
+ * @param projectRoot The root directory of the Expo project.
+ */
+function injectExpoConfigAsEnvVars(projectRoot: string): void {
+  try {
+    let getConfigFunction: ((projectRoot: string) => ExpoConfigResult) | null = null;
+
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires, import/no-extraneous-dependencies
+      const expoConfig = require('@expo/config') as { getConfig: (projectRoot: string) => ExpoConfigResult };
+      getConfigFunction = expoConfig.getConfig;
+    } catch {
+      // @expo/config not available, do nothing
+    }
+
+    if (getConfigFunction) {
+      const { exp } = getConfigFunction(projectRoot);
+
+      if (exp && typeof exp.name === 'string' && typeof exp.version === 'string') {
+        process.env.EXPO_PUBLIC_APP_NAME = exp.name;
+        process.env.EXPO_PUBLIC_APP_VERSION = exp.version;
+      }
+    }
+  } catch (error) {
+    logger.warn('Failed to inject Expo config as environment variables:', error);
+  }
+}
+
 export interface SentryMetroConfigOptions {
   /**
    * Annotates React components with Sentry data.
@@ -88,6 +126,8 @@ export function getSentryExpoConfig(
 ): MetroConfig {
   setSentryMetroDevServerEnvFlag();
 
+  injectExpoConfigAsEnvVars(projectRoot);
+
   const getDefaultConfig = options.getDefaultConfig || loadExpoMetroConfigModule().getDefaultConfig;
   const config = getDefaultConfig(projectRoot, {
     ...options,

packages/core/test/integrations/release.test.ts

@@ -4,15 +4,40 @@ import { nativeReleaseIntegration } from '../../src/js/integrations/release';
 
 jest.mock('../../src/js/wrapper', () => ({
   NATIVE: {
-    fetchNativeRelease: async () => ({
-      build: 'native_build',
-      id: 'native_id',
-      version: 'native_version',
-    }),
+    fetchNativeRelease: jest.fn(),
   },
 }));
 
+jest.mock('../../src/js/utils/environment', () => ({
+  isExpo: jest.fn(),
+  isWeb: jest.fn(),
+}));
+
+import { isExpo, isWeb } from '../../src/js/utils/environment';
+import { NATIVE } from '../../src/js/wrapper';
+
+const mockIsExpo = isExpo as jest.MockedFunction<typeof isExpo>;
+const mockIsWeb = isWeb as jest.MockedFunction<typeof isWeb>;
+const mockFetchNativeRelease = NATIVE.fetchNativeRelease as jest.MockedFunction<typeof NATIVE.fetchNativeRelease>;
+
 describe('Tests the Release integration', () => {
+  beforeEach(() => {
+    mockIsExpo.mockReturnValue(false);
+    mockIsWeb.mockReturnValue(false);
+
+    mockFetchNativeRelease.mockResolvedValue({
+      build: 'native_build',
+      id: 'native_id',
+      version: 'native_version',
+    });
+
+    delete (globalThis as any).process;
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   test('Uses release from native SDK if release/dist are not present in options.', async () => {
     const releaseIntegration = nativeReleaseIntegration();
 
@@ -77,4 +102,150 @@ describe('Tests the Release integration', () => {
     expect(event?.release).toBe('sentry_release');
     expect(event?.dist).toBe('sentry_dist');
   });
+
+  describe('Expo Web Config Tests', () => {
+    beforeEach(() => {
+      // Mock native release to throw error so it falls back to Expo Web
+      mockFetchNativeRelease.mockRejectedValue(new Error('Native release failed'));
+    });
+
+    test('Uses Expo Web config when isExpo and isWeb are true and environment variables are set', async () => {
+      mockIsExpo.mockReturnValue(true);
+      mockIsWeb.mockReturnValue(true);
+
+      (globalThis as any).process = {
+        env: {
+          EXPO_PUBLIC_APP_NAME: 'MyExpoApp',
+          EXPO_PUBLIC_APP_VERSION: '1.2.3',
+        },
+      };
+
+      const releaseIntegration = nativeReleaseIntegration();
+      const event = await releaseIntegration.processEvent!({}, {}, { getOptions: () => ({}) } as Client);
+
+      expect(event?.release).toBe('MyExpoApp@1.2.3');
+    });
+
+    test('Does not use Expo Web config when not in Expo environment', async () => {
+      mockIsExpo.mockReturnValue(false);
+      mockIsWeb.mockReturnValue(true);
+
+      (globalThis as any).process = {
+        env: {
+          EXPO_PUBLIC_APP_NAME: 'MyExpoApp',
+          EXPO_PUBLIC_APP_VERSION: '1.2.3',
+        },
+      };
+
+      const releaseIntegration = nativeReleaseIntegration();
+      const event = await releaseIntegration.processEvent!({}, {}, { getOptions: () => ({}) } as Client);
+
+      expect(event?.release).toBeUndefined();
+    });
+
+    test('Does not use Expo Web config when not in web environment', async () => {
+      mockIsExpo.mockReturnValue(true);
+      mockIsWeb.mockReturnValue(false);
+
+      (globalThis as any).process = {
+        env: {
+          EXPO_PUBLIC_APP_NAME: 'MyExpoApp',
+          EXPO_PUBLIC_APP_VERSION: '1.2.3',
+        },
+      };
+
+      const releaseIntegration = nativeReleaseIntegration();
+      const event = await releaseIntegration.processEvent!({}, {}, { getOptions: () => ({}) } as Client);
+
+      expect(event?.release).toBeUndefined();
+    });
+
+    test('Does not use Expo Web config when app name is missing', async () => {
+      mockIsExpo.mockReturnValue(true);
+      mockIsWeb.mockReturnValue(true);
+
+      (globalThis as any).process = {
+        env: {
+          EXPO_PUBLIC_APP_VERSION: '1.2.3',
+        },
+      };
+
+      const releaseIntegration = nativeReleaseIntegration();
+      const event = await releaseIntegration.processEvent!({}, {}, { getOptions: () => ({}) } as Client);
+
+      expect(event?.release).toBeUndefined();
+    });
+
+    test('Does not use Expo Web config when app version is missing', async () => {
+      mockIsExpo.mockReturnValue(true);
+      mockIsWeb.mockReturnValue(true);
+
+      (globalThis as any).process = {
+        env: {
+          EXPO_PUBLIC_APP_NAME: 'MyExpoApp',
+        },
+      };
+
+      const releaseIntegration = nativeReleaseIntegration();
+      const event = await releaseIntegration.processEvent!({}, {}, { getOptions: () => ({}) } as Client);
+
+      expect(event?.release).toBeUndefined();
+    });
+
+    test('Does not use Expo Web config when process.env is not available', async () => {
+      mockIsExpo.mockReturnValue(true);
+      mockIsWeb.mockReturnValue(true);
+
+      delete (globalThis as any).process;
+
+      const releaseIntegration = nativeReleaseIntegration();
+      const event = await releaseIntegration.processEvent!({}, {}, { getOptions: () => ({}) } as Client);
+
+      expect(event?.release).toBeUndefined();
+    });
+
+    test('Prefers options release over Expo Web config', async () => {
+      mockIsExpo.mockReturnValue(true);
+      mockIsWeb.mockReturnValue(true);
+
+      (globalThis as any).process = {
+        env: {
+          EXPO_PUBLIC_APP_NAME: 'MyExpoApp',
+          EXPO_PUBLIC_APP_VERSION: '1.2.3',
+        },
+      };
+
+      const releaseIntegration = nativeReleaseIntegration();
+      const event = await releaseIntegration.processEvent!({}, {}, {
+        getOptions: () => ({ release: 'options_release' }),
+      } as Client);
+
+      expect(event?.release).toBe('options_release');
+    });
+
+    test('Prefers __sentry_release over Expo Web config', async () => {
+      mockIsExpo.mockReturnValue(true);
+      mockIsWeb.mockReturnValue(true);
+
+      (globalThis as any).process = {
+        env: {
+          EXPO_PUBLIC_APP_NAME: 'MyExpoApp',
+          EXPO_PUBLIC_APP_VERSION: '1.2.3',
+        },
+      };
+
+      const releaseIntegration = nativeReleaseIntegration();
+      const event = await releaseIntegration.processEvent!(
+        {
+          extra: {
+            __sentry_release: 'sentry_release',
+          },
+        },
+        {},
+        { getOptions: () => ({}) } as Client,
+      );
+
+      expect(event?.release).toBe('sentry_release');
+    });
+  });
 });