From 48afe178ad5ed163cfb08302c2c595565f3d6482 Mon Sep 17 00:00:00 2001 From: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com> Date: Tue, 28 Jan 2025 15:10:49 -0800 Subject: [PATCH 1/3] Add Custom Babel Transformers to Sentry Metro Plugin page --- .../react-native/manual-setup/metro.mdx | 45 ++++++++++++++++--- 1 file changed, 40 insertions(+), 5 deletions(-) diff --git a/docs/platforms/react-native/manual-setup/metro.mdx b/docs/platforms/react-native/manual-setup/metro.mdx index c2c119cfe1e66b..539c1cb4d6b138 100644 --- a/docs/platforms/react-native/manual-setup/metro.mdx +++ b/docs/platforms/react-native/manual-setup/metro.mdx @@ -1,10 +1,10 @@ --- title: Metro -description: "Learn about the Metro bundler and how to configure it for your your application with Sentry React Native SDK." +description: "Learn about the Metro bundler and how to configure it for your application with Sentry React Native SDK." sidebar_order: 3 --- -Sentry's React Native SDK package ships with a Sentry Metro Serializer which allows you to automatically generate Debug IDs for your applications' bundles. This is crucial for making source maps work properly with Sentry. +Sentry's React Native SDK package ships with a Sentry Metro Plugin which allows you to automatically generate Debug IDs for your applications' bundles. This is crucial for making source maps work properly with Sentry. The plugin also helps you to annotate React component names, so they are available in breadcrumbs or minimalize the bundle size by removing unused SDK features. This page will guide you through the process of setting up the Metro Plugin for your application. ## Prerequisities @@ -15,11 +15,11 @@ This page will guide you through the process of setting up the Metro Plugin for ## Configuration -The Sentry React Native SDK allows multiple ways to configure the Sentry Metro Serializer, depending on your current use of `customeSerializer` in your Metro configuration. +The Sentry React Native SDK allows multiple ways to configure the Sentry Metro Plugin, depending on your current use the Metro configuration. -### Use Sentry Metro Serializer +### Use Sentry Metro Plugin -The example below shows how to use the Sentry Metro Serializer if you don't have any `customSerializers` (the default configuration). +The example below shows how to use the Sentry Metro Plugin with the default config. ```javascript {tabTitle:React Native} {filename:metro.config.js} const { getDefaultConfig } = require("@react-native/metro-config"); @@ -37,6 +37,41 @@ const { getSentryExpoConfig } = require("@sentry/react-native/metro"); const config = getSentryExpoConfig(__dirname); ``` +### Add Custom Babel Transformer + +If you already have a custom transformer, ensure that Sentry Metro Plugin is applied as the last step. The Sentry Metro Plugin doesn't overwrite the existing configuration but extends or wraps existing properties. + +```javascript {tabTitle:React Native} {filename:metro.config.js} +const { getDefaultConfig } = require("@react-native/metro-config"); +const { withSentryConfig } = require('@sentry/react-native/metro'); + +const config = getDefaultConfig(__dirname); + +config.transformer = { + ...config.transformer, + babelTransformerPath: require.resolve('react-native-custom-transformer'), +}; + +module.exports = withSentryConfig(config); +``` + +```javascript {tabTitle:Expo} {filename:metro.config.js} +const { getDefaultConfig } = require('@expo/metro-config'); +const { getSentryExpoConfig } = require('@sentry/react-native/metro'); + +const config = getSentryExpoConfig(__dirname, { + getDefaultConfig: (projectRoot, options) => { + const config = getDefaultConfig(projectRoot, options); + + config.transformer = { + ...config.transformer, + babelTransformerPath: require.resolve('react-native-custom-transformer/expo'), + }; + return config; + }, +}); +``` + ### Wrap Your Custom Serializer If you already have a custom serializer, you can wrap it with the Sentry Metro Serializer and call `options.sentryBundleCallback` before serializing the bundle content. From fd7aad54a238fd249347aebea2e9987dbe218af9 Mon Sep 17 00:00:00 2001 From: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com> Date: Tue, 28 Jan 2025 15:13:13 -0800 Subject: [PATCH 2/3] Update metro.mdx --- docs/platforms/react-native/manual-setup/metro.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/platforms/react-native/manual-setup/metro.mdx b/docs/platforms/react-native/manual-setup/metro.mdx index 539c1cb4d6b138..7b616750c9d375 100644 --- a/docs/platforms/react-native/manual-setup/metro.mdx +++ b/docs/platforms/react-native/manual-setup/metro.mdx @@ -4,7 +4,7 @@ description: "Learn about the Metro bundler and how to configure it for your app sidebar_order: 3 --- -Sentry's React Native SDK package ships with a Sentry Metro Plugin which allows you to automatically generate Debug IDs for your applications' bundles. This is crucial for making source maps work properly with Sentry. The plugin also helps you to annotate React component names, so they are available in breadcrumbs or minimalize the bundle size by removing unused SDK features. +Sentry's React Native SDK package ships with a Sentry Metro Plugin which allows you to automatically generate Debug IDs for your applications' bundles. This is crucial for making source maps work properly with Sentry. The plugin also helps you to annotate React component names so they are available in breadcrumbs or minimalize the bundle size by removing unused SDK features. This page will guide you through the process of setting up the Metro Plugin for your application. ## Prerequisities @@ -15,7 +15,7 @@ This page will guide you through the process of setting up the Metro Plugin for ## Configuration -The Sentry React Native SDK allows multiple ways to configure the Sentry Metro Plugin, depending on your current use the Metro configuration. +The Sentry React Native SDK allows multiple ways to configure the Sentry Metro Plugin, depending on your current use of the Metro configuration. ### Use Sentry Metro Plugin From f8f1eb4c6671aef54847104cc8decf3b365c879e Mon Sep 17 00:00:00 2001 From: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com> Date: Mon, 3 Feb 2025 22:42:36 +0100 Subject: [PATCH 3/3] Apply suggestions from code review Co-authored-by: Alex Krawiec --- docs/platforms/react-native/manual-setup/metro.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/platforms/react-native/manual-setup/metro.mdx b/docs/platforms/react-native/manual-setup/metro.mdx index 7b616750c9d375..31a9cc2d3fa9ad 100644 --- a/docs/platforms/react-native/manual-setup/metro.mdx +++ b/docs/platforms/react-native/manual-setup/metro.mdx @@ -4,7 +4,7 @@ description: "Learn about the Metro bundler and how to configure it for your app sidebar_order: 3 --- -Sentry's React Native SDK package ships with a Sentry Metro Plugin which allows you to automatically generate Debug IDs for your applications' bundles. This is crucial for making source maps work properly with Sentry. The plugin also helps you to annotate React component names so they are available in breadcrumbs or minimalize the bundle size by removing unused SDK features. +Sentry's React Native SDK package ships with a Sentry Metro Plugin which allows you to automatically generate Debug IDs for your applications' bundles. This is crucial for making source maps work properly with Sentry. The plugin also helps you to annotate React component names so they are available in breadcrumbs and minimize the bundle size by removing unused SDK features. This page will guide you through the process of setting up the Metro Plugin for your application. ## Prerequisities @@ -17,7 +17,7 @@ This page will guide you through the process of setting up the Metro Plugin for The Sentry React Native SDK allows multiple ways to configure the Sentry Metro Plugin, depending on your current use of the Metro configuration. -### Use Sentry Metro Plugin +### Use the Sentry Metro Plugin The example below shows how to use the Sentry Metro Plugin with the default config. @@ -37,9 +37,9 @@ const { getSentryExpoConfig } = require("@sentry/react-native/metro"); const config = getSentryExpoConfig(__dirname); ``` -### Add Custom Babel Transformer +### Add a Custom Babel Transformer -If you already have a custom transformer, ensure that Sentry Metro Plugin is applied as the last step. The Sentry Metro Plugin doesn't overwrite the existing configuration but extends or wraps existing properties. +If you already have a custom transformer, ensure that the Sentry Metro Plugin is applied as the last step. The Sentry Metro Plugin doesn't overwrite the existing configuration, it extends or wraps existing properties. ```javascript {tabTitle:React Native} {filename:metro.config.js} const { getDefaultConfig } = require("@react-native/metro-config");