Skip to content

reactComponentAnnotation drops the directory from source-map sources (missing sourceFileName) #23561

Description

@ryanrho-mercor

Which SDK are you using?

@sentry/nextjs

SDK Version

10.67.0 (@sentry/bundler-plugins 10.67.0, @sentry/webpack-plugin 5.4.0)

Framework Version

Next.js 15.5.9, webpack build (not Turbopack)

What happened

With reactComponentAnnotation.enabled: true, every annotated .jsx/.tsx module loses its directory in the emitted browser source map. It shows up as:

webpack://_N_E/AppProviders.tsx

instead of:

webpack://_N_E/./src/shared/providers/AppProviders.tsx

.ts modules are unaffected, since the transform skips them — which is what makes the pattern easy to spot: in one production build, 383 of 400 .tsx sources were bare filenames while 1,052 .ts sources kept full paths. Disabling reactComponentAnnotation gives 973 .tsx sources with correct paths and 0 bare ones, confirming the transform is the cause.

Cause

createComponentNameAnnotateHooks (packages/bundler-plugins, build/{esm,cjs}/core/index.js in the published package) calls Babel without sourceFileName:

const result = await transformAsync(code, {
  plugins: [[plugin, { ignoredComponents }]],
  filename: id,
  parserOpts: { ... },
  generatorOpts: { decoratorsBeforeExport: true },
  sourceMaps: true,
});

When sourceFileName is omitted, Babel defaults the emitted map's sources to path.basename(filename). The loader hands that map to the bundler, which propagates the basename into the final .js.map.

Suggested fix

Pass sourceFileName alongside filename, using the query/hash-stripped id the function already computes:

  filename: id,
  sourceFileName: idWithoutQueryAndHash,

Verified locally as a patch: .tsx sources with real paths went 17 → 973, bare filenames 383 → 0, no absolute paths leaked into the maps, and data-sentry-component attributes were still emitted in the same number of chunks. Happy to open a PR if useful.

Note the same call exists in @sentry/bundler-plugin-core (used by the Turbopack loader path), so it likely needs the same change.

Impact

Any tool that maps browser source maps back to repository files loses those files. We hit it with a coverage tool that could not attribute ~580 files and reported the result as an underestimate; the same path loss would affect anything else resolving frames to source paths.

Expected result

Annotated .jsx/.tsx modules keep the same source paths in the emitted source maps as they have with reactComponentAnnotation disabled.

Metadata

Metadata

Assignees

Projects

Status
No status

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions