在线追踪压缩后的JS出错代码

骑猪看日落 2022-05-19 00:55 257阅读 0赞

> 小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

目前的web静态资源为了减少加载时间和一部分的安全原因,都对js文件进行了合并和压缩，虽然在网页体验上非常不错，但是对于在线js的错误跟踪就显得异常麻烦

## 解决思路 ##

对于不要压缩，这点肯定是不能妥协的，用户体验是坚决不能牺牲的，但是能不能从压缩着手呢？答案是肯定的，第一时间，我们应该就会想到sourcemap，在sourcemap上来解决问题

## 怎么利用sourcemap ##

深入了解sourcemap映射原理前，最好读一下阮老师的文章《[JavaScript Source Map 详解][JavaScript Source Map]》。 读完之后，我们就大致了解了sourcemap的几个概念，接下来我们具体分析一下

1. sourcemap文件结构

{
    　　　　version : 3,
    　　　　file: "out.js",
    　　　　sourceRoot : "",
    　　　　sources: ["foo.js", "bar.js"],
    　　　　names: ["src", "maps", "are", "fun"],
    　　　　mappings: "AAgBC,SAAQ,CAAEA"
    }

mappings里面的数据就是对应位置的映射，需要对mappings里面的各个位置进行分解

2. 分析位置

我们使用[vlq][]库进行分解，获取具体的位置信息

/*
    * 返回相应的位置信息
    * rt[0]:这个位置在（转换后的代码的）的第几列。
    * rt[1]:这个位置属于sources属性中的哪一个文件。
    * rt[2]:表示这个位置属于转换前代码的第几行。
    * rt[3]:表示这个位置属于转换前代码的第几列。
    * rt[4]:表示这个位置属于names属性中的哪一个变量。
    */
    let rt = vlq.decode( 'AAgBC' );

3. 记录完整的映射关系

对于第二步，只是知道每个点位的位置，然后对于全部位置的记录，需要关联整理，可以参考[sourcemap-stack][]库，其中/src/mappingRealPath.js文件下面的mappingSingleFile函数记录关联了全部信息，以便后续使用

4.注意点

根据不同的环境，可能在计算中会有小偏差，所以我们需要修正相应的位置映射。在[sourcemap-stack][]中，/src/mappingRealPath.js文件下面的mapErrorPosition函数进行了位置修正，以便正确获取

## 怎么产生sourcemap ##

1.  如果目前在使用react，vue等框架时，一般都会用到webpack，在webpack打包的时候，是可以生产map文件的
2.  如果是老式项目，一般会用到gulp等工具，这些工具在处理压缩js文件时，也是可以生产map文件

## 使用工具 ##

下面两种途径，只是提供了界面，映射关系都是依赖[sourcemap-stack][]

1.  目前可以通过[sourcemap-site][]，git clone下来之后，运行就能打开页面(不再维护)
2.  安装下载[vide][]编辑器，目前已经支持微信和支付宝小程序，也支持vue，react等开发，可以安装[vide-plugin-toolbar-sourcemap][]插件，非常的方便

运行界面

![stack3.5e60dbc0e02c.png][]

参数说明

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
   <th>类型</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>map地址</td> 
   <td>js文件对应map文件资源的服务器地址，如果map文件和js文件在同一个目录下，可以不填</td> 
   <td>String</td> 
  </tr> 
  <tr> 
   <td>map文件名</td> 
   <td>相比于js文件，map文件的格式，比如[name].[hash].js.map,[name].js.map。有点类似webpack配置的output下filename的格式</td> 
   <td>String</td> 
  </tr> 
  <tr> 
   <td>map加密密钥</td> 
   <td>如果map文件放到跟js同目录下，一起发布到cdn上，处于安全考虑，可以使用对称性加密map文件,加密包使用<a href="https://cnpmjs.org/package/encrypter" rel="nofollow">encrypte</a>,如果没有加密，这项不填</td> 
   <td>String</td> 
  </tr> 
  <tr> 
   <td>错误信息</td> 
   <td>通过window.onerror等方式获取到的错误信息，一般可以通过error.stack来获取,只需copy错误信息，黏贴到界面上就行</td> 
   <td>String</td> 
  </tr> 
 </tbody> 
</table>

运行结果

单击分析按钮后，就会对你配置的信息就行检索和分析，最终得到如下分析结果

默认显示最顶层的堆栈出错![stack1.e9c10b6d292d.png][]可以单击其他堆栈的行，进行源代码查看，非常的直观![stack2.695bbba2565f.png][]

注意

因为一般js文件的地址跟html地址都不一样，所以为了得到error信息，需要对js文件允许跨域，在script标签里面加crossorigin属性

总结

一般公司里面都有线上js出错的日志上报，通过线上日志的上报，查看错误信息，把错误信息copy到工具上面，进行查看。根据这个工具，可以对线上的错误进行源代码的查看了，帮助大家快速找到线上问题

原文链接：[https://qianduan.group/posts/59e5c3d0cf830d7057327c95][https_qianduan.group_posts_59e5c3d0cf830d7057327c95]

[Fundebug][]提供JavaScript监控，支持所有主流前端框架，微信小程序监控，微信小游戏监控，后端Node.js监控。

![1386816-20180502112633892-1858746955.png][]

您可能感兴趣的

1.  [详解1000+项目数据分析出来的10大JavaScript错误][1000_10_JavaScript]
2.  [10个用Console来Debug的高级技巧][10_Console_Debug]
3.  [Fundebug支持区分Source Map版本][Fundebug_Source Map]
4.  [Debug前端HTML/CSS][Debug_HTML_CSS]
5.  [Fundebug：小程序的运维中心][Fundebug 1]

[Fundebug]: https://www.fundebug.com/
[JavaScript Source Map]: http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
[vlq]: https://cnpmjs.org/package/vlq
[sourcemap-stack]: https://github.com/vicwang163/sourcemap-stack
[sourcemap-site]: https://github.com/vicwang163/sourcemap-site
[vide]: https://qianduan.group/posts/59db0713b9c29f338d4500d0
[vide-plugin-toolbar-sourcemap]: https://github.com/debuggap/vide-plugin-toolbar-sourcemap
[stack3.5e60dbc0e02c.png]: https://qianduan.debuggap.com/stack3.5e60dbc0e02c.png
[stack1.e9c10b6d292d.png]: https://qianduan.debuggap.com/stack1.e9c10b6d292d.png
[stack2.695bbba2565f.png]: https://qianduan.debuggap.com/stack2.695bbba2565f.png
[https_qianduan.group_posts_59e5c3d0cf830d7057327c95]: https://qianduan.group/posts/59e5c3d0cf830d7057327c95
[1386816-20180502112633892-1858746955.png]: /images/20220519/3ceec89574bd4cd193f9250f2d649c79.png
[1000_10_JavaScript]: https://blog.fundebug.com/2018/03/12/top-10-javascript-errors-from-1000-projects/
[10_Console_Debug]: https://blog.fundebug.com/2018/03/19/10-tips-for-debugging-with-console/
[Fundebug_Source Map]: https://blog.fundebug.com/2017/12/26/fundebug-can-distinguish-sourcemap-version/
[Debug_HTML_CSS]: https://blog.fundebug.com/2018/01/02/how-to-debug-frontend-html-css/
[Fundebug 1]: https://blog.csdn.net/qq_40126542/article/details/80112657