资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/脚本错误量极致优化-让脚本错误一目了然

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

DirtyMind / 1209人阅读

摘要：通过文件可以得到源文件的具体错误信息，结合上源文件的内容进行可视化展示，让报错信息一目了然基于快速定位脚本报错方案整套方案的代码实现可以在这查看，效果如下左边的为线上页面，上报脚本错误右边的为脚本错误监控系统此时，错误信息中行列数为和。

>>>点击获取更多文章<<<

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

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/sentry，sentry.io，这里暂不展开。

参考来源https://github.com/joeyguo/bl...

云服务器 GPU云服务器 脚本发生错误 js脚本错误 js 脚本错误 html脚本运行脚本

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108263.html

相关文章

  • 脚本错误量极致优化-监控上报与Script error

    摘要：如上报监控项目是否正常运转测速上报反应项目质量脚本错误监控作为监控中重要一环，当页面发生报错的时候，通过上报错误信息，能及时发现存在问题，修复优化减少损失。监控上报脚本错误主要有两类语法错误运行时错误。 更多细节点击 在前端开发工作中，除了项目开发保质保量上线以外，项目的数据监控也应该配套起来，确保线上的正常运转。如上报 pv监控项目是否正常运转；测速上报反应项目质量；脚本错误监控作为...

    wayneli 评论0 收藏0

  • javascript性能优化技巧

    摘要：语句会使得局部变量位于作用域第二层，会使性能下降，所以应避免使用。使用事件委托来减少事件处理器的数量。把最可能出现的条件放在首位。在进行优化时，要弄清楚性能瓶颈，然后对症优化。新看到一篇很棒的文章前端性能优化备忘录如有不对，欢迎指正。 春节在家，把《高性能的JavaScript》刷了一遍，受益匪浅。本着每看完一本书都要做读书笔记的习惯，将书中的知识点总结一下。 由于不同浏览器使用的Ja...

    levinit 评论0 收藏0

  • javascript严格模式

    摘要：概述的严格模式是中的一种限制性更强的变种方式。严格模式在语义上与正常的有一些不同。首先，严格模式会将陷阱直接变成明显的错误。严格模式禁止删除声明变量。 概述 ECMAScript 5的严格模式是JavaScript中的一种限制性更强的变种方式。严格模式不是一个子集：它在语义上与正常代码有着明显的差异。不支持严格模式的浏览器与支持严格模式的浏览器行为上也不一样， 所以不要在未经严格模式特...

    Chao 评论0 收藏0

发表评论

登陆后可评论

0条评论

DirtyMind

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<