基於sentry的前端錯誤監控日誌系統(部署sentry服務器/前端項目部署)-讓前端最快的定位到生產問題

背景

  在這愈來愈發達的網絡時代,web應用也是愈來愈複雜,尤爲是前端的開發,也是愈來愈受重視。javascript

  因此在咱們前端開發完成後,會有一些列的web應用的上線驗證,如自測、QA測試、code review 等,以確保html

應用能在生產上沒有事故。前端

  可是事以願違,不少時候咱們都會接受的客戶的一些線上問題,這些問題有時候可能你是本身開發的緣由自己存vue

在的問題,這樣的問題通常可以在測試環境重現,咱們很快的能定位到問題關鍵位置。可是,不少時候有一些問題,java

咱們在測試中並未發現,但是在線上卻有部分人出現了,問題確確實實存在的,這個時候咱們測試環境又不能重現,node

還有一些偶現的生產的偶現問題,這些都是難以定位到問題的緣由,讓咱們前端工程師頭疼不已。python

  這時候,咱們不得不借助一些功能來解決這一些列的頭疼問題。react

  前端錯誤監控日誌系統  

  當前端代碼在生產運行中出現錯誤的時候,第一時間傳遞給監控系統,從而第一時間定位而且解決問題。git

  保證前端代碼的穩定和安全,是項目能夠健康的運行。github

監控系統搭建方案

  一、自行能夠規劃定義一套完善的監控系統。須要人力從新開發

  二、藉助第三方插件( 阿里ARMS、fundebug、BadJS,sentry 等 )

  阿里ARMS :是阿里的一個前端數據監控的服務,彷佛是收費的

  fundebug :挺完善的前端錯誤日誌服務,也是收費的

  BadJS :騰訊團隊的一個開源項目,沒看過,應該很不錯的

  sentry :github 上面的一個開源項目,支持各端的錯誤監控 ( 本文就是基於 sentry 搭建的錯誤監控系統 )

系統的搭建與使用

  sentry 簡介

  sentry 是一個開源的實時錯誤監控的項目,它支持不少端的配置,包括 web 前端、服務器端、移動端及其遊戲端。

支持各類語言,例如 python、oc、java、node、javascript 等。也能夠應用到各類不一樣的框架上面,如前端框架中的

vue 、angular 、react 等最流行的前端框架。

  提供了github、slack、trello 的常見的開發工具的集成。能夠本身安裝而且搭建 sentry 應用。

支持的語言:

  sentry 的部署

  官網提供了兩種部署方案:

  docker

  python

  docker 是我第一次使用,看了下文檔,感受挺容易明白。

  在這裏爲了操做方便考慮,咱們選擇使用docker來部署搭建 sentry。

  這種方法的話須要安裝 docker 和 docker - compose 。

一、docker 的部署 (mac版)

  安裝的話,能夠直接去看看 docker 安裝文檔

  docker 安裝

  mac 版的安裝,docker-compose 已經一塊兒安裝好了。

二、部署 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端口。

  使用中途建立的 郵箱和密碼登錄 咱們的服務後端。

三、建立項目

  登錄後咱們會進入咱們的監控項目的界面,如:

  

  點擊右上角的 add new project ,咱們能夠建立一個新的項目

  

  這裏能夠選擇項目的配置,語言以及框架,選擇本身的項目類型

  輸入項目名稱,點擊 create project 。肯定建立新項目。

  

  點擊紅框框的,建立一個簡單的日誌。

  

  錯誤信息頁面,能夠自行到官網上面去了解更多信息。

四、前端部署,注入監控代碼

  

  獲取項目的連接:

  

  在項目的首頁點擊 install 會進入當前圖示頁面

  咱們複製 sentry DSN 到咱們前端配置中

  引用 sentry ,注入配置到咱們的應用中:

  

  這裏是以 react 爲例,咱們在 react 的根組建的 componentDidCatch 上面捕獲錯誤,而且上傳到咱們監控系統中。

  這裏的咱們用 sentry DSN 配置咱們的 sentry 而且初始化 sentry 項目。

  到這裏咱們基本,已經完成了咱們的前端錯誤監控日誌系統了。

sentry 操做界面介紹

  項目操做頁面:

  一、項目的查看選項

  Issue : 問題列表

  overview : 概況縱覽

  userfeedback : 用戶反饋

  Resleases : 版本列表信息

  setting : 項目設置

  二、問題篩選

  包括 : 指派本身的 、 標記列表 、須要分類的 、 今天的 、 未處理的

  

  設置爲 解決 、 忽略 、 合併 、標記 、實時監控

  

sentry 的api介紹和使用

  

  一、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>' });

  

  npm 包引用:

  首先是用添加包 @sentry/browser@4.4.1

1
yarn add @sentry/browser@4.4.1

  引用到項目中,而且配置

1
2
3
import * as Sentry from '@sentry/browser' ;
Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });

  

  二、捕獲事件

  主動捕獲錯誤或者異常

  sentry 常見的是錯誤捕獲,能夠根據平臺的不一樣來捕獲錯誤,而且能夠傳遞不一樣的錯誤信息。

1
2
3
4
5
try {
aFunctionThatMightFail();
} catch (err) {
Sentry.captureException(err);
}<br>Sentry.captureException( new Error( 'test' ))

  

  捕獲消息

  另外一種常見操做是捕獲裸信息。消息只是應該發送給Sentry的一些文本信息。    

1
Sentry.captureMessage( 'Something went wrong' );

  

  三、初始化配置

  

  sentry SDK 能夠經過不少方式進行配置。

  主要配置初始化配置的函數爲 init() 方法,經過向 init() 方法傳遞參數對象;

  

1
2
3
4
5
Sentry.init({
dsn: 'https://<key>@sentry.io/<project>' ,
maxBreadcrumbs: 50,
debug: true ,
})

  

  經常使用參數:

  DSN :項目的地址,用於收集錯誤信息的 sentry 分配的地址

  debug :是否開啓 debug 模式,開啓debug,就會把信息打印到控制檯上面

  release : 代碼的版本號

    release 版本號,能夠肯定當前的錯誤/異常屬於哪個發佈的版本

    能夠應用到 sourcemaps 來映射源碼

  environment : 環境名稱

  sampleRate : 是否開啓隨機發送事件給 sentry ,1爲100%,0.1 爲 10%概率發送事件

  attachStacktrace : 是否開啓堆棧跟蹤,開啓後跟着消息一塊兒收集

  beforeSend : 發送前操做

  四、sentry 的api

  

  captureException(exception) : 捕獲一個 js 異常,傳入一個 exception 對象或者類對象。

  captureMessage(message,level) : 捕獲一條信息,傳入信息內容和信息級別

  captureEvent(sentryEvent) : 捕獲一個事件,sentryEvent 是手動建立的,自定義的

  addBreadcrumb(Breadcrumb) : 添加一個麪包屑,以供接下里的捕獲

  configureScope((scope)=>{}) : 設置 context 信息到 scope 上面

  withScope((scope)=>{}) : 設置一個零時的 scope 信息到 context 上面

  五、context 上下文信息

  

  上下文信息包括 :user 、 tags 、 level 、fingerprint 、 extra data

  這些信息咱們能夠經過在 scope 上面設置來定義。

  其中能夠經過兩種方法獲得 scope 。

1
2
3
4
// 將 scope 配置到 context 上面
Sentry.configureScope((scope) => { }); <br>
// 建立一個零時到 scope ,配置到 context 上面
Sentry.withScope((scope) => { });

  

  

  User

1
2
3
4
5
6
scope.setUser({
id: '1' ,
username: 'xiao' ,
ip_address: '127.0.0.1' ,
email: 'test.doe@example.com' ,
});

  經過 setUser 來設置 User 信息。

  其中 user 能夠設置的信息包括 id 、 username 、 ip_address 、email

  

  Tags

  tags 是給事件定義不一樣的鍵/值對,能夠在查找的時候更容易。

   後臺查找的時候,查找選項會多出來一個選項,就是經過 tags 來設置的。

1
scope.setTag( "page_local" , "de-at" );

  經過 setTag 來設置了一個page_local 的標籤。

  後臺會多一個 page_local 選項。包括 de-at

  level

  經過這個來設置事件的嚴重性。

  包括:fatal 、error 、 warning 、 info 、 debug 。( fatal : 嚴重,error 錯誤,error 爲默認 )

1
scope.setLevel( 'warning' );

  經過 setLevel 來設置。

  Fingerprint

  指紋,經過指紋把信息分到不一樣的組中   

  Extra Data

  傳入額外的信息。並不會建立索引(也就是不能夠提供來檢索)。

1
scope.setExtra( "character_name" , "Mighty Fighter" );

  經過 setExtra 來設置。

  

  六、Breadcurumbs 麪包屑  

  麪包屑用於記錄一系列當行爲,當下一次發生錯誤事件上傳當時候會隨着一塊兒上報。

   瀏覽器 javascript sdk 將自動記錄全部當位置更改。

1
2
3
4
5
Sentry.addBreadcrumb({
category: 'auth' ,
message: 'Authenticated user ' + user.email,
level: 'info'
});

  咱們能夠經過 addBreadcrumb 來添加一次行爲記錄。

  七、user Feedback

  用戶反饋,sentry 提供了一個客戶反饋當窗口。

  當錯誤發生當時候,能夠彈出窗口收集一些信息,例如:

  用戶名

  用戶當郵件地址

  發生的問題的描述等。

1
Sentry.showReportDialog();

  經過 showReportDialog 來實現框架的彈出。

  

  

sentry實現預警而且郵件提醒

  

  郵件預警和郵件提醒是在生產環境中不可缺乏的一部分,只有有效的提醒來能讓咱們最快的解決問題。

  在項目中選擇 setting --> alerts 進入郵件預警設置頁面。

  這裏都是基本的郵件規則。

  在 tabs 中的 rule 能夠自定規則。

  規則設置:

  An event is seen : 一個事件發生的時候

  An issue is first seen : 第一個發生錯誤的時候

  An issue changes state from resolved to unresolved :問題從解決到未解決的時候

  An event's tags match {key} {match} {value} : 匹配到 tags 的鍵值對的時候發送

  An issue is seen more than {value} times in {interval} :在固定時間內出現次數匹配的時候

  An issue is seen by more than {value} users in {interval} :在固定時間內出現用戶的次數匹配的時候

  An event's {attribute} value {match} {value} : 匹配到某一個事件的時候

  An event's level is {match} {level} : 事件級別匹配的時候

sentry 生產的 sourcemap 配置

  介紹

  如今開發不少時候,咱們的代碼都會利用構建工具對代碼合併、壓縮、混淆等。

  在產生這些生產代碼的時候,爲了利於咱們開發調試、bug修復會產生一個 sourcemap 。

  sourecmap 的主要做用就是將咱們的打包的代碼先後最了一個關聯。

  這裏,sentry 對生產的 sourcemap 有很好的處理,它能夠很快的讓咱們肯定代碼的錯誤位置。

  準備工做

  首先咱們須要添加 sentry 的命令行的管理工具 sentry-cli

1
2
npm i -g @sentry/cli<br> // 上面的不行就用下面的
npm install -g @sentry/cli --unsafe-perm

  

  獲取認證的 token

  選擇API後就能夠生成token,記得勾選 project:write 權限。

  這裏的 token 是用於登錄的。

  

  登錄

1
sentry-cli --url myserver login

  回車後輸入上一步得到的 token 便可

  

  建立版本

1
sentry-cli releases -o 組織 -p 項目 new release@1.1.0

  -o : 組織,能夠在咱們的 Organization Settings 中找到

  -p : 項目名稱 , 能夠在 projuct 中找到

  release@1.1.0 : 發佈的版本號,能夠自定義,這個後須要在應用配置的時候傳入

 配置 release 到應用   

1
2
3
4
Sentry.init({
dsn: 'http://18ac34902da74aa29a4328879a58fb0d@localhost:9000/2' ,
release: 'release@1.1.0' ,
});

  

  上傳 sourcemap 文件

1
sentry-cli releases -o 組織 -p 項目 files release@1.1.0 upload-sourcemaps jspath文件所在目錄 --url-prefix 線上資源URI

  

  -o , -p : 和上文同樣

  jspath : js 文件的位置

  uri : js 文件相對於域名的位置

  特殊說明 url-prefix

  這裏是必須傳的,不傳找不到 map 文件,例如:

  你的 js 線上的地址爲 :https://test.com/static/js/test.js

  這個時候 url-prefix 應該爲 : '~/static/js/'

完成!!!!

  配置文件,在命令行操做的時候,sentry 支持配置文件。

  配置文件默認文命令的目錄。

  配置文件 .sentryclirc

1
2
3
4
5
6
7
[auth]
token=1a59c94sdfsdfs33b5588b27bd3628c98ff2837c054b4503be089ad623620527
[defaults]
url=http: //localhost:9000
project=react-test
org=test

  配置以後就不須要在輸入項目名稱和地址了。


www.cnblogs.com/jiebba/p/10…

個人博客 : XiaoLong's Blog

博客園小結巴巴: https://www.cnblogs.com/jiebba

相關文章
相關標籤/搜索