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

原文地址

在上篇《脚本错误量极致优化-监控上报与 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 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Golang语言--Coroutine可能存在的死锁

直接上代码: 1. 第一种情况, 如果没有select{}, main 主线程不会等待coroutine运行,导致coroutine得不到机会运行。 You ...

411100
来自专栏Python小屋

Python批量判断IP地址所属地区

首先安装Python扩展库netaddr,然后对下面的代码进行简单修改后即可满足某些场合的应用。 from random import randrange fr...

44070
来自专栏不想当开发的产品不是好测试

postman也可以使用F12功能

背景: 做过接口测试的话,大多数都知道或使用过postman工具,使用postman的时候,有时候希望也可以像chrome一样使用F12功能,这样方便观察一些数...

24290
来自专栏python学习之旅

Python笔记(三):构建发布模块

(一)     准备工作 1.   新建一个模块(名称自定义),存放要发布的模块代码。 2.   新建一个setup.py的模块(存放模块的元数据,描述相关信息...

39980
来自专栏挖掘大数据

教程说明:HBase下载、安装与配置

HBase是建立在Hadoop文件系统之上的分布式面向列的数据库,本文将介绍HBase的下载、安装与配置。

29300
来自专栏13blog.site

could not resolve host: github.com 问题解决办法

向github提交代码时出现问题,如图: ? 代码push失败,提示could not resolve host: github.com 解决办法: 1、打开终...

68850
来自专栏从零开始的linux

用shell添加用户

调试添加用户的脚本 # sh -x useradd.sh alex + '[' 1 -lt 1 ']' + id alex + useradd alex + ...

34760
来自专栏我的博客

MYSQL主从同步

1、解决问题 数据分布不同节点、负载均衡、读写分离、容灾备份、高可用应用、故障切换等 2、同步原理 Master将操作记录到bin-log salve的一个线程...

40390
来自专栏java架构师

Hadoop学习2--Linux准备及环境准备

1、环境安装: 虚拟机:VMware Player 系统:Ubuntu12 注意事项:注意位数,包括系统,java,Hadoop 2、切换账号 当前登录账号是自...

29960
来自专栏电光石火

centos下完全卸载mysql

yum方式安装的mysql 1、yum remove mysql mysql-server mysql-libs compat-mysql51 2...

36450

扫码关注云+社区

领取腾讯云代金券