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