摘要:通過文件可以得到源文件的具體錯誤信息,結合上源文件的內容進行可視化展示,讓報錯信息一目了然基于快速定位腳本報錯方案整套方案的代碼實現可以在這查看,效果如下左邊的為線上頁面,上報腳本錯誤右邊的為腳本錯誤監控系統此時,錯誤信息中行列數為和。
>>>點擊獲取更多文章<<<
示例 · 壓縮代碼定位錯誤困難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)后,拿到對應的源文件上的具體錯誤信息,并進行展示。
方案五:開源方案 sentrysentry 是一個實時的錯誤日志追蹤和聚合平臺,包含了上面 sourcemap 方案,并支持更多功能,如:錯誤調用棧,log 信息,issue管理,多項目,多用戶,提供多種語言客戶端等,具體介紹可以查看 getsentry/sentry,sentry.io,這里暫不展開。
參考來源https://github.com/joeyguo/bl...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/108263.html
摘要:如上報監控項目是否正常運轉測速上報反應項目質量腳本錯誤監控作為監控中重要一環,當頁面發生報錯的時候,通過上報錯誤信息,能及時發現存在問題,修復優化減少損失。監控上報腳本錯誤主要有兩類語法錯誤運行時錯誤。 更多細節點擊 在前端開發工作中,除了項目開發保質保量上線以外,項目的數據監控也應該配套起來,確保線上的正常運轉。如上報 pv監控項目是否正常運轉;測速上報反應項目質量;腳本錯誤監控作為...
摘要:語句會使得局部變量位于作用域第二層,會使性能下降,所以應避免使用。使用事件委托來減少事件處理器的數量。把最可能出現的條件放在首位。在進行優化時,要弄清楚性能瓶頸,然后對癥優化。新看到一篇很棒的文章前端性能優化備忘錄如有不對,歡迎指正。 春節在家,把《高性能的JavaScript》刷了一遍,受益匪淺。本著每看完一本書都要做讀書筆記的習慣,將書中的知識點總結一下。 由于不同瀏覽器使用的Ja...
摘要:概述的嚴格模式是中的一種限制性更強的變種方式。嚴格模式在語義上與正常的有一些不同。首先,嚴格模式會將陷阱直接變成明顯的錯誤。嚴格模式禁止刪除聲明變量。 概述 ECMAScript 5的嚴格模式是JavaScript中的一種限制性更強的變種方式。嚴格模式不是一個子集:它在語義上與正常代碼有著明顯的差異。不支持嚴格模式的瀏覽器與支持嚴格模式的瀏覽器行為上也不一樣, 所以不要在未經嚴格模式特...
閱讀 1578·2021-11-25 09:43
閱讀 2484·2019-08-30 15:54
閱讀 2946·2019-08-30 15:53
閱讀 1096·2019-08-30 15:53
閱讀 755·2019-08-30 15:52
閱讀 2545·2019-08-26 13:36
閱讀 816·2019-08-26 12:16
閱讀 1217·2019-08-26 12:13