sentry上傳sourcemap

前言

閱讀這篇文章的大前提是你已經建立了一個sentry項目，可是但願在sentry的報錯中可以提示更多的信息，因此但願經過sourcemap來定位問題。這篇文章基於vue-cli中的webpack模式，其餘模式原理同樣。

注意：本文只是提供思路，並不能夠用於生產環境，由於涉及到打包流程，而每一個項目的打包方式並不一致，因此能夠根據此思路去實現本身的上報流程。

sentry-cli構建

1)、生成api-key

這一步主要是用來上傳時登陸須要，點擊頭像 => 點擊API keys

若是你已經建立過token，你的界面會和我同樣，若是沒建立，根據提示創濟南便可，但注意一點的是，須要勾選project:write

2）、安裝sentry-cli

• 先全局安裝sentry-cli

npm install sentry-cli-binary -g

• 安裝完成後登陸sentry

sentry-cli login

這時會提示輸入token，把剛纔第一步建立的token粘貼到這裏，運行

而後你會看到提示建立了一個.sentrylrc文件，文件的內容以下

補充org和project信息到.sentrylrc

3）、注入異常

咱們在代碼中，注入一些異常，並指定release版本

4)、構建代碼

運行命令

npm run build

最終會在根目錄生成dist文件夾。

5)、上傳sourcemap

# sentry-cli releases files <release名稱> upload-sourcemaps --url-prefix <線上資源URI> <打包出來的js文件所在目錄>
sentry-cli releases files demo-test001 upload-sourcemaps --url-prefix '~/static/js' './dist/static/js'

運行例子後的結果如圖

打開sentry的項目，查看版本，會發現多了一些資源，但實際上有用的是map文件，因此在上傳完成後須要根據實際狀況在構建腳本中把對應的map文件刪除，避免打包到生產中(其中一個緣由是文件太大，另外一個緣由是不安全)。

6）、觸發異常

這時，你能夠經過訪問本地的http://127.0.0.1:6324，而後觸發咱們構建的異常，由於我本地構建了一個服務，若是你也但願構建此服務，你能夠經過安裝http的服務包

# 我這個例子中線上資源是由於我在本地經過http-server起了一個服務來訪問
# 若是你也但願這麼作，你能夠
npm i -g http-server 
cd dist
http-server -p 6324

此時會看到控制檯拋出異常，同時會發送一個請求到sentry的服務器

此時打開sentry的控制檯，你會看到剛纔觸發的錯誤

打開這個錯誤，就能夠看到具體的錯誤信息，定位問題變得更加容易

@sentry/webpack-plugin構建

上面利用sentry-cli構建時，相對麻煩，並且會暴露key等一些信息，因此咱們但願利用webpack插件來加快咱們的上傳。

1)、安裝@sentry/webpack-plugin插件, 通常會同時安裝@sentry/cli

npm i @sentry/webpack-plugin --dev

2）、根目錄建立.sentryclirc文件

[defaults]
url = https://sentry.io/
org = your org
project = your project

[auth]
token = your token

3)、在config/prod.env.js建立環境變量

// config/prod.env.js

const release = 'demo-test006'; // 能夠根據package.json的版本號或者Git的tag命名
process.env.RELEASE_VERSION = release;
module.exports = {
  NODE_ENV: '"production"',
  RELEASE_VERSION: `"${release}"`,
}

4)、寫入插件

// build/webpack.prod.config.js

const SentryPlugin = require('@sentry/webpack-plugin')
// ...省略一堆

plugins: [
  // ...省略一堆
  new SentryPlugin({
    include: './dist',
    release: process.env.RELEASE_VERSION,
    configFile: 'sentry.properties',
    urlPrefix: '~/'
  })
]

5)、運行打包

npm run build

此時在服務中打開觸發錯誤，你就會在sentry中查看到具體的錯誤信息。對比cli構建的方式，webpack的優點仍是蠻大的，可是利用cli的好處是我能夠把token放在服務器，這樣就能夠避免token的泄露。

webpack-sentry-plugin構建

這個包目前支持webpack123版本上傳sourcemap，並且周下載量也達到11k。這個包有一個優點是能夠在上傳後刪除打包後的sourcemap，能夠節省後面上傳打包後文件的過濾sourcemap的操做。
PS: 先確保沒有全局安裝sentry-cli包，不然會有衝突

1)、安裝webpack-sentry-plugin插件

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

2)、根目錄建立sentry.config.js(僅僅是爲了方便管理token)

module.exports = {
  organization: '',
  project: '',
  apiKey: '',
};

3)、在config/prod.env.js建立環境變量（同上）

4)、寫入插件

// build/webpack.prod.config.js

const SentryPlugin = require('webpack-sentry-plugin')
// ...省略一堆

plugins: [
  // ...省略一堆
  new SentryPlugin(Object.assign({
      release: process.env.RELEASE_VERSION,
      deleteAfterCompile: true,
      // exclude: /(\.css\.map| \.css | \.html)$/,
      include: /(\.js\.map | \.js)$/, // 只上傳js和map文件
      filenameTransform: function (filename) {
        return '~/' + filename
      },
    }, require('../sentry.config.js')))
]

5)、運行打包

npm run build

其實這個插件和官方的@sentery/webpack-plugin功能差很少，只不過多了一些配置項，例如刪除sourcemap

加強sentry異常捕捉

續。。

sentry的小知識點

• 發送郵件

通常來講，sentry是默認會打開郵箱發送選項的，若是觸發錯誤後並無收到郵件，你能夠點擊下方的框框，勾選郵件

• 設置觸發異常的用戶,更有利於追蹤，文檔：https://docs.sentry.io/learn/context/

  // 通常是登陸登陸後獲取到具體信息時帶入
  Raven.setUserContext({
    user: 'xxx',
    id: 'sss',
  });

• Issue關聯GITHUB/GITLAB（暫時用處不大）