sentry 接入 source map

采用sentry監控前端錯誤的時候，我們會發現上傳的錯誤很簡單，基本上對排除錯誤沒有太大幫助。如下圖：

我們可以通過配置生成source map，并将其上傳到sentry伺服器（建議自建伺服器，這樣比較安全）。使報錯資訊更友好。

1、配置你的webpack 的devtool,使其生成source map，建議配置devtool為 hidden-source-map ，而不是網上一些資料推薦的cheap-module-source-map ，webpack文檔裡面線上環境并沒有推薦cheap-module-source-map，且設定cheap-module-source-map呈現出來的錯誤資訊也很簡單。

2、采用webpack-sentry-plugin 上傳生成的source map到自建sentry伺服器

插件位址：https://github.com/40thieves/webpack-sentry-plugin

安裝插件

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

将插件添加到webpack配置裡，建議隻在建構的情況下進行接入，本地開發就别接入插件了。

var config = {
 plugins: [
   new SentryPlugin({
     organization: 'your-organization-name', // 組織名稱
     project: 'your-project-name', // 項目名稱
     apiKey: process.env.SENTRY_API_KEY, 
     release(hash) { // release版本
        return `${projectName}-${hash.substr(0, 8)}`
     }，
     baseSentryURL: '自建伺服器位址/api/0', // 配置指到我們的自建伺服器，api/0 是固定
     include: /\.map$/   //正則，比對哪些檔案上傳
   })
 ]
}
           

3、接入過程中的注意事項：

api key 在下面這個地方擷取，如果還沒人建立過，自己建立一個，記得勾上project:write

版本号

release(hash) {       

    return `${projectName}-${hash.substr(0, 8)}`

}

hash使webpack編譯後産生的hash，下面的`${projectName}-${hash.substr(0, 8)}`使我自定義的，搭建可以根據自己的需要來。

4、接入過程中遇到的坑：

404 錯誤：一般是組織或者項目參數寫錯，導緻拼接出來的請求位址找不到。注意組織指的是公司名稱，而不是部們名稱。

502錯誤：一般是上傳太多檔案導緻伺服器錯誤，添加include進行過濾，隻上傳map檔案。

409錯誤：兩次上傳内容相同。