feat(rn): Update metro.config.js samples to use the latest withSent…

…ryConfig fucntion (#9874)
getsentry · May 16, 2024 · a843665 · a843665
1 parent 7fbe5a4
commit a843665
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 59 deletions.
diff --git a/docs/platforms/react-native/manual-setup/metro.mdx b/docs/platforms/react-native/manual-setup/metro.mdx
@@ -10,7 +10,7 @@ This page will guide you through the process of setting up the Metro Plugin for
 ## Prerequisities
 
 - [Sign up for an account](https://sentry.io/signup/)
-- [Install Sentry React Native SDK](/platforms/react-native) version 5.11.0 or newer
+- [Install Sentry React Native SDK](/platforms/react-native) version 5.17.0 or newer
   - Expo is supported from SDK version 5.16.0-alpha.1
 
 ## Configuration
@@ -22,38 +22,19 @@ The Sentry React Native SDK allows multiple ways to configure the Sentry Metro S
 The example below shows how to use the Sentry Metro Serializer if you don't have any `customSerializers` (the default configuration).
 
 ```javascript {tabTitle:React Native}
-const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
-const {
-  createSentryMetroSerializer,
-} = require("@sentry/react-native/dist/js/tools/sentryMetroSerializer");
+const { getDefaultConfig } = require("@react-native/metro-config");
+const { withSentryConfig } = require('@sentry/react-native/metro');
 
-const config = {
-  serializer: {
-    customSerializer: createSentryMetroSerializer(),
-  },
-};
-
-module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+const config = getDefaultConfig(__dirname);
+module.exports = withSentryConfig(config);
 ```
 
 ```javascript {tabTitle:Expo}
-const { mergeConfig } = require("metro");
-const { getDefaultConfig } = require("expo/metro-config");
-const { createSentryMetroSerializer } = require("@sentry/react-native/metro");
-const {
-  withExpoSerializers,
-} = require("@expo/metro-config/build/serializer/withExpoSerializers");
-
-const config = getDefaultConfig(__dirname);
-
-const sentryConfig = {
-  serializer: {
-    customSerializer: createSentryMetroSerializer(),
-  },
-};
+// const { getDefaultConfig } = require("expo/metro-config");
+const { getSentryExpoConfig } = require("@sentry/react-native/metro");
 
-const finalConfig = mergeConfig(config, sentryConfig);
-module.exports = withExpoSerializers(finalConfig);
+// const config = getDefaultConfig(__dirname);
+const config = getSentryExpoConfig(config, {});
 ```
 
 ### Wrap Your Custom Serializer
@@ -62,9 +43,7 @@ If you already have a custom serializer, you can wrap it with the Sentry Metro S
 
 ```javascript {tabTitle:React Native}
 const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
-const {
-  createSentryMetroSerializer,
-} = require("@sentry/react-native/dist/js/tools/sentryMetroSerializer");
+const { withSentryConfig } = require('@sentry/react-native/metro');
 
 const myCustomSerializer = (entryPoint, preModules, graph, options) => {
   let bundle = perapreBundle(entryPoint, preModules, graph, options);
@@ -79,11 +58,11 @@ const myCustomSerializer = (entryPoint, preModules, graph, options) => {
 
 const config = {
   serializer: {
-    customSerializer: createSentryMetroSerializer(myCustomSerializer),
+    customSerializer: myCustomSerializer,
   },
 };
 
-module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+module.exports = withSentryConfig(mergeConfig(getDefaultConfig(__dirname), config));
 ```
 
 Expected bundle intermediate structure:

diff --git a/docs/platforms/react-native/sourcemaps/uploading/hermes.mdx b/docs/platforms/react-native/sourcemaps/uploading/hermes.mdx
@@ -16,19 +16,11 @@ To manually upload source maps, first, you need to generate the source maps and
 Start with adding Sentry React Native Metro Plugin to your `metro.config.js`:
 
 ```javascript {filename="metro.config.js"}
-const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
-const {
-  createSentryMetroSerializer,
-} = require("@sentry/react-native/dist/js/tools/sentryMetroSerializer");
-
-const config = {
-  serializer: {
-    customSerializer: createSentryMetroSerializer(),
-  },
-};
-
-const m = mergeConfig(getDefaultConfig(__dirname), config);
-module.exports = m;
+const { getDefaultConfig } = require("@react-native/metro-config");
+const { withSentryConfig } = require('@sentry/react-native/metro');
+
+const config = getDefaultConfig(__dirname);
+module.exports = withSentryConfig(config);
 ```
 
 Generate the React Native Packager (Metro) bundle and source maps:

diff --git a/docs/platforms/react-native/sourcemaps/uploading/jsc.mdx b/docs/platforms/react-native/sourcemaps/uploading/jsc.mdx
@@ -16,19 +16,11 @@ To manually upload source maps, first, you need to generate the source maps and
 Start by adding Sentry React Native Metro Plugin to your `metro.config.js`:
 
 ```javascript {filename="metro.config.js"}
-const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
-const {
-  createSentryMetroSerializer,
-} = require("@sentry/react-native/dist/js/tools/sentryMetroSerializer");
-
-const config = {
-  serializer: {
-    customSerializer: createSentryMetroSerializer(),
-  },
-};
-
-const m = mergeConfig(getDefaultConfig(__dirname), config);
-module.exports = m;
+const { getDefaultConfig } = require("@react-native/metro-config");
+const { withSentryConfig } = require('@sentry/react-native/metro');
+
+const config = getDefaultConfig(__dirname);
+module.exports = withSentryConfig(config);
 ```
 
 Generate the React Native Packager (Metro) bundle and source maps: