React 17 error boundary

Till React 16.x , sentry blog posts have suggested to send the componentStack in extra field where it gets rendered as a string. This worked fine because anyway the component stack wasn’t clickable. With react 17, this is going to change. The component stack is actually going to have correct stack trace which can be traced back to the exact file names. so even in prod, the component stack can be used to figure out the source file where the component originated.

I am curious to understand how sentry would handle this. I understand by default we can still get this stack in the extra property as a string, but I guess this can be greatly improved. Would sentry apply source maps to the extra property so that we can get the correct source for the component stack in prod ?
Can it actually treat the component stack trace same/similar as it treats the error stack ?

Are there going to be some new ways of sending this info to sentry now?

1 Like

I too am here looking for answers on this. With the component stack being an actual stack trace now, is there any way we can use source maps to decode it on Sentry?

Hey! With the Sentry React SDK v6.4.0, we’ve added support for applying source maps to the React Error Boundary generated componentStack. sentry-javascript/CHANGELOG.md at a626e6f39916366a04cd9b9e91826147c08e4770 · getsentry/sentry-javascript · GitHub

1 Like