"Invalid location in sourcemap" for React ErrorBoundary

[Daniel15]

• Review the documentation: https://docs.sentry.io/
• Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• Use the latest release: https://github.com/getsentry/sentry-javascript/releases
• Provide a link to the affected event from your Sentry account
  N/A - This is an onpremise installation

Package + Version

• @sentry/browser
• @sentry/node
• raven-js
• raven-node (raven for node)
• other: @sentry/react

Version:

6.13.2

Description

The stack trace for the React error boundary appears to be using the minified file name, but the line numbers from the source map? at least when I test with the browser devtools open:

This is resulting in an "Invalid location in sourcemap" error in Sentry:

The regular (non-ErrorBoundary) exception is fine and the code is shown correctly, apart from saying "crashed in non-app" even though it IS app code, which is something else I need to figure out):

[kamilogorek]

apart from saying "crashed in non-app" even though it IS app code, which is something else I need to figure out):

Please see: #3853 (comment)

[AbhiPrasad]

What does the raw stacktrace look like? What about the actual components that are throwing the error? When I tested with #3532 before, empty class components like:

class Wow extends React.Component {
  render() {
    return <SomeElement />
  }
}

would have incorrect frames generated by info.componentStack (since it's the component stack is generated by throwing errors at each component call), but figured it wouldn't be that bad of a problem. As per facebook/react#18561:

The idea is to throw as early as possible. Ideally it's the first line such as the built-in super call of a class or the destructuring of props in the argument position. It could however be slightly later which might be slightly confusing to see the line of the first hook for example. Source code aware tooling could adjust this number to the previous function definition before the offset. If it doesn't throw at all such as if no hooks and no props are used, then we can't figure out the line number.

I think we should definitely figure this out though since Sentry is source code aware, I'm sure there's a way we can "fix" the component stack stack traces.

[Daniel15]

What does the raw stacktrace look like?

Seems like some of the frames are wrong in the raw stack trace too...

React ErrorBoundary Error: hello world React
  at t(dist/663-a9ffdf83c1928933697a.min.js:28:22)
  at CalculatorVCE(dist/663-a9ffdf83c1928933697a.min.js:43:16)
  at n(webpack://atarcalc/./src/components/CalculatorVCE.tsx:12:22)
  at M(webpack://atarcalc/./src/containers/CalculatorContainer.tsx:28:11)
  at shouldLoad(webpack://atarcalc/./src/LazySentry/LazySentryErrorBoundary.tsx:34:1)

Error: hello world React
  at render(webpack://atarcalc/./src/components/Results.tsx:35:13)
  at qi(webpack://atarcalc/./node_modules/react-dom/cjs/react-dom.production.min.js:187:188)
  at pi(webpack://atarcalc/./node_modules/react-dom/cjs/react-dom.production.min.js:186:173)
  at ck(webpack://atarcalc/./node_modules/react-dom/cjs/react-dom.production.min.js:269:427)
  at bk(webpack://atarcalc/./node_modules/react-dom/cjs/react-dom.production.min.js:250:347)
  at ak(webpack://atarcalc/./node_modules/react-dom/cjs/react-dom.production.min.js:250:278)
  at Tj(webpack://atarcalc/./node_modules/react-dom/cjs/react-dom.production.min.js:250:138)
  at Lj(webpack://atarcalc/./node_modules/react-dom/cjs/react-dom.production.min.js:243:163)
  at b(webpack://atarcalc/./node_modules/react-dom/cjs/react-dom.production.min.js:123:115)
  at Nf(webpack://atarcalc/./node_modules/scheduler/cjs/scheduler.production.min.js:18:343)
  at gg(webpack://atarcalc/./node_modules/react-dom/cjs/react-dom.production.min.js:122:325)
  at jg(webpack://atarcalc/./node_modules/react-dom/cjs/react-dom.production.min.js:123:61)
  at ig(webpack://atarcalc/./node_modules/react-dom/cjs/react-dom.production.min.js:122:428)
  at Jg(webpack://atarcalc/./node_modules/react-dom/cjs/react-dom.production.min.js:237:203)
  at enqueueSetState(webpack://atarcalc/./node_modules/react-dom/cjs/react-dom.production.min.js:133:211)
  at setState(webpack://atarcalc/./node_modules/react/cjs/react.production.min.js:12:369)
  at ? (webpack://atarcalc/./src/components/Results.tsx:52:10)

For the ErrorBoundary Error, the top two frames' line/column numbers are for the source files, but the file name is the minified file:

  at t(dist/663-a9ffdf83c1928933697a.min.js:28:22)
  at CalculatorVCE(dist/663-a9ffdf83c1928933697a.min.js:43:16)

I just noticed that the remaining frames are correct:

  at n(webpack://atarcalc/./src/components/CalculatorVCE.tsx:12:22)
  at M(webpack://atarcalc/./src/containers/CalculatorContainer.tsx:28:11)
  at shouldLoad(webpack://atarcalc/./src/LazySentry/LazySentryErrorBoundary.tsx:34:1)

However, they're being filtered out by the "App Only" filter that's selected by default. Hopefully fixed by getsentry/sentry#28859

[smeubank]

@AbhiPrasad is this purely an SDK issue?

[HazAT]

This should be fixed, we made some changes to internal source map processing.
Please re-open if not.