feat: Automatically load sentry.options.json file (#4476)

Author: krystofwoldrich

CHANGELOG.md

@@ -8,6 +8,10 @@
 
 ## Unreleased
 
+### Features
+
+- Load `optionsFile` into the JS bundle during Metro bundle process ([#4476](https://github.com/getsentry/sentry-react-native/pull/4476)) 
+
 ### Fixes
 
 - Add mechanism field to unhandled rejection errors ([#4457](https://github.com/getsentry/sentry-react-native/pull/4457))

packages/core/jest.config.tools.js

@@ -1,7 +1,7 @@
 module.exports = {
   collectCoverage: true,
   preset: 'ts-jest',
-  setupFilesAfterEnv: ['<rootDir>/test/mockConsole.ts'],
+  setupFilesAfterEnv: ['jest-extended/all', '<rootDir>/test/mockConsole.ts'],
   globals: {
     __DEV__: true,
   },

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

@@ -10,6 +10,8 @@ import { createSentryMetroSerializer, unstable_beforeAssetSerializationPlugin }
 import type { DefaultConfigOptions } from './vendor/expo/expoconfig';
 export * from './sentryMetroSerializer';
 import { withSentryMiddleware } from './metroMiddleware';
+import { withSentryOptionsFromFile } from './sentryOptionsSerializer';
+import type { MetroCustomSerializer } from './utils';
 
 enableLogger();
 
@@ -30,6 +32,14 @@ export interface SentryMetroConfigOptions {
    * @default true
    */
   enableSourceContextInDevelopment?: boolean;
+  /**
+   * Load Sentry Options from a file. If `true` it will use the default path.
+   * If `false` it will not load any options from a file. Only options provided in the code will be used.
+   * If `string` it will use the provided path.
+   *
+   * @default '{projectRoot}/sentry.options.json'
+   */
+  optionsFile?: string | boolean;
 }
 
 export interface SentryExpoConfigOptions {
@@ -51,6 +61,7 @@ export function withSentryConfig(
     annotateReactComponents = false,
     includeWebReplay = true,
     enableSourceContextInDevelopment = true,
+    optionsFile = true,
   }: SentryMetroConfigOptions = {},
 ): MetroConfig {
   setSentryMetroDevServerEnvFlag();
@@ -68,6 +79,9 @@ export function withSentryConfig(
   if (enableSourceContextInDevelopment) {
     newConfig = withSentryMiddleware(newConfig);
   }
+  if (optionsFile) {
+    newConfig = withSentryOptionsFromFile(newConfig, optionsFile);
+  }
 
   return newConfig;
 }
@@ -103,6 +117,10 @@ export function getSentryExpoConfig(
     newConfig = withSentryMiddleware(newConfig);
   }
 
+  if (options.optionsFile ?? true) {
+    newConfig = withSentryOptionsFromFile(newConfig, options.optionsFile ?? true);
+  }
+
   return newConfig;
 }
 
@@ -155,8 +173,6 @@ export function withSentryBabelTransformer(config: MetroConfig): MetroConfig {
   };
 }
 
-type MetroCustomSerializer = Required<Required<MetroConfig>['serializer']>['customSerializer'] | undefined;
-
 function withSentryDebugId(config: MetroConfig): MetroConfig {
   const customSerializer = createSentryMetroSerializer(
     config.serializer?.customSerializer || undefined,

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

@@ -42,6 +42,7 @@ export function unstable_beforeAssetSerializationPlugin({
   return [...addDebugIdModule(premodules, debugIdModule)];
 }
 
+// TODO: deprecate this and afterwards rename to createSentryDebugIdSerializer
 /**
  * Creates a Metro serializer that adds Debug ID module to the plain bundle.
  * The Debug ID module is a virtual module that provides a debug ID in runtime.

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

@@ -0,0 +1,104 @@
+import { logger } from '@sentry/core';
+import * as fs from 'fs';
+import type { MetroConfig, Module } from 'metro';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import * as countLines from 'metro/src/lib/countLines';
+import * as path from 'path';
+
+import type { MetroCustomSerializer, VirtualJSOutput } from './utils';
+import { createSet } from './utils';
+
+const DEFAULT_OPTIONS_FILE_NAME = 'sentry.options.json';
+
+/**
+ * Loads Sentry options from a file in
+ */
+export function withSentryOptionsFromFile(config: MetroConfig, optionsFile: string | boolean): MetroConfig {
+  if (optionsFile === false) {
+    return config;
+  }
+
+  const { projectRoot } = config;
+  if (!projectRoot) {
+    // eslint-disable-next-line no-console
+    console.error('[@sentry/react-native/metro] Project root is required to load Sentry options from a file');
+    return config;
+  }
+
+  let optionsPath = path.join(projectRoot, DEFAULT_OPTIONS_FILE_NAME);
+  if (typeof optionsFile === 'string' && path.isAbsolute(optionsFile)) {
+    optionsPath = optionsFile;
+  } else if (typeof optionsFile === 'string') {
+    optionsPath = path.join(projectRoot, optionsFile);
+  }
+
+  const originalSerializer = config.serializer?.customSerializer;
+  if (!originalSerializer) {
+    // It's okay to bail here because we don't expose this for direct usage, but as part of `withSentryConfig`
+    // If used directly in RN, the user is responsible for providing a custom serializer first, Expo provides serializer in default config
+    // eslint-disable-next-line no-console
+    console.error(
+      '[@sentry/react-native/metro] `config.serializer.customSerializer` is required to load Sentry options from a file',
+    );
+    return config;
+  }
+
+  const sentryOptionsSerializer: MetroCustomSerializer = (entryPoint, preModules, graph, options) => {
+    const sentryOptionsModule = createSentryOptionsModule(optionsPath);
+    if (sentryOptionsModule) {
+      (preModules as Module[]).push(sentryOptionsModule);
+    }
+    return originalSerializer(entryPoint, preModules, graph, options);
+  };
+
+  return {
+    ...config,
+    serializer: {
+      ...config.serializer,
+      customSerializer: sentryOptionsSerializer,
+    },
+  };
+}
+
+function createSentryOptionsModule(filePath: string): Module<VirtualJSOutput> | null {
+  let content: string;
+  try {
+    content = fs.readFileSync(filePath, 'utf8');
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+      logger.debug(`[@sentry/react-native/metro] Sentry options file does not exist at ${filePath}`);
+    } else {
+      logger.error(`[@sentry/react-native/metro] Failed to read Sentry options file at ${filePath}`);
+    }
+    return null;
+  }
+
+  let parsedContent: Record<string, unknown>;
+  try {
+    parsedContent = JSON.parse(content);
+  } catch (error) {
+    logger.error(`[@sentry/react-native/metro] Failed to parse Sentry options file at ${filePath}`);
+    return null;
+  }
+
+  const minifiedContent = JSON.stringify(parsedContent);
+  const optionsCode = `var __SENTRY_OPTIONS__=${minifiedContent};`;
+
+  logger.debug(`[@sentry/react-native/metro] Sentry options added to the bundle from file at ${filePath}`);
+  return {
+    dependencies: new Map(),
+    getSource: () => Buffer.from(optionsCode),
+    inverseDependencies: createSet(),
+    path: '__sentry-options__',
+    output: [
+      {
+        type: 'js/script/virtual',
+        data: {
+          code: optionsCode,
+          lineCount: countLines(optionsCode),
+          map: [],
+        },
+      },
+    ],
+  };
+}

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

@@ -1,9 +1,11 @@
 import * as crypto from 'crypto';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import type { Module, ReadOnlyGraph, SerializerOptions } from 'metro';
+import type { MetroConfig, Module, ReadOnlyGraph, SerializerOptions } from 'metro';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import type CountingSet from 'metro/src/lib/CountingSet';
 
+export type MetroCustomSerializer = Required<Required<MetroConfig>['serializer']>['customSerializer'] | undefined;
+
 // Variant of MixedOutput
 // https://github.com/facebook/metro/blob/9b85f83c9cc837d8cd897aa7723be7da5b296067/packages/metro/src/DeltaBundler/types.flow.js#L21
 export type VirtualJSOutput = {