Unusable component strack trace in production build

[matej-prokop]

When ErrorBoundary catch an error in production version of my application (produced by react-scripts build), component stack trace within info parameter of componentDidCatch(error, info) is following:

    in t
    in m
    in Connect(m)
    in div
    in styled.div
    in div
    in styled.div
    in ot
    in f
    in Connect(f)
    in t
    in n

As you can see it is not very helpful. On the other hand, in development version component stack trace for exactly the same error is following.

in MultiFactorRegistration (at Content.js:54)
    in Content (created by Connect(Content))
    in Connect(Content) (at App.js:22)
    in div (created by styled.div)
    in styled.div (created by $e)
    in div (created by styled.div)
    in styled.div (created by $e)
    in $e (at App.js:17)
    in App (created by Connect(App))
    in Connect(App) (at index.js:50)
    in ErrorBoundary (at index.js:49)
    in Provider (at index.js:48)

Maybe setting displayName for every component in my project would help but based on https://reactjs.org/docs/react-component.html#displayname it should not be necessary. Moreover, not all components within chain are under my control.

What is best practice to make component stack trace usable? It would be great to also update doc to cover this topic as this makes hunting any real issue complicated. Especially when stack trace within errror parameter is similarly useful (as in my case):

react-dom/cjs/react-dom.production.min.js:14 in Error
react-dom/cjs/react-dom.production.min.js:100 in E
/react-dom/cjs/react-dom.production.min.js:120 in te
react-dom/cjs/react-dom.production.min.js:123 in z
...

Thank you!

[Timer]

Please provide us with the information requested in the issue template.

[gaearon]

I think in this case an example is not necessary—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.

[mungojam]

It's a shame there can't be the notion of a map/symbols file that could be optionally included with the production deployment to help with this. The displayName idea for top level components is useful though