返回
随着前端技术的发展，我们越来越多的使用window.onerror来捕获未处理的异常。如果这个时候捕获了一个异常，而他上报的堆栈是这个：
``` TypeError: Cannot read properties of undefined (reading 'split') at Function.mergeOptions (http://example.com/vendor.js:132:1420) at new View (http://example.com/app.js:1234:12) at http://example.com/index.html:1:1234 ``` 现在来看这个堆栈，你能否看出问题来呢？因为我们发布到CDN的脚本文件，普遍是经过UglifyJS压缩的，所以堆栈可读性非常的差。但我们假若有下面的这个堆栈查看工具呢？
``` TypeError: Cannot read properties of undefined (reading 'split') at mergeOptions (/Users/xiaohuoniu/Documents/github/auto-mini-cli/dist/vendor.js:132:1420) at new View (/Users/xiaohuoniu/Documents/github/auto-mini-cli/dist/app.js:1234:12) at /Users/xiaohuoniu/Documents/github/auto-mini-cli/dist/index.html:1:1234 ``` 相比较而言，这个是不是清晰很多？原因就是我们使用了source-map技术。source-map是由Google V8团队开源的一个非常不错的项目，它能够将压缩后的代码反编译回原始的代码，让我们可以非常清晰的查看堆栈信息，降低线上故障的排查成本。
那么，我们如何在项目中使用source-map呢？这里我们以vue-cli3项目为例：
``` // vue.config.js module.exports = { configureWebpack: { devtool: 'source-map', }, }; ```
配置完成后，在构建项目后，就会在项目dist目录下看到source map文件，这些文件都是以".map"为后缀的，比如app.js.map、vendor.js.map等，这些文件就是source map文件。
接下来，我们要做的是将source map文件上传到线上，这样当用户打开浏览器开发者工具时，就可以看到经过source map解析后的代码了。这里推荐大家使用云存储，比如七牛云、阿里云OSS等，将source map文件上传到云存储后，获取它的url地址，然后在项目中引用即可：
``` ```
这样，当用户打开浏览器开发者工具时，就可以看到经过source map解析后的代码了，是不是非常方便呢？
除了使用source-map技术外，我们还可以使用其他一些工具来帮助我们查看JS错误堆栈，比如：
- [source-map-explorer](https://sokra.github.io/source-map-explorer/) - [stacktrace.js](https://stacktrace.js.org/) - [sentry](https://sentry.io/)
这些工具都可以帮助我们更清晰的查看JS错误堆栈，从而降低线上故障的排查成本。
优雅查看 JS 错误堆栈，还不快来围观！
前端
2023-12-13 01:22:15
随着前端技术的发展，我们越来越多的使用window.onerror来捕获未处理的异常。如果这个时候捕获了一个异常，而他上报的堆栈是这个：
``` TypeError: Cannot read properties of undefined (reading 'split') at Function.mergeOptions (http://example.com/vendor.js:132:1420) at new View (http://example.com/app.js:1234:12) at http://example.com/index.html:1:1234 ``` 现在来看这个堆栈，你能否看出问题来呢？因为我们发布到CDN的脚本文件，普遍是经过UglifyJS压缩的，所以堆栈可读性非常的差。但我们假若有下面的这个堆栈查看工具呢？
``` TypeError: Cannot read properties of undefined (reading 'split') at mergeOptions (/Users/xiaohuoniu/Documents/github/auto-mini-cli/dist/vendor.js:132:1420) at new View (/Users/xiaohuoniu/Documents/github/auto-mini-cli/dist/app.js:1234:12) at /Users/xiaohuoniu/Documents/github/auto-mini-cli/dist/index.html:1:1234 ``` 相比较而言，这个是不是清晰很多？原因就是我们使用了source-map技术。source-map是由Google V8团队开源的一个非常不错的项目，它能够将压缩后的代码反编译回原始的代码，让我们可以非常清晰的查看堆栈信息，降低线上故障的排查成本。
那么，我们如何在项目中使用source-map呢？这里我们以vue-cli3项目为例：
``` // vue.config.js module.exports = { configureWebpack: { devtool: 'source-map', }, }; ```
配置完成后，在构建项目后，就会在项目dist目录下看到source map文件，这些文件都是以".map"为后缀的，比如app.js.map、vendor.js.map等，这些文件就是source map文件。
接下来，我们要做的是将source map文件上传到线上，这样当用户打开浏览器开发者工具时，就可以看到经过source map解析后的代码了。这里推荐大家使用云存储，比如七牛云、阿里云OSS等，将source map文件上传到云存储后，获取它的url地址，然后在项目中引用即可：
``` ```
这样，当用户打开浏览器开发者工具时，就可以看到经过source map解析后的代码了，是不是非常方便呢？
除了使用source-map技术外，我们还可以使用其他一些工具来帮助我们查看JS错误堆栈，比如：
- [source-map-explorer](https://sokra.github.io/source-map-explorer/) - [stacktrace.js](https://stacktrace.js.org/) - [sentry](https://sentry.io/)
这些工具都可以帮助我们更清晰的查看JS错误堆栈，从而降低线上故障的排查成本。
