React Component Stack Trace Development only?

user_12152982 0
Viewed 7134

I am trying to learn React with Typescript and seeking advice. I have successfully managed to get a Webpack build working for development and production (minified js with source-map) environments.

I have an error boundary component implementing the componentDidCatch method with signature:

componentDidCatch(error: Error, info: ErrorInfo)

I have managed to render a readable stack trace from the minified bundle and source map using sourcemapped-stacktrace. This works fine for the Error object.

According to the React documentation a component stack trace should be logged/rendered in a development environment only.

Does the component stack trace correspond to the componentStack property of the ErrorInfo object that is an argument in the componentDidCatch method?

If so, is it considered best practice for an error boundary to only log/display ErrorInfo.componentStack when an environment variable is set with a value indicating that a development environment is running?

Currently, I am displaying/logging ErrorInfo.componentStack for both development and production builds. In production it only displays minified stack trace, despite using
a package, such as sourcemapped-stacktrace.

typescript reactjs error-handling
1 Answers

To answer your question, I think it's fine to print the component stack trace in a production build if that is acceptable in your app, but I think many people would prefer to send it to some kind of error logging service in production, which is why it's not done automatically, but it's up to you to decide if you want to print it for your app.

For anyone else who stumbles upon this question when searching for whether or not it is possible to see the full non-minified component stack trace, I think that is not possible: https://github.com/facebook/create-react-app/issues/3753

I can confirm it works as intended. I don't have any great solution: shipping component names in the bundle would increase its size (which is non-ideal), and the browser doesn't let us get the source location of an arbitrary function to display it.

If you can reproduce the same particular deployment, you can open the website/app and then use React DevTools to get a rough idea of where the problem might be (which would also show minified names). Combined with reporting a URL, this could be enough for debugging the issue.

Another possible solution is for you to explicitly set displayName on a few most important components (e.g. for routes) which should give you the most information you can get.

In short, the actual error stack trace is different than the component stack trace, and there's no way for react to get the non-minified component stack trace

user_13476490
Related