feat(expo): Add withSentryExpoSerializers for easy metro configuration

CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## Unreleased
+
+### Features
+
+- Add `withSentryExpoSerializers` for easy configurable `metro.config.js` ([#3454](https://github.com/getsentry/sentry-react-native/pull/3454))
+
+  ```js
+  const { getDefaultConfig } = require('expo/metro-config');
+  const { withSentryExpoSerializers } = require("@sentry/react-native/metro");
+
+  const config = getDefaultConfig(__dirname);
+  module.exports = withSentryExpoSerializers(config);
+  ```
+
+  Note that this will remove any existing `customSerializer`. Guide for advanced setups [can be found here](https://docs.sentry.io/platforms/react-native/manual-setup/metro).
+
+### Fixes
+
+- Expo SDK minimum version is 49 ([#3453](https://github.com/getsentry/sentry-react-native/pull/3453))
+
 ## 5.16.0-alpha.1
 
 ### Features

package.json

@@ -56,9 +56,9 @@
     "When bumping make sure to update the version of react, i.e:  https://github.com/facebook/react-native/blob/v0.56.0/package.json"
   ],
   "peerDependencies": {
+    "expo": ">=49.0.0",
     "react": ">=17.0.0",
-    "react-native": ">=0.65.0",
-    "expo": ">=47.0.0"
+    "react-native": ">=0.65.0"
   },
   "dependencies": {
     "@sentry/browser": "7.81.1",
@@ -71,6 +71,8 @@
     "@sentry/utils": "7.81.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.23.5",
+    "@expo/metro-config": "^0.10.7",
     "@sentry-internal/eslint-config-sdk": "7.81.1",
     "@sentry-internal/eslint-plugin-sdk": "7.81.1",
     "@sentry-internal/typescript": "7.80.0",
@@ -85,14 +87,14 @@
     "eslint": "^7.6.0",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-native": "^3.8.1",
-    "expo": "^47.0.0",
+    "expo": "^49.0.21",
     "expo-module-scripts": "^3.1.0",
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
     "metro": "0.76",
     "prettier": "^2.0.5",
     "react": "18.2.0",
-    "react-native": "0.72.4",
+    "react-native": "0.72.6",
     "replace-in-file": "^7.0.1",
     "rimraf": "^4.1.1",
     "ts-jest": "^29.1.1",

src/js/tools/sentryMetroSerializer.ts

@@ -1,5 +1,6 @@
 import * as crypto from 'crypto';
-import type { MixedOutput, Module } from 'metro';
+import type { MetroConfig, MixedOutput, Module } from 'metro';
+import { mergeConfig } from 'metro';
 import * as countLines from 'metro/src/lib/countLines';
 
 import type { Bundle, MetroSerializer, MetroSerializerOutput, SerializedBundle, VirtualJSOutput } from './utils';
@@ -14,6 +15,37 @@ const PRELUDE_MODULE_PATH = '__prelude__';
 const SOURCE_MAP_COMMENT = '//# sourceMappingURL=';
 const DEBUG_ID_COMMENT = '//# debugId=';
 
+/**
+ * This function will overwrite any existing custom serializer with default Expo and Sentry serializers.
+ *
+ * To use custom serializers, use `createSentryMetroSerializer(customSerializer)` instead.
+ */
+export function withSentryExpoSerializers(config: MetroConfig): MetroConfig {
+  const { withExpoSerializers } = loadExpoSerializersModule();
+
+  const sentryConfig = {
+    serializer: {
+      customSerializer: createSentryMetroSerializer(),
+    },
+  } as MetroConfig;
+
+  const finalConfig = mergeConfig(config, sentryConfig);
+  return withExpoSerializers(finalConfig);
+}
+
+function loadExpoSerializersModule(): {
+  withExpoSerializers: (config: MetroConfig) => MetroConfig;
+} {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    return require('@expo/metro-config/build/serializer/withExpoSerializers');
+  } catch (e) {
+    throw new Error(
+      'Unable to load `withExpoSerializers` from `@expo/metro-config`. Make sure you have Expo installed.',
+    );
+  }
+}
+
 /**
  * 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.