Vue 項目中接入sentry

Vue 項目中接入sentry

最近在公司的內部Vue項目中接入sentry技術棧，跟蹤運行時錯誤。
針對這件事分享下，有不完整或者錯誤的地方歡迎交流。 github

1、sentry 錯誤日誌收集框架

Stop hoping your users will report errors
Open-source error tracking that helps developers monitor and fix crashes in real time. Iterate continuously. Boost efficiency. Improve user experience.

若是項目容許，你能夠在sentry申請一個免費帳戶，管理你項目上傳的運行時錯誤。也能夠在公司搭建一個sentry。關於搭建sentry這塊與本文無關就暫時不說了，能夠查看。

一、sentry的原理（我的看法）

（1）sentry是一個收集項目運行時錯誤日誌的框架，這個框架就要分爲服務平臺和客戶端了。

服務平臺： 能夠本身本身搭建，也可使用官網的（免費、付費）
    客戶端：從他的出發點是監控項目代碼來理解就知道，須要嵌入項目中。做爲前端的話第一個想到的就是插件了。複製代碼

（2）、語言的多樣化，開發使用語言是多樣化的因此sentry支持的語言也比較多

（3）、錯誤日誌的收集方式。代碼中產生的錯誤日誌怎樣上傳到sentry服務平臺。

當你完成sentry配置的時候，你會獲得一個稱爲「DSN」的值，看起來像一個標準的URL。
Sentry 服務支持多用戶、多團隊、多應用管理，每一個應用都對應一個 PROJECT_ID，以及用於身份認證的 PUBLIC_KEY 和 SECRET_KEY。
由此組成一個這樣的 DSN：
'{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}'
PROTOCOL 一般會是 http 或者 https，HOST 爲 Sentry 服務的主機名和端口，PATH 一般爲空。複製代碼

2、sentry服務平臺配置

一、建立項目

二、獲取SENTRY_DSN（也叫Client Keys）

To send data to Sentry you will need to configure an SDK with a client key (usually referred to as the SENTRY_DSN value). For more information on integrating Sentry with your application take a look at our documentation.

若是是使用的免費的sentry
'{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}'
PROTOCOL 一般會是 http 或者 https，HOST 爲 Sentry 服務的主機名和端口，PATH 一般爲空。
具體的能夠在你的項目中「Project Setting」中查看

3、客戶端設置

在客戶端中接入是簡單的，只須要配置插件就能夠了。可是要注意的是，必須在Vue配置以前。每個的客戶平臺配置內容能夠在官網查找。

import Vue from 'vue';
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';

Raven
    .config('https://60f9e820eb7b4a8f9beb62a314b1f80d@sentry.io/242345')
    .addPlugin(RavenVue, Vue)
    .install();複製代碼

4、報錯後

點擊進去能夠查看詳情，且會將報錯信息默認發送到註冊郵箱。

5、sourceMap release version 上傳

如今的前端項目基本都會使用工具進行編譯打包壓縮等（webpack）。那麼，這樣的代碼在發佈後一旦報錯返回的源碼可能你就很難找到具體位置在哪裏了。

通常這種狀況咱們能夠選擇在sentry中建立一個release版本，而且將sourceMap提交上去。產品發佈時不發佈sourceMap的。當出現報錯時，提交錯誤到sentry，回去匹配相應版本的release版本的sourceMap而後你看見的代碼就是報錯源碼了。

sourceMap怎樣建立release、上傳、刪除等API能夠從官方文檔按需查看，都很 詳細。