vue項目前端錯誤收集之sentry

sentry簡介

Sentry 是一個開源的錯誤追蹤工具，能夠幫助開發人員實時監控和修復系統中的錯誤。其專一於錯誤監控以及提取一切過後處理所需的信息;支持幾乎全部主流開發語言(JS/Java/Python/php)和平臺, 並提供了web來展現輸出錯誤。
sentry官網：https://sentry.io/

sentry安裝

sentry 是一個開源的工具，能夠自行搭建。
官方支持兩種安裝和運行 Sentry 服務器的方法，Docker 和 Python。推薦使用 Docker。
固然，對於剛開始接觸 sentry 的同窗，也能夠直接使用官方提供的免費服務，可是有一些限制。
下面先來介紹一下利用官方的免費服務，在前端項目中如何使用 sentry。

如何在項目中使用sentry

1. 首先須要在 sentry 的官網註冊一個帳號。註冊完選擇新建一個項目，sentry 支持多種框架，在其中選擇 vue 建立項目。我建立了一個名爲test的項目。

1. 建立項目頁面會自動跳轉到如何配置vue項目頁面。接下來就按照指引在vue代碼裏引入 sentry。能夠經過 cdn 或者 npm 引入。咱們採用 npm 引入。引入的時候須要給 init 函數傳遞一個 dsn 參數。這個參數惟一指定了咱們剛纔建立的項目，在建立項目的時候系統會自動生成。若是不傳這個參數，sentry 不會發送錯誤。

// main.js
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';
// 在生產環境中讓sentry報錯
process.env.NODE_ENV === "production" && Sentry.init({
  dsn: 'https://1111a5bc59b54778b75f4e3a92f2e462@sentry.io/1447145',
  integrations: [
    new Integrations.Vue({
      Vue,
      attachProps: true,
    }),
  ],
});

在項目跟目錄下增長.sentryclirc文件，其中的token能夠在左上角頭像裏的api keys裏面獲取。

[auth]
token="your token"

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

而後咱們在代碼裏製造一個錯誤，就可讓 sentry 捕獲了。本地如何模擬線上環境訪問dist下的文件呢？須要裝一個 http-server ，在dist文件夾下啓動一個http服務就能夠了。

npm i http-server 
cd dist
http-server -p 8888

注意：sentry捕獲到的錯誤不會在打印在控制檯中。

在network中能夠看到，sentry 發送了一個錯誤請求，請求參數以下：

接下來咱們就能夠在後臺看到剛纔上傳的錯誤信息，同時 sentry 也會給你的郵箱發送一封錯誤郵件。

錯誤信息查看

在後臺找到咱們的test項目，點擊進去就能看到多了一條錯誤信息。

點擊信息能夠進入信息詳情進行查看。

可是這個錯誤信息是壓縮後的，不能定位到代碼的實際位置。使用意義不大，所以須要上傳 source-map。

上傳source-map

上傳的方式有多種。能夠經過 sentry-cli 經過命令行的方式來上傳 source-map，可是須要手動上傳。也能夠採用 webpack-plugin 這個插件，能夠在 build 的同時自動上傳 source-map。本文采用自動上傳策略。

項目配置：

// webpack.prod.conf
const SentryCliPlugin = require("@sentry/webpack-plugin");
plugins:[
    new SentryCliPlugin({
        include: "./dist",
        release: process.env.RELEASE_VERSION,
        configFile: "sentry.properties"
    })
]

// main.js
Sentry.init({
    dsn: "https://4ec86726f2ba40338f66837c6b959eed@sentry.io/1447158",
    integrations: [
        new Integrations.Vue({
            Vue,
            attachProps: true
        }),
        new Integrations.RewriteFrames()
    ],
    release: process.env.RELEASE_VERSION
});

// prod.env.js
"use strict";
const release = "test-1";
process.env.RELEASE_VERSION = release;
module.exports = {
    NODE_ENV: '"production"',
    RELEASE_VERSION: `"${release}"`
};

須要保證 plugins 和 Sentry.init 兩個配置中的 release 版本號相同，這樣的話 sentry 才能將 source-map 文件一一對應上。
修改完以後咱們從新build一下項目，build的過程比較慢：

以後咱們去後臺能夠看見在版本中多了一個 test-1 版本，也就是咱們剛剛上傳的版本。

點進去能夠看見咱們剛纔上傳的 source-map 文件。

這時咱們從新觸發一次錯誤，就能夠看到具體的出錯位置了。

sentry關聯github

在設置->集成裏面能夠設置 sentry 關聯各類服務，如 github、jira 等。關聯上 github 後，能夠直接爲該異常建立issue。

這樣在該異常的詳情頁就能夠建立issue到 sentry 這個倉庫了。

建立時能夠選擇倉庫，名稱，詳情及指定給誰：

打開 github ，在 sentry 這個倉庫下，發現多了一個issue，就是剛纔咱們建立的。

在咱們向 github 提交 commit 的時候，若是加上了異常的id，例如這樣：

git commit -m 'Fixes TEST-3'

這樣在下次發版 build 的時候，sentry 會自動將該異常的狀態從 unresolved 變成 resolved，並會給出本次提交的 diff 地址。

搭建sentry服務

官方給出的有兩種方法能夠自行搭建sentry：

• python
• docker

推薦使用docker。下面來介紹一下經過docker如何搭建sentry。

首先須要下載docker
mac桌面版地址：https://hub.docker.com/editions/community/docker-ce-desktop-mac

其中已經集成了docker命令行、docker-compose等。

而後須要去github拉取 Sentry On-Premise，這個是官方提供的經過docker安裝sentry的倉庫，裏面介紹瞭如何一步一步搭建sentry。

建立服務步驟：

cd onpremise
// 建立本地數據庫
docker volume create --name=sentry-data && docker volume create --name=sentry-postgres
// 建立環境配置文件
cp -n .env.example .env 
// 構建docker服務
docker-compose build
// 產生祕鑰，將其做爲SENTRY_SECRET_KEY加入到.env文件中
// 建立數據庫，用交互式的提示生成管理員帳號
docker-compose run --rm web upgrade
// 啓動全部服務
docker-compose up -d

若是過程一切正常的話，如今訪問localhost:9000就能看到sentry的登陸頁面了，用剛纔生成的管理員帳號密碼登陸便可。

之後的操做就跟上面介紹的同樣了。

注意事項

1. 利用本地搭建的sentry建立項目的時候，發現dsn那一欄是空的，系統並無自動生成。須要本身拼接這個dsn。它由如下幾部分組成，分別是協議、公鑰、私鑰、主機、路徑（通常爲空）、項目id。

'{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}'
//相似這樣，把它放在sentry.init中的dsn便可
http://4cf10206ef27409bbb64f68b:a67a0eb5513e43ab883af3f3@localhost:9000/2