如何優雅地檢視 JS 錯誤堆疊?

2021-09-11 10:55:56 字數 1672 閱讀 5172

本文由雲+社群發表

在前端,我們經常會通過window.onerror事件來捕獲未處理的異常。假設捕獲了乙個異常,上報的堆疊是這個:

typeerror: cannot read property 'module'

ofundefined

at htmldivelement.dispatch (

at htmldivelement.y.handle (

複製**

這個堆疊,你看得出問題來嗎?我們發布到 cdn 的指令碼檔案,普遍是經過 uglifyjs 壓縮的,所以堆疊可讀性相當的差。假如有下面的乙個堆疊檢視工具,又如何?

堆疊檢視工具

眼尖的同學,一眼就能找到問題。這裡的p[e]出現了可能為undefined的情況。

這樣乙個工具,大大提高了問題定位的效率。

好,這裡不賣瓜,我們來看下這當中的實現原理。

堆疊工具實現原理

一步步來說的話:

對於url,我們可以用於載入原始碼內容,得到source

source 使用 uglifyjs 反向美化成多行的**prettysource,並且同時生成sourcemap

堆疊幀中的linecol通過sourcemap反查,得到美化後對應的prettylineprettycol

prettysourceprettylineprettycol給到 monaco editor 渲染,就可以得到上述截圖的效果

說那麼多,不如貼**是吧:

var result = uglifyjs.minify(source, ,

sourcemap:

});var code = result.code;

var rawsourcemap = json.parse(result.map);

var consumerpromise = new sourcemap.sourcemapconsumer(rawsourcemap);

resolve(

consumerpromise.then(function(consumer)

}));複製**

上面就是使用 uglifyjs 對壓縮**進行反向美化的核心**。下面給出 sourcemap 的使用原始碼:

var code = result.code;

var consumer = result.sourcemapconsumer;

var position = consumer.generatedpositionfor();

parent.postmessage(

}, sourceorigin);

複製**

完整原始碼有興趣的讀者也可以下下來把玩把玩:

js-loader.html.zip

原始碼只包含堆疊解析的實現,ui 的實現不在本文的討論之內,用 react 隨便畫一畫就好了。

如何優雅地檢視 JS 錯誤堆疊?

本文由雲 社群發表 在前端,我們經常會通過window.onerror事件來捕獲未處理的異常。假設捕獲了乙個異常,上報的堆疊是這個 這個堆疊,你看得出問題來嗎?我們發布到 cdn 的指令碼檔案,普遍是經過 uglifyjs 壓縮的,所以堆疊可讀性相當的差。假如有下面的乙個堆疊檢視工具,又如何?眼尖的...

如何優雅地檢視 JS 錯誤堆疊?

摘要 堆疊是debug的關鍵。在前端,我們經常會通過window.onerror事件來捕獲未處理的異常。假設捕獲了乙個異常,上報的堆疊是這個 typeerror cannot read property module of undefined at htmldivelement.dispatch a...

如何優雅地寫部落格

如何優雅地寫部落格 現在寫部落格面臨著幾個問題 編寫麻煩,大部分的部落格編輯器都很爛,csdn和等等。維護麻煩,維護多個部落格的資料同步很麻煩。歷史檢視,大部分部落格編寫都不能檢視之前的歷史資料。用github做部落格倉庫,將資料都寫在github上,這樣可以隨時檢視一年前的部落格資料,方便在原文件...