基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题...
背景
?
在這越來越發(fā)達的網(wǎng)絡時代，web應用也是越來越復雜，尤其是前端的開發(fā)，也是越來越受重視。
所以在我們前端開發(fā)完成后，會有一些列的web應用的上線驗證，如自測、QA測試、code review 等，以確保
應用能在生產(chǎn)上沒有事故。
但是事以愿違，很多時候我們都會接受的客戶的一些線上問題，這些問題有時候可能你是自己開發(fā)的原因本身存
在的問題，這樣的問題一般能夠在測試環(huán)境重現(xiàn)，我們很快的能定位到問題關(guān)鍵位置。但是，很多時候有一些問題，
我們在測試中并未發(fā)現(xiàn)，可是在線上卻有部分人出現(xiàn)了，問題確確實實存在的，這個時候我們測試環(huán)境又不能重現(xiàn)，
還有一些偶現(xiàn)的生產(chǎn)的偶現(xiàn)問題，這些都是難以定位到問題的原因，讓我們前端工程師頭疼不已。
這時候，我們不得不借助一些功能來解決這一些列的頭疼問題。
?
前端錯誤監(jiān)控日志系統(tǒng)
當前端代碼在生產(chǎn)運行中出現(xiàn)錯誤的時候，第一時間傳遞給監(jiān)控系統(tǒng)，從而第一時間定位并且解決問題。
保證前端代碼的穩(wěn)定和安全，是項目可以健康的運行。
?
監(jiān)控系統(tǒng)搭建方案
?
1、自行可以規(guī)劃定義一套完善的監(jiān)控系統(tǒng)。需要人力重新開發(fā)
2、借助第三方插件( 阿里ARMS、fundebug、BadJS，sentry 等 )
阿里ARMS ：是阿里的一個前端數(shù)據(jù)監(jiān)控的服務，似乎是收費的
fundebug ：挺完善的前端錯誤日志服務，也是收費的
BadJS ：騰訊團隊的一個開源項目，沒看過，應該很不錯的
sentry ：github 上面的一個開源項目，支持各端的錯誤監(jiān)控 ( 本文就是基于 sentry 搭建的錯誤監(jiān)控系統(tǒng) )
?
系統(tǒng)的搭建與使用
?
sentry 簡介
sentry 是一個開源的實時錯誤監(jiān)控的項目，它支持很多端的配置，包括 web 前端、服務器端、移動端及其游戲端。
支持各種語言，例如 python、oc、java、node、javascript 等。也可以應用到各種不同的框架上面，如前端框架中的
vue 、angular 、react 等最流行的前端框架。
提供了github、slack、trello 的常見的開發(fā)工具的集成。可以自己安裝并且搭建 sentry 應用。
?
支持的語言：
?
?
sentry 的部署
官網(wǎng)提供了兩種部署方案：
docker
python
docker 是我第一次使用，看了下文檔，感覺挺容易明白。
在這里為了操作方便考慮，我們選擇使用docker來部署搭建 sentry。
這種方法的話需要安裝 docker 和 docker - compose 。
?
1、docker 的部署 (mac版)
安裝的話，可以直接去看看 docker 安裝文檔
docker 安裝
mac 版的安裝，docker-compose 已經(jīng)一起安裝好了。
?
2、部署 sentry
獲取 sentry 代碼
從 github 上面可以獲取到最新的 sentry 代碼
| 1 | git clone https://github.com/getsentry/onpremise.git |
獲取到本地之后，進入項目的目錄。
按照項目的 readme.md 開始依照步驟搭建。
| 1 | docker-compose run --rm web config generate-secret-key |
這里是生產(chǎn)密鑰，SENTRY_SECRET_KEY 這個需要添加到 docker-compose.yml 中。
最后一步：
| 1 | docker-compose up -d |
至此，我們監(jiān)控系統(tǒng)的后端服務器已經(jīng)跑起來了，訪問本地的9000端口。
使用中途創(chuàng)建的 郵箱和密碼登陸 我們的服務后端。
?
?
3、創(chuàng)建項目
登陸后我們會進入我們的監(jiān)控項目的界面，如：
?
點擊右上角的? add new project ，我們可以創(chuàng)建一個新的項目
這里可以選擇項目的配置，語言以及框架，選擇自己的項目類型
輸入項目名稱，點擊 create project 。確定創(chuàng)建新項目。
?
?
? 點擊紅框框的，創(chuàng)建一個簡單的日志。
?
? 錯誤信息頁面，可以自行到官網(wǎng)上面去了解更多信息。
?
?
4、前端部署，注入監(jiān)控代碼?
獲取項目的鏈接：
在項目的首頁點擊 install 會進入當前圖示頁面
我們復制 sentry DSN 到我們前端配置中
?
引用 sentry ，注入配置到我們的應用中：
?
?
? 這里是以 react 為例，我們在 react 的根組建的 componentDidCatch 上面捕獲錯誤，并且上傳到我們監(jiān)控系統(tǒng)中。
這里的我們用 sentry DSN 配置我們的 sentry 并且初始化 sentry 項目。
?
到這里我們基本，已經(jīng)完成了我們的前端錯誤監(jiān)控日志系統(tǒng)了。
?
?
sentry 操作界面介紹
?
項目操作頁面：
?
1、項目的查看選項
Issue ： 問題列表
overview ： 概況縱覽
userfeedback ： 用戶反饋
Resleases ： 版本列表信息
setting ： 項目設(shè)置
?
2、問題篩選
包括 ： 指派自己的 、 標記列表 、需要分類的 、 今天的 、 未處理的
?
?
? 設(shè)置為 解決 、 忽略 、 合并 、標記 、實時監(jiān)控
?
?
?
?
?
?
sentry 的api介紹和使用
1、javascript SDK 引用與配置
?
現(xiàn)在有兩種方法引用 sentry SDK :
?
直接引用：
最快的方法就是通過 script 標簽引用我們的 sdk?
| 1 | <script src="https://browser.sentry-cdn.com/4.4.1/bundle.min.js"?crossorigin="anonymous"></script> |
然后就是配置了。
| 1 | Sentry.init({ dsn:?'https://<key>@sentry.io/<project>'? |
總結(jié)
以上是生活随笔為你收集整理的基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 巡逻机器人用应用的pc端车牌识别
- 下一篇： 每日 30 秒 ⏱ HTML Cospl