脚本错误量极致优化-让脚本错误一目了然

原文地址

在上篇《脚本错误量极致优化-监控上报与 Script error 》 中,主要提到了js脚本错误上报的方式,并讲解了如何使用 crossorigin 来解决 Script error 报错信息的方案,于是我们就可以查看到脚本报错信息了。而此时可能会遇到另一个问题:”JS 代码压缩后,定位具体出错代码困难!“。本篇《脚本错误量极致优化-让脚本错误一目了然》 将结合示例,通过多种解决方案逐一分析,让脚本错误 一目了然。

示例 · 压缩代码定位错误困难

1.源代码(存在错误)

function test() {
    noerror // <- 报错
}

test();

2.经 webpack 打包压缩后产生如下代码

!function(n){function r(e){if(t[e])return t[e].exports;var o=t[e]={i:e,l:!1,exports:{}};return n[e].call(o.exports,o,o.exports,r),o.l=!0,o.exports}var t={};r.m=n,r.c=t,r.i=function(n){return n},r.d=function(n,t,e){r.o(n,t)||Object.defineProperty(n,t,{configurable:!1,enumerable:!0,get:e})},r.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return r.d(t,"a",t),t},r.o=function(n,r){return Object.prototype.hasOwnProperty.call(n,r)},r.p="",r(r.s=0)}([function(n,r){function t(){noerror}t()}]);

3.代码如期报错,并上报相关信息

{ msg: 'Uncaught ReferenceError: noerror is not defined',
  url: 'http://127.0.0.1:8077/main.min.js',
  row: '1',
  col: '515' }

此时,错误信息中行列数为 1 和 515。 结合压缩后的代码,肉眼观察很难定位出具体问题。

如何定位到具体错误

方案一:不压缩 js 代码

这种方式简单粗暴,但存在明显问题:1. 源代码泄漏,2. 文件的大小大大增加。

方案二:将压缩代码中分号变成换行

uglifyjs 有一个叫 semicolons 配置参数,设置为 false 时,会将压缩代码中的分号替换为换行符,提高代码可读性, 如

!function(n){function r(e){if(t[e])return t[e].exports
var o=t[e]={i:e,l:!1,exports:{}}
return n[e].call(o.exports,o,o.exports,r),o.l=!0,o.exports}var t={}
r.m=n,r.c=t,r.i=function(n){return n},r.d=function(n,t,e){r.o(n,t)||Object.defineProperty(n,t,{configurable:!1,enumerable:!0,get:e})},r.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n}
return r.d(t,"a",t),t},r.o=function(n,r){return Object.prototype.hasOwnProperty.call(n,r)},r.p="",r(r.s=0)}([function(n,r){function t(){noerror}t()}])

此时,错误信息中行列数为 5 和 137,查找起来比普通压缩方便不少。但仍会出现一行中有很多代码,不容易定位的问题。

方案三:js 代码半压缩 · 保留空格和换行

uglifyjs 的另一配置参数 beautify 设置为 true 时,最终代码将呈现压缩后进行格式化的效果(保留空格和换行),如

!function(n) {
    // ...
    // ...
}([ function(n, r) {
    function t() {
        noerror;
    }
    t();
} ]);

此时,错误信息中行列数为 32 和 9,能够快速定位到具体位置,进而对应到源代码。但由于增加了换行和空格,所以文件大小有所增加。

方案四:SourceMap 快速定位

SourceMap 是一个信息文件,存储着源文件的信息及源文件与处理后文件的映射关系。

在定位压缩代码的报错时,可以通过错误信息的行列数与对应的 SourceMap 文件,处理后得到源文件的具体错误信息。

SourceMap 文件中的 sourcesContent 字段对应源代码内容,不希望将 SourceMap 文件发布到外网上,而是将其存储到脚本错误处理平台上,只用在处理脚本错误中。

通过 SourceMap 文件可以得到源文件的具体错误信息,结合 sourcesContent 上源文件的内容进行可视化展示,让报错信息一目了然!

基于 SourceMap 快速定位脚本报错方案

整套方案的代码实现可以在这 noerror 查看,效果如下

1.左边的为线上页面,上报脚本错误

2.右边的为 noerror 脚本错误监控系统

此时,错误信息中行列数为 1 和 515。 结合 sourcemap,经处理(source-map)后,拿到对应的源文件上的具体错误信息,并进行展示。

方案五:开源方案 sentry

sentry 是一个实时的错误日志追踪和聚合平台,包含了上面 sourcemap 方案,并支持更多功能,如:错误调用栈,log 信息,issue管理,多项目,多用户,提供多种语言客户端等,具体介绍可以查看 getsentry/sentrysentry.io,这里暂不展开。

总结

以上的方案都有各自使用场景,能够解决问题的方案都是好方案。可以先快速支持,然后逐渐过渡到完整的方案。除了本篇文章 提到的方案外,社区还有不少其他的优秀方案。

关于 sourceMap 文件的生成,通过 gulp,webpack 都可以很好支持, noerror 的示例使用的是 webpack,只需要设置 devtool: "source-map",具体示例可以查看这里

查看更多文章 >>https://github.com/joeyguo/blog

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏phodal

你不再需要动态网页——编辑-发布-开发分离

尽管没有特别的动力去构建一个全新的CMS,但是我还是愿意去撰文一篇来书写如何去做这样的事——编辑-发布-开发分离模式是如何工作的。微服务是我们对于复杂应用的一种...

1959
来自专栏开源优测

webdriver介绍与Selenium RC的比较

什么是webdriver? webdriver是一个web自动化测试框架,不同于selenium IDE只能运行在firefox上,webdriver能够在不同...

3125
来自专栏乐沙弥的世界

Linux 下卸载MySQL Enterprise Monitor

    MySQL Enterprise Monitor是专门为MySQL数据库而设计的一款企业级监控,能非常好地与MySQL各方面特性相结合,包括:MySQ...

602
来自专栏破晓之歌

AJAX跨域完全讲解(需要java基础,暂不更新)

763
来自专栏编程微刊

[慕课笔记] node+mongodb建站攻略

2075
来自专栏前端知识分享

第115天:Ajax 中artTemplate模板引擎(一)

从上图可以看出,前后端开发人员的工作耦合主要在(3)Template的使用。 后端程序员和前端程序员会出现同时修改template的情况,这样就造成了前后端的耦...

733

如何安装Node.js.

Node.js是服务器端JavaScript应用程序的跨平台运行环境。Node.js使用的是谷歌研发的JavaScript引擎V8,它也可以在Chromium和...

694
来自专栏菩提树下的杨过

64位IIS(IIS6/IIS7)上跑Asp + Jet.Oledb的设置要点

由于64位操作系统不支持Microsoft OLE DB Provider for Jet驱动程序,也不支持更早的Microsoft Access Driver...

1668
来自专栏xingoo, 一个梦想做发明家的程序员

RequireJS实例分析

  随着JS越来越庞大,已经不仅仅是以前复制粘贴做特效的时代了,JS越来越偏向于业务逻辑与应用。恰逢Node的流行,JS在web开发中占有越来越重要的地位。由...

1785
来自专栏BeJavaGod

文档!重要的事情说第四遍~

之前我有提过文档的事,标题是《文档!文档!文档!重要的事情说三遍!》,其中提到的文档工具是使用wiki来管理文档,当然也能配合jira来分发任务,以及管理bug...

2653

扫码关注云+社区