仅 React 组件堆栈跟踪开发？

Question

我正在尝试使用 Typescript 学习 React 并寻求建议。我已经成功地获得了一个适用于开发和生产环境的 Webpack 构建（minified js with source-map）环境。

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

componentDidCatch(error: Error, info: ErrorInfo)

我已经设法使用sourcemapped-stacktrace 从缩小的包和源映射中呈现可读的堆栈跟踪。这适用于 Error 对象。

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

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

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

目前，我正在为开发和生产构建显示/记录 ErrorInfo.componentStack。在生产中它只显示缩小的堆栈跟踪，尽管使用
一个包，例如sourcemapped-stacktrace。

Answer 1

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

---

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

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

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

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

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