Webpack生产捆绑的事后调试

我正在将Webpack引入现有的Web应用程序中,其中Webpack使用babel和其他工具来生成JavaScript和CSS捆绑文件以包含在应用程序中。一切正常,但是现在我很期待在生产中不可避免地出现错误并发生未处理的异常的时候。我有处理window.onerror的现有代码,然后继续将消息,URL,行号,列号和错误事件信息转储到日志文件中。我的问题特别是关于堆栈跟踪信息。我得到这样的信息:

"stack": "TypeError: t.callNonExistantMethod is not a function\n
at http://localhost/react-bundle.js?version=2:82:158853\n
at http://localhost/react-bundle.js?version=2:82:158880\n
at Xo (http://localhost/react-bundle.js?version=2:65:53052)\n
at Mi (http://localhost/react-bundle.js?version=2:65:65302)\n
at $a (http://localhost/react-bundle.js?version=2:65:90684)\n
at qa (http://localhost/react-bundle.js?version=2:65:91068)\n
at Tu (http://localhost/react-bundle.js?version=2:65:97955)\n
at ku (http://localhost/react-bundle.js?version=2:65:97335)\n
at Eu (http://localhost/react-bundle.js?version=2:65:96356)\n
at Qa (http://localhost/react-bundle.js?version=2:65:95230)",

我有有用的文件名,行号和列信息。因此,我可以检查捆绑文件以找到失败的适当代码。我可以查看堆栈跟踪中的较早条目,重点放在行号和列号上,以查看(最终)导致失败代码的原因。有点痛苦,但绝对有用。但是,当我要修复代码时,我需要返回未缩小,未转码的代码。在这个人为的示例中,我可以在原始资源中搜索“ callNonExistantMethod”并找到它。但是,如果这种区别不那么明显,则无法搜索源代码。即使是独特的,如果从多个不同的方法中调用失败的方法,我也要尝试找出导致失败的方法调用的路径。我可以在生成的捆绑文件中找到它。但是我看不到追溯原始源代码的方法。

部分问题是堆栈跟踪中的方法名称不太清楚。我了解这是缩小的代码。我希望源地图能以某种方式对我有所帮助,但是我不确定在这样的事后分析场景中是否有任何工具可以用来帮助我回到原始源。有什么建议吗?

ljm88888888 回答:Webpack生产捆绑的事后调试

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3098526.html

大家都在问