跳到主要内容

认识

2024年04月24日
柏拉文
越努力,越幸运

一、认识


随着前端工程化的发展,在实际工作中,为了减小文件大小、增加代码的安全性和提高代码的执行效率,往往线上的代码都是压缩混淆合并后的,即使捕获到了错误信息也很难找到对应出问题的具体位置。因此,我们需要 Sourcemap。它的主要作用就是 将经过压缩、混淆、合并的产物代码还原回未打包的原始形态,帮助开发者在生产环境中精确定位问题发生的行列位置 ,在精简一点的话其实就是 一个映射文件,能把转换后的代码位置映射到原始代码位置

简单来说,Sourcemap 维护了混淆后的代码行列到原代码行列的映射关系,我们输入混淆后的行列号就能够获得对应的原始代码的行列号,结合源代码文件便可定位到真实的报错位置。

二、SourceMap 原理


三、上传 SourceMap


3.1 vite-plugin

3.2 webpack-plugin

四、解析 SourceMap


4.1 Node.js + source-map

参考资料


哦吼!前端异常处理一站式详解🤩(大量DEMO,很干很干)

字节前端监控实践

SourceMap 与前端异常监控

Sentry Features

Sentry原理--收集错误、上报