仅 React 组件堆栈跟踪开发？

Question

我正在尝试使用 Typescript 学习 React 并寻求建议。我已经成功地获得了适用于开发和生产（带有源映射的缩小版 js）环境的 Webpack 构建。

我有一个错误边界组件，它实现了带有签名的componentDidCatch方法：

componentDidCatch(error: Error, info: ErrorInfo)

我已成功使用sourcemapped-stacktrace从缩小的包和源映射中呈现可读的堆栈跟踪。这对于 Error 对象来说效果很好。

根据React文档，组件堆栈跟踪应仅在开发环境中记录/呈现。

组件堆栈跟踪是否对应于作为componentDidCatch方法中的参数的ErrorInfo对象的componentStack属性？

如果是这样，当环境变量设置了指示开发环境正在运行的值时，是否将错误边界仅记录/显示ErrorInfo.componentStack视为最佳实践？

目前，我正在显示/记录开发和生产版本的 ErrorInfo.componentStack。
在生产中，尽管使用了包（例如sourcemapped-stacktrace ），但它仅显示缩小的堆栈跟踪。

Answer 1

为了回答你的问题，我认为如果你的应用程序可以接受的话，在生产版本中打印组件堆栈跟踪是可以的，但我认为很多人更愿意将其发送到生产中的某种错误日志服务，这就是为什么它不会自动完成，但由您决定是否要为您的应用程序打印它。

对于在搜索是否可以看到完整的非缩小组件堆栈跟踪时偶然发现这个问题的任何其他人，我认为这是不可能的： https: //github.com/facebook/create-react-app /问题/3753

我可以确认它按预期工作。我没有任何好的解决方案：在捆绑包中传送组件名称会增加其大小（这是不理想的），并且浏览器不允许我们获取任意函数的源位置来显示它。

如果您可以重现相同的特定部署，则可以打开网站/应用程序，然后使用 React DevTools 大致了解问题可能出在哪里（这也会显示缩小的名称）。结合报告 URL，这足以调试问题。

另一种可能的解决方案是您在几个最重要的组件（例如路线）上显式设置 displayName ，这应该为您提供可以获得的最多信息。

简而言之，实际的错误堆栈跟踪与组件堆栈跟踪不同，并且 React 无法获取未缩小的组件堆栈跟踪