我正在尝试使用Typescript学习React并寻求建议。我已经成功设法使Webpack构建适用于开发和生产（缩小版js 和 source-map ）环境。
我有一个错误边界组件，实现了带有签名的 componentDidCatch 方法：
componentDidCatch(error: Error, info: ErrorInfo)
我设法使用sourcemapped-stacktrace从缩小的包和源映射中呈现了可读的堆栈跟踪。对于Error对象，这很好。
根据React文档，组件堆栈跟踪应仅在开发环境中记录/呈现。
组件堆栈跟踪是否与 ErrorInfo 对象的 componentStack 属性相对应，该属性是 componentDidCatch 方法中的参数？
如果是这样，是否将环境变量设置为指示开发环境正在运行的值时，仅记录/显示 ErrorInfo.componentStack 的错误边界是最佳实践？
当前，我正在显示/记录用于开发和生产构建的ErrorInfo.componentStack。在生产中，即使使用
，它也只显示最小的堆栈跟踪
包，例如sourcemapped-stacktrace。
答案 0 :(得分：2)
要回答您的问题，我认为在您的应用程序中可接受的情况下，可以在生产版本中打印组件堆栈跟踪，但我认为许多人希望将其发送到生产中的某种错误记录服务，这就是为什么它不会自动完成的原因，但是由您决定是否要为您的应用程序打印它。
对于在搜索是否有可能看到完整的非最小化组件堆栈跟踪时偶然发现此问题的其他人，我认为这是不可能的： https://github.com/facebook/create-react-app/issues/3753
我可以确认它可以正常工作。我没有什么好的解决方案：在捆绑包中运送组件名称会增加其大小（这是不理想的），并且浏览器不允许我们获取任意函数的源位置来显示它。
如果您可以复制相同的特定部署，则可以打开网站/应用程序，然后使用React DevTools粗略了解问题可能出在哪里（它还会显示缩略名称）。结合报告URL，这足以调试问题。
另一种可能的解决方案是让您在一些最重要的组件（例如，路线）上显式设置displayName，这应该为您提供尽可能多的信息。
简而言之，实际的错误堆栈跟踪与组件堆栈跟踪不同，并且无法做出反应来获得未缩小的组件堆栈跟踪