配置文件
sentry上傳sourMap的前提是先設置webpack的配置文件

1.在項目文件的根目錄新建一個.sentryclirc文件

sentry會自動檢測并使用.sentryclirc文件中的配置信息

2.sentryclirc文件中的配置內容

[auth] token=f0a0ee24d2cd4b2eade96280e1698762c5df9bac87ea423a6dbe3090f3a3a72 ? [defaults] url = https://sentry.io/ project=projectName org=sentry

3.配置中的參數說明

token

token為API令牌,不是安全令牌,在sentry的設置中不要弄混淆了

url

如果是是官方網站,則參考官方文檔

本位這里為自建的sentry,所以url設置為自定義的域名

project

項目名稱從項目面板查看即可

org

注意這里是組織,不是團隊,不要弄錯了

官方文檔:

https://docs.sentry.io/cli/configuration/

更多其他配置和參數,請參考sentry官方文檔中的內容

WebPack插件

上傳sourcemap的方式有很多種,如手動上傳和sentry-cli上傳

本文使用的是sentry/webpack-plugin(webpack插件),它的特點是

自動化,比如其他幾種方式要更為方便

相對安全,自己構建sourceMap文件,上傳后刪除,不會影響到線上,不會暴露token和密鑰等信息

安裝和操作簡單,兩步設置完成

1.安裝插件

npm install --save-dev @sentry/webpack-plugin

2.在項目中配置

在webpack.config.js中配置

// 引入插件 const SentryWebpackPlugin = require("@sentry/webpack-plugin"); // 設置插件內容 module.exports = {// 其他配置plugins: [// 建議放在pluins的最后面new SentryWebpackPlugin({release:"v2.2.2",include: ".",ignoreFile: ".sentrycliignore",ignore: ["node_modules", "webpack.config.js"],configFile: "sentry.properties",urlPrefix:"~/static/js" // 后面會講到}),], };

記得版本號和sentry初始化的版本號保持一致

Sentry.init({Vue,dsn: "https://930e20c084384f399125a19fe2615d60@o1154977.ingest.sentry.io/6235081", release:"v2.2.2",integrations: [new BrowserTracing({logErrors: true,routingInstrumentation: Sentry.vueRouterInstrumentation(router),tracingOrigins: ["localhost", "my-site-url.com", /^\//],}),],tracesSampleRate: 1.0, });

官方文檔:

https://docs.sentry.io/platforms/javascript/config/sourcemaps/#webpack

打包構建

npm run build

上傳到服務器

1.查看發布的版本,從對應版本進入項目

2.查看錯誤日志

3.切換配置,查看源碼信息

上傳sourceMap前只有 Full和Raw兩個選項,而且錯誤日志不是很明確,不能定位到發生錯誤的地方

sourceMap上傳并生效后,如圖可以切換Original等選項,切換后可以看到報錯的代碼內容

在上傳sourceMap的時候會遇到幾個坑

1: 安裝插件前要先配置**.sentryclirc**文件,只有插件是無法上傳到指定項目的

2: token為API令牌,需要自己創建,不是錯以為是設置中的安全令牌或者其他key

3:插件方法SentryWebpackPlugin中要設置release參數指定版本,同時Sentry.init方法中也要release參數指定版本,兩個版本號需要保持一致,sourceMap才會生效

4:即便上傳了sourceMap和保持release版本號一致,還需要一個文件路徑的配置,方便sourceMap定位到要訪問的文件,需要指定urlPrefix參數

urlPrefix不設置的話,默認為_/,代表網站的協議和域名

map文件一般被webpack打包在根目錄/static/js/的文件夾下,如訪問https://dsx2016.com,那么map文件就是https://dsx2016.com/static/js/xxx.map,所以要指定urlPrefix為"~/static/js"

如果經過nginx等代理導致目錄更深一級等,就加入到對應的前綴即可,如果nginx代理網站為https://dsx2016.com/home,那么map文件就是https://dsx2016.com/home/static/js/xxx.map,所以要指定urlPrefix為"~/home/static/js",具體的目錄看具體的場景,直接看打包好部署的map在哪個文件即可

5: 只需要指定在生產環境(線上環境)上傳map即可,即build的時候,run dev太頻繁,不需要source map,上傳sourceMap文件過于頻繁,sentry會報錯,如在webpack.prod.conf.js文件中配置等

總結

以上是生活随笔為你收集整理的sentry使用webpack上传sourceMap源文件定位错误到更详细具体的代码片段的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。