feat(rn): Add React Native Metro Bundler page (#8662)

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>
Co-authored-by: Liza Mock <[email protected]>

src/platforms/react-native/manual-setup/metro.mdx

@@ -0,0 +1,104 @@
+---
+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'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 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;
+};
+```
+
+## 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.