Debug ID not found warning in Expo

[crrobinson14]

Describe the bug

[Datadog SDK] Debug ID not found. Are you using @datadog/mobile-react-native/metro config? is reported in the console in Expo.

Reproduction steps

1. Scaffold an empty Expo project (with version 53.0.17 but it doesn't matter.)
2. Follow the Datadog installation instructions at https://docs.datadoghq.com/real_user_monitoring/mobile_and_tv_monitoring/react_native/setup/expo/.
3. Run the app.
4. Open the Debugger.
5. Observe the warning noted above at the ContextNavigator component just under ExpoRoot.

NOTE: Unlike with React Native Bare, the Expo installation instructions do not call for a Metro plugin/config step. One would think this is the purpose of the expo-datadog plugin being added to app.json.

SDK logs

 WARN  [Datadog SDK] Debug ID not found. Are you using @datadog/mobile-react-native/metro config?```

### Expected behavior

No error is reported.

### Affected SDK versions

expo-datadog 53.0.0, @datadog/mobile-react-native 2.9.1

### Latest working SDK version

N/A

### Did you confirm if the latest SDK version fixes the bug?

Yes

### Integration Methods

Yarn

### React Native Version

0.79.5

### Package.json Contents

_No response_

### iOS Setup

_No response_

### Android Setup

_No response_

### Device Information

_No response_

### Other relevant information

_No response_

[trcoffman]

It is documented here but it doesn't work, I am doing what the docs say & configuring metro but I still don't get a debug ID in my bundles and my errors are not deobfuscated: https://docs.datadoghq.com/real_user_monitoring/error_tracking/mobile/expo/#use-datadog-expo-configuration

[wcastand]

on the latest and still getting this warning too if that can help this is my metro config:

const { wrapWithReanimatedMetroConfig } = require("react-native-reanimated/metro-config")
const { getDatadogExpoConfig } = require("@datadog/mobile-react-native/metro")

const config = getDatadogExpoConfig(__dirname, {
	annotateReactComponents: true,
	isCSSEnabled: true,
})

config.transformer.babelTransformerPath = require.resolve("@lingui/metro-transformer/expo")
config.resolver.assetExts.push("svg")

config.resolver.sourceExts.push("mjs")
config.resolver.sourceExts.push("po")
config.resolver.sourceExts.push("pot")

config.resolver.unstable_enablePackageExports = true
config.resolver.resolveRequest = (context, moduleImport, platform) => {
	switch (moduleImport) {
		case "@lingui/core":
		case "@lingui/react":
			return { filePath: require.resolve(moduleImport), type: "sourceFile" }
		default:
			return context.resolveRequest(context, moduleImport, platform)
	}
}

module.exports = wrapWithReanimatedMetroConfig(config)

[sbarrio]

Hi @crrobinson14, thanks for reaching out to us.

We deployed several improvements regarding this on 2.10.0, have you tested it with that version?, Also, it's important to pair this with @datadog/[email protected].

Could you also please share your metro config configuration file?

@wcastand, regarding this:

on the latest and still getting this warning too if that can help this is my metro config:

Are you seeing the warning even though symbolication is working correctly, or is symbolication not working as well?

For context, the Debug ID is purposely never injected in dev mode, but only when the bundle is generated for release. The warning will always show up, even if the metro config is configured correctly, which is something we are looking to fix so it is less noisy.

Thanks for your support 🙇

[wcastand]

i think it's working as intended, i get the warning in dev mode like you said.

for the symbolication, i think i already talk with your support about it. it seems to work sometimes but even when it works, it doesn't show the proper sourcemaps yet.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity and has the awaiting-response label.

It will be closed if no further activity occurs within 3 days.

[loick]

👋 Hi everyone, just making sure this issue is still active, I'm having the same problem on my end.

I noticed the jsdoc on the withDatadogMetroConfig method, but I'm not really sure what I'm supposed to do with this.

Note: If a custom serializer is used and config.useDebugId is set to true (as it is by default), you must manually invoke options.datadogBundleCallback within the serializer.

Here is my config if it can help, but indeed I seem to only be getting this error on dev:

// @ts-nocheck

const { getDefaultConfig } = require('expo/metro-config')
const { withDatadogMetroConfig } = require('@datadog/mobile-react-native/metro')
const path = require('node:path')

// Find the project and workspace directories
const projectRoot = __dirname
const monorepoRoot = path.resolve(projectRoot, '../..')

const config = getDefaultConfig(projectRoot)

const { transformer, resolver, watchFolders } = config

// 1. Watch all files within the monorepo
config.watchFolders = [...watchFolders, monorepoRoot]

// 2. Let Metro know where to resolve packages and in what order
config.resolver = {
  ...resolver,
  assetExts: resolver.assetExts.filter((ext) => ext !== 'svg'),
  sourceExts: [...resolver.sourceExts, 'svg'],
  nodeModulesPaths: [
    ...resolver.nodeModulesPaths,
    path.resolve(projectRoot, 'node_modules'),
    path.resolve(monorepoRoot, 'node_modules'),
  ],

  // Enable support for Node.js `exports` property in `package.json` files.
  // Without this, the monorepo packages are not recognized.
  unstable_enablePackageExports: true,
}

config.transformer = {
  ...transformer,
  babelTransformerPath: require.resolve('react-native-svg-transformer/expo'),
}

// Apply Datadog metro config to generate Debug ID
module.exports = withDatadogMetroConfig(config)

[cdn34dd]

@loick what exactly is the error you're getting ? As @sbarrio replied this warning showing in dev is something we're looking to fix, but it should not have any impact on anything else.

[loick]

No error indeed, this is the warning as well 👍

[mmichels-brex]

I'm also getting this, running the latest SDK version