初識Sentry前端監(jiān)控
前言
今早偶爾讀到方神發(fā)表了一篇 sentry(一）初探 的文章，正是我最近需要的，于是自己動手豐衣足食，搭建了一個屬于自己的基于Sentry的前端監(jiān)控平臺。
為什么要做前端監(jiān)控？
相信每個前端開發(fā)人員都會遇見到下面這種情況！
客戶：為什么我這個頁面看不到數(shù)據(jù)？？
我：（急忙打開網(wǎng)站），我這邊數(shù)據(jù)顯示正常！
客戶：沒有啊！我這邊看不到！
我：（語無倫次），可我...我這邊正常的呀
客戶：BALABALA
自己開發(fā)機(jī)器明明正常，到了用戶那邊卻一大堆問題，這就導(dǎo)致了定位問題非常困難，總不能在用戶端打開F12查看控制臺有什么錯誤吧！
Sentry簡介
Sentry 是一個開源的實(shí)時錯誤監(jiān)控的項(xiàng)目，它支持很多端的配置，包括 web 前端、服務(wù)器端、移動端及其游戲端。支持各種語言，例如 python、oc、java、node、javascript 等。也可以應(yīng)用到各種不同的框架上面，如前端框架中的vue 、angular 、react 等最流行的前端框架。Sentry可以幫助我們完成以下工作：例如，線上有一個bug，代碼的某處邏輯的NullPointerException造成了這個問題，Sentry會立即發(fā)現(xiàn)錯誤，并通過郵件或其他基于通知規(guī)則的集成通知到相關(guān)責(zé)任人員，這個通知可以把我們引入到一個指示板，這個指示板為我們提供了快速分類問題所需的上下文，如：頻率、用戶影響、代碼那一部分受到影響以及那個團(tuán)隊(duì)可能是問題的所有者。
Sentry原理
Sentry到底是如何實(shí)現(xiàn)實(shí)時日志監(jiān)控報警的呢？首先，Sentry是一個C/S架構(gòu)，我們需要在自己應(yīng)用中集成Sentry的SDK才能在應(yīng)用發(fā)生錯誤是將錯誤信息發(fā)送給Sentry服務(wù)端。根據(jù)語言和框架的不同，我們可以選擇自動或自定義設(shè)置特殊的錯誤類型報告給Sentry服務(wù)端。
而Sentry的服務(wù)端分為web、cron、worker這幾個部分，應(yīng)用（客戶端）發(fā)生錯誤后將錯誤信息上報給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. 啟動服務(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ù)庫及賬戶初始化及
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. 啟動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.啟動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后臺
http://ip:9000/
安裝SDK上報數(shù)據(jù)
1. 創(chuàng)建項(xiàng)目
登陸后我們會進(jìn)入我們的監(jiān)控項(xiàng)目的界面，如：
點(diǎn)擊右上角的 add new project ，我們可以創(chuàng)建一個新的項(xiàng)目。
選擇Vue，再做簡單設(shè)置，project創(chuàng)建成功后會跳轉(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ù)代碼看看效果
寫一個Vue 異常代碼：
我們再進(jìn)入sentry看看監(jiān)控的效果：
進(jìn)去有錯誤明細(xì)與用戶的操作時間軌跡（這一點(diǎn)非常方便）
客戶端詳細(xì)的信息：
總結(jié)
基于Sentry的前端監(jiān)控搭建部署完成后，我們就可以實(shí)時收集前端JS運(yùn)行中的錯誤以及具體詳情，分析后排查問題，對于生產(chǎn)中偶遇的BUG很有用，初識篇先介紹到這里，后續(xù)會介紹sentry的更多特性，敬請期待。
end
