Fundebug支援區分Source Map版本

2019 年 12 月 31 日
筆記

摘要： 想要區分Source Map版本的話，在接入插件與上傳Source Map時，都需要設置appversion哦！

神奇的Source Map

作為專業的錯誤監控服務，Fundebug支援一個神奇的功能 – Source Map：

通常，出於性能和安全考慮，生產環境的程式碼是經過壓縮混淆。這樣的話，報錯資訊的位置以及程式碼都比較亂，難於定位真正的出錯程式碼位置。使用Source Map，可以還原完整的堆棧資訊，準確定位到出錯源碼，幫助您快速修復BUG。

如何區分Source Map版本？

然而，機智的Fundebug用戶發現了一個小小的問題：

當線上環境的程式碼與開發環境程式碼不同時，它們的Source Map內容不同而文件名相同，Fundebug如何區分？

我們之前的處理方式比較簡單，採用最新的Source Map，這樣會導致還原程式碼時使用了錯誤的Source Map。

這樣區分Source Map版本

為了解決用戶提出的問題，我們現在已經支援了區分不同版本的Source Map。使用方法分為2步，缺1不可：

1. 接入插件時設置應用版本

應用版本可以通過appversion屬性來設定，有2種不同配置方式：

在HTML程式碼中配置<script>標籤中配置appversion屬性

<script src="https://js.fundebug.cn/fundebug.0.3.3.min.js"          apikey="API-KEY"          appversion="3.2.5" ></script>

在JavaScript程式碼中配置appversion變數

fundebug.appversion = "3.2.5";

2. 上傳Source Map時設置應用版本

上傳Source Map有3種不同方式：前端UI上傳、API上傳、fundebug-cli批量上傳。採用這3種方式上傳Source Map時，均可以設置應用版本:

前端UI上傳

API上傳

curl https://fundebug.com/javascript/sourcemap/upload        -X POST        -F apikey=API-KEY        -F appversion=1.0.0        -F sourceMap=@dist/app.js.map

fundebug-cli批量上傳

fundebug-cli upload --apikey "API-KEY" --appversion 1.0.0 --directory dist/

當您接入插件與上傳Source Map均設置了應用版本，則Fundebug就可以使用對應版本的Source Map文件來進行程式碼還原了~

參考

版權聲明

轉載時請註明作者 Fundebug以及本文地址： https://blog.fundebug.com/2017/12/26/fundebug-can-distinguish-sourcemap-version/