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

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

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

解决思路

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

怎么利用sourcemap

深入了解sourcemap映射原理前,最好读一下阮老师的文章《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插件,非常的方便


运行界面



参数说明

map地址:js文件对应map文件资源的服务器地址,如果map文件和js文件在同一个目录下,可以不填

map文件名:相比于js文件,map文件的格式,比如[name].[hash].js.map,[name].js.map。有点类似webpack配置的output下filename的格式

map加密密钥:如果map文件放到跟js同目录下,一起发布到cdn上,处于安全考虑,可以使用对称性加密map文件,加密包使用encrypte,如果没有加密,这项不填

错误信息: 通过window.onerror等方式获取到的错误信息,一般可以通过error.stack来获取,只需copy错误信息,黏贴到界面上就行


运行结果

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

默认显示最顶层的堆栈出错

可以单击其他堆栈的行,进行源代码查看,非常的直观


注意

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

总结

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

文章被以下专栏收录

    关注前端前沿技术,探寻业界深邃思想。https://qianduan.group 欢迎微信/微博搜索『前端外刊评论』,关注我们。欢迎给本专栏投稿,原作译作不限,要求:质量高!如果愿意尝试从事前端技术相关的书籍的编写或翻译工作,请私信外刊君。

    定期推送资深工程师的原创文章,话题以前端为主,当然也会涉及到后端以及其它话题,重要的是一定都是原创。