利用sourcemap庫還原錯誤堆棧-前端監控之數據分析篇

前端監控中， js錯誤是一項相當重要的監控點及指標，只要包含收集及解析階段

因爲sourcemap和源文件生成各有不一樣的策略

1.源文件構建

1. 將hash生成到文件名中

該方式能夠直接在監控平臺讀取源文件對應的sourcemap保存， 在解析時使用

2. 將hash或時間戳放到文件url search中

該方式須要在監控平臺對url進行處理，將search中的參數加入到文件名進行保存

3. 沒有使用hash或時間戳

這種狀況就須要客戶端上報錯誤時，加上版本號，構建時將sourcemap文件上傳到服務器， 解析時獲取對應版本的文件便可

2. sourcemap生成

sourcemap生成在webpack中有多種配置， 可是功效有細微差別

在生產環境， 咱們是不能暴露sourcemap文件的

爲保證安全同時又能夠還原錯誤堆棧 有如下方式

方法一. 將sourcemap文件在構建時上傳到監控服務器，而後刪除便可

方法二. 在服務器端使用nginx等代理服務器，對文件作訪問限制，只可監控服務器訪問便可

3. 如何使用sourcemap庫進行堆棧還原

上報的錯誤堆棧內容以下

[{"url":"https://blog.uproject.cn/static/js/app.c95d3bd2ec81c488ba30.js","func":"registerEventHandler","args":[],"line":29,"column":12174},
{"url":"https://blog.uproject.cn/static/js/app.c95d3bd2ec81c488ba30.js","func":"onEvent","args":[],"line":32,"column":26680}]

複製代碼

解析流程以下

1. 根據sourcemap建立SourceMapCustomer對象

var smc = await new sourceMap.SourceMapConsumer(mapfileData);
複製代碼

2. 根據每行堆棧信息獲取源文件及錯誤行和列

var po = smc.originalPositionFor({
                        line: line,
                        column: column
                    });
console.log(po)// line: 1, column:200, source: xxx.js
複製代碼

3. 根據源文件內容及行列獲取源文件信息

var co = smc.sourceContentFor(po.source)
// co 包含了源文件全部的源碼 
var coList = co.split("\n")
// 按需取行便可
複製代碼

4. 將內容展現在監控平臺

閱讀原文