腳本錯誤量極致優(yōu)化-讓腳本錯誤一目了然

授權轉載自：joeyguo

https://github.com/joeyguo/blog/issues/14

在上篇

《腳本錯誤量極致優(yōu)化-監(jiān)控上報與Script error》 : https://github.com/joeyguo/blog/issues/13

中，主要提到了js腳本錯誤上報的方式，并講解了如何使用 crossorigin 來解決 Script error 報錯信息的方案，于是我們就可以查看到腳本報錯信息了。而此時可能會遇到另一個問題：”JS 代碼壓縮后，定位具體出錯代碼困難！“。本篇《腳本錯誤量極致優(yōu)化-讓腳本錯誤一目了然》 將結合示例，通過多種解決方案逐一分析，讓腳本錯誤 一目了然。

示例 · 壓縮代碼定位錯誤困難

1.源代碼（存在錯誤）

function?test()?{
????noerror?//?<-?報錯
}

test();

2.經(jīng) webpack 打包壓縮后產(chǎn)生如下代碼

!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'?}

此時，錯誤信息中行列數(shù)為 1 和 515。結合壓縮后的代碼，肉眼觀察很難定位出具體問題。

如何定位到具體錯誤

方案一：不壓縮 js 代碼

這種方式簡單粗暴，但存在明顯問題：1. 源代碼泄漏，2. 文件的大小大大增加。

方案二：將壓縮代碼中分號變成換行

uglifyjs 有一個叫 semicolons 配置參數(shù)，設置為 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()}])

此時，錯誤信息中行列數(shù)為 5 和 137，查找起來比普通壓縮方便不少。但仍會出現(xiàn)一行中有很多代碼，不容易定位的問題。

方案三：js 代碼半壓縮 · 保留空格和換行

uglifyjs 的另一配置參數(shù) beautify 設置為 true 時，最終代碼將呈現(xiàn)壓縮后進行格式化的效果（保留空格和換行），如

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

此時，錯誤信息中行列數(shù)為 32 和 9，能夠快速定位到具體位置，進而對應到源代碼。但由于增加了換行和空格，所以文件大小有所增加。

方案四：SourceMap 快速定位

SourceMap 是一個信息文件，存儲著源文件的信息及源文件與處理后文件的映射關系。

在定位壓縮代碼的報錯時，可以通過錯誤信息的行列數(shù)與對應的 SourceMap 文件，處理后得到源文件的具體錯誤信息。

SourceMap 文件中的 sourcesContent 字段對應源代碼內(nèi)容，不希望將 SourceMap 文件發(fā)布到外網(wǎng)上，而是將其存儲到腳本錯誤處理平臺上，只用在處理腳本錯誤中。

通過 SourceMap 文件可以得到源文件的具體錯誤信息，結合 sourcesContent 上源文件的內(nèi)容進行可視化展示，讓報錯信息一目了然！

基于 SourceMap 快速定位腳本報錯方案

整套方案的代碼實現(xiàn)可以在這 noerror 查看，效果如下

1.左邊的為線上頁面，上報腳本錯誤 2.右邊的為 noerror 腳本錯誤監(jiān)控系統(tǒng)

此時，錯誤信息中行列數(shù)為 1 和 515。結合 sourcemap，經(jīng)處理（source-map）后，拿到對應的源文件上的具體錯誤信息，并進行展示。

方案五：開源方案 sentry

sentry 是一個實時的錯誤日志追蹤和聚合平臺，包含了上面 sourcemap 方案，并支持更多功能，如：錯誤調(diào)用棧，log 信息，issue管理，多項目，多用戶，提供多種語言客戶端等，具體介紹可以查看 getsentry/sentry，sentry.io，這里暫不展開。

小總

以上的方案都有各自使用場景，能夠解決問題的方案都是好方案。可以先快速支持，然后逐漸過渡到完整的方案。除了這里提到的方案外，社區(qū)還有不少其他的優(yōu)秀方案。

關于 sourceMap 文件的生成，通過 gulp，webpack 都可以很好支持， noerror 的示例使用的是 webpack，只需要設置 devtool: "source-map"，具體示例可以查看這里 。

https://github.com/joeyguo/noerror/tree/master/example

然而當項目外鏈第三方資源或公共庫時，這種壓縮且無提供 SourceMap 的文件出現(xiàn)異常，又該如何更好的定位錯誤位置呢？

定位到項目外鏈第三方資源或公共庫

”獲取對應格式化后的代碼行列位置“

我們可以將壓縮代碼進行格式化，當錯誤出現(xiàn)時，錯誤信息也就有了具體的行列數(shù)，更夠方便定位到錯誤位置。

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

而此時，格式化后的代碼由于增加了換行和空格，增加了文件的大小，所以并不推薦這種方式。但這種試圖 “通過壓縮代碼的出錯行列位置轉換成格式化代碼對應的出錯行列位置” 的思路我們可以接著進行優(yōu)化。將格式化代碼的轉換進行后置處理。借助工具，避免提前格式化導致的文件增大問題。

“通過壓縮代碼及行列位置獲取對應格式化后的代碼行列位置” 的工具

我們可以將壓縮代碼進行格式化，并結合原來的壓縮代碼匹配生成“映射文件” - SourceMap 文件。有了 SourceMap 文件后，就能夠通過壓縮代碼的行列數(shù)找到對應格式化后代碼的行列數(shù)了。

小結

當遇到壓縮且無源碼 SourceMap 的文件出錯時，借助上面提到的“工具”，能夠找到其對應格式化后的代碼及出錯位置，更好的定位具體問題。具體工具的使用與實現(xiàn)方式可見 https://github.com/joeyguo/js-beautify-sourcemap

以上為本文所有內(nèi)容，相關文章：

腳本錯誤量極致優(yōu)化-監(jiān)控上報與Script error: https://github.com/joeyguo/blog/issues/13

腳本錯誤量極致優(yōu)化-讓腳本錯誤一目了然: https://github.com/joeyguo/blog/issues/14