Vue 專案中接入sentry

daipeng7發表於2019-03-04

Vue 專案中接入sentry

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

一、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這塊與本文無關就暫時不說了，可以檢視。

1、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 通常為空。複製程式碼

二、sentry服務平臺配置

1、建立專案

2、獲取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”中檢視

三、客戶端設定

在客戶端中接入是簡單的，只需要配置外掛就可以了。但是要注意的是，必須在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();複製程式碼