初識(shí)Sentry前端監(jiān)控

前言

今早偶爾讀到方神發(fā)表了一篇 sentry(一）初探 的文章，正是我最近需要的，于是自己動(dòng)手豐衣足食，搭建了一個(gè)屬于自己的基于Sentry的前端監(jiān)控平臺(tái)。

為什么要做前端監(jiān)控？

相信每個(gè)前端開發(fā)人員都會(huì)遇見到下面這種情況！

客戶：為什么我這個(gè)頁面看不到數(shù)據(jù)？？
我：（急忙打開網(wǎng)站），我這邊數(shù)據(jù)顯示正常！
客戶：沒有??！我這邊看不到！
我：（語無倫次），可我...我這邊正常的呀
客戶：BALABALA

自己開發(fā)機(jī)器明明正常，到了用戶那邊卻一大堆問題，這就導(dǎo)致了定位問題非常困難，總不能在用戶端打開F12查看控制臺(tái)有什么錯(cuò)誤吧！

Sentry簡(jiǎn)介

Sentry 是一個(gè)開源的實(shí)時(shí)錯(cuò)誤監(jiān)控的項(xiàng)目，它支持很多端的配置，包括 web 前端、服務(wù)器端、移動(dòng)端及其游戲端。支持各種語言，例如 python、oc、java、node、javascript 等。也可以應(yīng)用到各種不同的框架上面，如前端框架中的vue 、angular 、react 等最流行的前端框架。Sentry可以幫助我們完成以下工作：例如，線上有一個(gè)bug，代碼的某處邏輯的NullPointerException造成了這個(gè)問題，Sentry會(huì)立即發(fā)現(xiàn)錯(cuò)誤，并通過郵件或其他基于通知規(guī)則的集成通知到相關(guān)責(zé)任人員，這個(gè)通知可以把我們引入到一個(gè)指示板，這個(gè)指示板為我們提供了快速分類問題所需的上下文，如：頻率、用戶影響、代碼那一部分受到影響以及那個(gè)團(tuán)隊(duì)可能是問題的所有者。

Sentry原理

Sentry到底是如何實(shí)現(xiàn)實(shí)時(shí)日志監(jiān)控報(bào)警的呢？首先，Sentry是一個(gè)C/S架構(gòu)，我們需要在自己應(yīng)用中集成Sentry的SDK才能在應(yīng)用發(fā)生錯(cuò)誤是將錯(cuò)誤信息發(fā)送給Sentry服務(wù)端。根據(jù)語言和框架的不同，我們可以選擇自動(dòng)或自定義設(shè)置特殊的錯(cuò)誤類型報(bào)告給Sentry服務(wù)端。

而Sentry的服務(wù)端分為web、cron、worker這幾個(gè)部分，應(yīng)用（客戶端）發(fā)生錯(cuò)誤后將錯(cuò)誤信息上報(bào)給web，web處理后放入消息隊(duì)列或Redis內(nèi)存隊(duì)列，worker從隊(duì)列中消費(fèi)數(shù)據(jù)進(jìn)行處理。

Sentry 服務(wù)部署

官方推薦使用Docker進(jìn)行部署

環(huán)境依賴：

Docker 17.05.0+
Compose 1.23.0+
至少需要2400MB RAM

1. 拉取鏡像

docker pull sentry 
docker pull redis
docker pull postgres

2. 啟動(dòng)服務(wù)

docker run -d --name sentry-redis --restart=always redis 
docker run -d --name sentry-postgres -e POSTGRES_PASSWORD=secret -e POSTGRES_USER=sentry --restart=always postgres

3. 生成sentry秘鑰

docker run --rm sentry config generate-secret-key

4. 數(shù)據(jù)庫(kù)及賬戶初始化及

docker run -it --rm -e SENTRY_SECRET_KEY='(om)y06(q=hf--s3(8922*m01n@t@ldcmgucr-!8!nn*kmq(72' --link sentry-postgres:postgres --link sentry-redis:redis sentry upgrade

5. 啟動(dòng)sentry的web服務(wù)

docker run -d -p 9000:9000 --name my-sentry -e SENTRY_SECRET_KEY='(om)y06(q=hf--s3(8922*m01n@t@ldcmgucr-!8!nn*kmq(72' --link sentry-redis:redis --link sentry-postgres:postgres --restart=always sentry

6.啟動(dòng)sentry-cron/work服務(wù)

docker run -d --name sentry-cron -e SENTRY_SECRET_KEY='(om)y06(q=hf--s3(8922*m01n@t@ldcmgucr-!8!nn*kmq(72' --link sentry-postgres:postgres --link sentry-redis:redis sentry run cron

docker run -d --name sentry-worker-1 -e SENTRY_SECRET_KEY='(om)y06(q=hf--s3(8922*m01n@t@ldcmgucr-!8!nn*kmq(72' --link sentry-postgres:postgres --link sentry-redis:redis sentry run worker

7. 登陸sentry后臺(tái)

http://ip:9000/

安裝SDK上報(bào)數(shù)據(jù)

1. 創(chuàng)建項(xiàng)目

登陸后我們會(huì)進(jìn)入我們的監(jiān)控項(xiàng)目的界面，如：

點(diǎn)擊右上角的  add new project ，我們可以創(chuàng)建一個(gè)新的項(xiàng)目。

選擇Vue，再做簡(jiǎn)單設(shè)置，project創(chuàng)建成功后會(huì)跳轉(zhuǎn)到SDK安裝方法。

2. SDK引用與配置

npm i @sentry/browser @sentry/integrations

import Vue from 'vue'
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';

Sentry.init({
  dsn: 'http://[email protected]:9000/3',
  integrations: [
    new Integrations.Vue({ 
        Vue, 
        attachProps: true 
    }
  )]
})

3. 寫段業(yè)務(wù)代碼看看效果

寫一個(gè)Vue 異常代碼：

我們?cè)龠M(jìn)入sentry看看監(jiān)控的效果：

進(jìn)去有錯(cuò)誤明細(xì)與用戶的操作時(shí)間軌跡（這一點(diǎn)非常方便）

客戶端詳細(xì)的信息：

總結(jié)

基于Sentry的前端監(jiān)控搭建部署完成后，我們就可以實(shí)時(shí)收集前端JS運(yùn)行中的錯(cuò)誤以及具體詳情，分析后排查問題，對(duì)于生產(chǎn)中偶遇的BUG很有用，初識(shí)篇先介紹到這里，后續(xù)會(huì)介紹sentry的更多特性，敬請(qǐng)期待。