Vue 項目中接入sentry

Vue 項目中接入sentry

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

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、報錯後

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