Feeling bold?
Sentry's Docs BotAsk A Bot
Product
API
Changelog
Sandbox
Sign In

Metro

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.

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 example below shows how to use the Sentry Metro Serializer if you don't have any customSerializers (the default configuration).

Copied
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);

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.

Copied
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:

Copied
export type Bundle = {
  modules: Array<[id: number, code: string]>;
  post: string;
  pre: string;
};

  • Sentry Metro Serializer can't add Debug ID to the Hermes Composed Source Maps. Please see 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.
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").
Suggest an edit to this page   |  Contribute to Docs   |  Report a problem
Package:
npm:@sentry/react-native
Version:
5.22.0
Repository:
https://github.com/getsentry/sentry-react-native