Vue 專案中接入sentry

daipeng7發表於2019-03-04
Vue

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();複製程式碼

四、報錯後

點選進去可以檢視詳情，且會將報錯資訊預設傳送到註冊郵箱。

五、sourceMap release version 上傳

現在的前端專案基本都會使用工具進行編譯打包壓縮等（webpack）。那麼，這樣的程式碼在釋出後一旦報錯返回的原始碼可能你就很難找到具體位置在哪裡了。

一般這種情況我們可以選擇在sentry中建立一個release版本，並且將sourceMap提交上去。產品釋出時不釋出sourceMap的。當出現報錯時，提交錯誤到sentry，回去匹配相應版本的release版本的sourceMap然後你看見的程式碼就是報錯原始碼了。

sourceMap怎樣建立release、上傳、刪除等API可以從官方文件按需檢視，都很詳細。

相關文章