From 59e122d9024064ea3c03c1e0966145e11fe59a1a Mon Sep 17 00:00:00 2001 From: Krystof Woldrich Date: Thu, 7 Dec 2023 17:18:54 +0100 Subject: [PATCH 1/3] feat(rn): Add React Native Metro Bundler page --- .../react-native/manual-setup/metro.mdx | 98 +++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 src/platforms/react-native/manual-setup/metro.mdx diff --git a/src/platforms/react-native/manual-setup/metro.mdx b/src/platforms/react-native/manual-setup/metro.mdx new file mode 100644 index 0000000000000..b3936a1d8dc7b --- /dev/null +++ b/src/platforms/react-native/manual-setup/metro.mdx @@ -0,0 +1,98 @@ +--- +title: Metro +sidebar_order: 3 +redirect_from: + - /platforms/react-native/advanced-setup/ +description: "Learn about the Metro bundler and how to configure it for your your application with Sentry React Native SDK." +--- + +Sentry React Native SDK package ships with a Sentry Metro Serializer which allows you to automatically generated Debug IDs for your applications bundles. This is crucial for source maps to work properly with Sentry. +This page will guide you through the process of setting up the Metro Plugin for your application. + +## Prerequisities + +- [Sign up for an account](https://sentry.io/signup/) +- [Install Sentry React Native SDK](/platforms/react-native) version 5.11.0 or newer + - Expo is supported from the SDK version 5.16.0-alpha.1 + +## 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. + +### Use Sentry Metro Serializer + +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 config = { + serializer: { + customSerializer: createSentryMetroSerializer(), + }, +}; + +module.exports = mergeConfig(getDefaultConfig(__dirname), 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 finalConfig = mergeConfig(config, sentryConfig); +module.exports = withExpoSerializers(finalConfig); +``` + +### 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. + +```javascript {tabTitle:React Native} +const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config"); +const { createSentryMetroSerializer } = require("@sentry/react-native/dist/js/tools/sentryMetroSerializer"); + +const myCustomSerializer = (entryPoint, preModules, graph, options) => { + let bundle = perapreBundle(entryPoint, preModules, graph, options); + if (options.sentryBundleCallback) { + // Callback adds Sentry Debug IDs module to the bundle + bundle = options.sentryBundleCallback(bundle); + } + const code = createCode(bundle); + const map = createSourceMap(); + return { code, map }; +}; + +const config = { + serializer: { + customSerializer: createSentryMetroSerializer(myCustomSerializer), + }, +}; + +module.exports = mergeConfig(getDefaultConfig(__dirname), config); +``` + +Expected bundle intermediate structure: + +```typescript +export type Bundle = { + modules: Array<[id: number, code: string]>; + post: string; + pre: string; +}; +``` + +## Throubleshooting + +- Sentry Metro Serializer can't add Debug ID to the Hermes Composed Source Maps. Please see [Manual Upload With Hermes](/platforms/react-native/sourcemaps#manual-upload-with-hermes) guide on how to add Debug ID to the Hermes Composed Source Maps. +- If you see `Debug ID was not found in the bundle.` error message the `sentryBundleCallback` was not called by your custom serializer. From 4a9dfd0bb5168316c5cc711728874020e29b868d Mon Sep 17 00:00:00 2001 From: "getsantry[bot]" <66042841+getsantry[bot]@users.noreply.github.com> Date: Thu, 7 Dec 2023 16:21:35 +0000 Subject: [PATCH 2/3] [getsentry/action-github-commit] Auto commit --- .../react-native/manual-setup/metro.mdx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/platforms/react-native/manual-setup/metro.mdx b/src/platforms/react-native/manual-setup/metro.mdx index b3936a1d8dc7b..e6517ce91d243 100644 --- a/src/platforms/react-native/manual-setup/metro.mdx +++ b/src/platforms/react-native/manual-setup/metro.mdx @@ -25,7 +25,9 @@ The example below shows how to use the Sentry Metro Serializer if you don't have ```javascript {tabTitle:React Native} const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config"); -const { createSentryMetroSerializer } = require("@sentry/react-native/dist/js/tools/sentryMetroSerializer"); +const { + createSentryMetroSerializer, +} = require("@sentry/react-native/dist/js/tools/sentryMetroSerializer"); const config = { serializer: { @@ -37,10 +39,12 @@ module.exports = mergeConfig(getDefaultConfig(__dirname), config); ``` ```javascript {tabTitle:Expo} -const { mergeConfig } = require('metro'); -const { getDefaultConfig } = require('expo/metro-config'); +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 { + withExpoSerializers, +} = require("@expo/metro-config/build/serializer/withExpoSerializers"); const config = getDefaultConfig(__dirname); @@ -60,7 +64,9 @@ 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 { + createSentryMetroSerializer, +} = require("@sentry/react-native/dist/js/tools/sentryMetroSerializer"); const myCustomSerializer = (entryPoint, preModules, graph, options) => { let bundle = perapreBundle(entryPoint, preModules, graph, options); From 529462377ff3e847be532ef7bb13476eadb46902 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kry=C5=A1tof=20Wold=C5=99ich?= <31292499+krystofwoldrich@users.noreply.github.com> Date: Fri, 15 Dec 2023 19:24:25 +0100 Subject: [PATCH 3/3] Apply suggestions from code review Co-authored-by: Liza Mock --- src/platforms/react-native/manual-setup/metro.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/platforms/react-native/manual-setup/metro.mdx b/src/platforms/react-native/manual-setup/metro.mdx index e6517ce91d243..f9f5f4b591ddf 100644 --- a/src/platforms/react-native/manual-setup/metro.mdx +++ b/src/platforms/react-native/manual-setup/metro.mdx @@ -6,18 +6,18 @@ redirect_from: description: "Learn about the Metro bundler and how to configure it for your your application with Sentry React Native SDK." --- -Sentry React Native SDK package ships with a Sentry Metro Serializer which allows you to automatically generated Debug IDs for your applications bundles. This is crucial for source maps to work properly with Sentry. +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. This page will guide you through the process of setting up the Metro Plugin for your application. ## Prerequisities - [Sign up for an account](https://sentry.io/signup/) - [Install Sentry React Native SDK](/platforms/react-native) version 5.11.0 or newer - - Expo is supported from the SDK version 5.16.0-alpha.1 + - Expo is supported from SDK version 5.16.0-alpha.1 ## 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 Serializer, depending on your current use of `customeSerializer` in your Metro configuration. ### Use Sentry Metro Serializer @@ -58,7 +58,7 @@ const finalConfig = mergeConfig(config, sentryConfig); module.exports = withExpoSerializers(finalConfig); ``` -### Wrap your custom serializer +### 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. @@ -98,7 +98,7 @@ export type Bundle = { }; ``` -## Throubleshooting +## Troubleshooting - Sentry Metro Serializer can't add Debug ID to the Hermes Composed Source Maps. Please see [Manual Upload With Hermes](/platforms/react-native/sourcemaps#manual-upload-with-hermes) guide on how to add Debug ID to the Hermes Composed Source Maps. - If you see `Debug ID was not found in the bundle.` error message the `sentryBundleCallback` was not called by your custom serializer.