dd-sdk-reactnative icon indicating copy to clipboard operation
dd-sdk-reactnative copied to clipboard

[RUM-8382] Introduce Datadog Metro Config for Debug ID injection in RUM Errors

Open marco-saia-datadog opened this issue 7 months ago • 1 comments

Overview

This PR introduces a Metro configuration that automates the generation of unique Debug IDs for RN bundles. The main objective is to enable more consistent unminification of stack traces on the backend.

What's included

  • Automatic Debug ID Generation:
    Each bundle is assigned a unique Debug ID at build time.

  • Runtime Debug ID Injection:
    A code snippet is injected into the bundle, exposing the Debug ID at runtime so it can be attached to the RUM Error Context as _dd.debug_id.

  • Bundle Debug ID Comment:
    The Debug ID is added as a comment at the end of the bundle file:
    //# debugId=[DEBUG-ID]

  • Source Map Injection:
    The Debug ID is added as a top-level debugId property in the generated sourcemaps.

  • Runtime Debug ID injection in Expo:
    Introduced Expo config with getDatadogExpoConfig to inject the Debug ID code snippet for runtime consumption.

Usage in Metro Config

Vanilla React Native

const { getDefaultConfig } = require('@react-native/metro-config');
const { withDatadogMetroConfig } = require('@datadog/mobile-react-native/metro');

module.exports = withDatadogMetroConfig(getDefaultConfig(__dirname));

Expo

const { getDatadogExpoConfig } = require('@datadog/mobile-react-native/metro');

const config = getDatadogExpoConfig(__dirname);

module.exports = config;

Additional Notes

  • The process is skipped when hot reloading is enabled
  • If the //# sourceMappingURL=... comment is found in the bundle, the debugId comment will be inserted right before it
  • getDatadogExpoConfig accepts custom options, and the default Expo config can be overriden

PR Checklist

  • [ ] Feature or bugfix MUST have appropriate tests
  • [ ] Make sure you discussed the feature or bugfix with the maintaining team in an Issue
  • [ ] Make sure each commit and the PR mention the Issue number (cf the CONTRIBUTING doc)
  • [ ] If this PR is auto-generated, please make sure also to manually update the code related to the change

marco-saia-datadog avatar Apr 23 '25 07:04 marco-saia-datadog

Datadog Report

Branch report: marcosaia/RUM-8382/metro-plugin Commit report: 9e6523c Test service: dd-sdk-reactnative

:white_check_mark: 0 Failed, 680 Passed, 1 Skipped, 5.53s Total Time

There is a problem on iOS new architecture caused by the new explicit exports in package.json:

    "exports": {
        ".": {
            "import": "./lib/module/index.js",
            "require": "./lib/commonjs/index.js",
            "types": "./lib/typescript/index.d.ts"
        },
        "./metro": {
            "import": "./lib/module/metro.js",
            "require": "./lib/commonjs/metro.js",
            "types": "./lib/typescript/metro.d.ts"
        }
  }

I have looked into it, and it is caused by how the podfile react_native_pods.rb script looks for the dependencies for codegen:

https://github.com/facebook/react-native/blob/2e10ba945f6f2dca8d8cf1bb0db1d67fd50f2235/packages/react-native/scripts/codegen/generate-artifacts-executor.js#L241

      const configFilePath = require.resolve(
        path.join(dependency, 'package.json'),
        {paths: [projectRoot]},
      );

By adding a debug log we get:

[DD-DEBUG] Error: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './package.json' is not defined by <redacted>/dd-sdk-reactnative/example-new-architecture/node_modules/@datadog/mobile-react-native/package.json

I have modified the exports to explicitly include package.json, and the issue seems to be resolved now.

marco-saia-datadog avatar Jun 18 '25 14:06 marco-saia-datadog