基於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 的常見的開發工具的整合。可以自己安裝並且搭建 sentry 應用。
支援的語言:
sentry 的部署
官網提供了兩種部署方案:
docker
python
docker 是我第一次使用,看了下文件,感覺挺容易明白。
在這裡為了操作方便考慮,我們選擇使用docker來部署搭建 sentry。
這種方法的話需要安裝 docker 和 docker - compose 。
1、docker 的部署 (mac版)
安裝的話,可以直接去看看 docker 安裝文件
mac 版的安裝,docker-compose 已經一起安裝好了。
2、部署 sentry
獲取 sentry 程式碼
從 github 上面可以獲取到最新的 sentry 程式碼
git clone https://github.com/getsentry/onpremise.git
獲取到本地之後,進入專案的目錄。
按照專案的 readme.md 開始依照步驟搭建。
docker-compose run --rm web config generate-secret-key
這裡是生產金鑰,SENTRY_SECRET_KEY 這個需要新增到 docker-compose.yml 中。
最後一步:
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
<script src="https://browser.sentry-cdn.com/4.4.1/bundle.min.js" crossorigin="anonymous"></script>
然後就是配置了。
Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });
npm 包引用:
首先是用新增包 @sentry/[email protected]
yarn add @sentry/[email protected]
引用到專案中,並且配置
import * as Sentry from '@sentry/browser'; Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });
2、捕獲事件
主動捕獲錯誤或者異常
sentry 常見的是錯誤捕獲,可以根據平臺的不同來捕獲錯誤,並且可以傳遞不同的錯誤資訊。
try { aFunctionThatMightFail(); } catch (err) { Sentry.captureException(err); }
Sentry.captureException(new Error('test'))
捕獲訊息
另一種常見操作是捕獲裸資訊。訊息只是應該傳送給Sentry的一些文字資訊。
Sentry.captureMessage('Something went wrong');
3、初始化配置
sentry SDK 可以通過很多方式進行配置。
主要配置初始化配置的函式為 init() 方法,通過向 init() 方法傳遞引數物件;
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 : 傳送前操作
4、sentry 的api
captureException(exception) : 捕獲一個 js 異常,傳入一個 exception 物件或者類物件。
captureMessage(message,level) : 捕獲一條資訊,傳入資訊內容和資訊級別
captureEvent(sentryEvent) : 捕獲一個事件,sentryEvent 是手動建立的,自定義的
addBreadcrumb(Breadcrumb) : 新增一個麵包屑,以供接下里的捕獲
configureScope((scope)=>{}) : 設定 context 資訊到 scope 上面
withScope((scope)=>{}) : 設定一個零時的 scope 資訊到 context 上面
5、context 上下文資訊
上下文資訊包括 :user 、 tags 、 level 、fingerprint 、 extra data
這些資訊我們可以通過在 scope 上面設定來定義。
其中可以通過兩種方法得到 scope 。
// 將 scope 配置到 context 上面 Sentry.configureScope((scope) => { });
// 建立一個零時到 scope ,配置到 context 上面 Sentry.withScope((scope) => { });
User
scope.setUser({ id:'1', username:'xiao', ip_address:'127.0.0.1', email: '[email protected]' , });
通過 setUser 來設定 User 資訊。
其中 user 可以設定的資訊包括 id 、 username 、 ip_address 、email
Tags
tags 是給事件定義不同的鍵/值對,可以在查詢的時候更容易。
後臺查詢的時候,查詢選項會多出來一個選項,就是通過 tags 來設定的。
scope.setTag("page_local", "de-at");
通過 setTag 來設定了一個page_local 的標籤。
後臺會多一個 page_local 選項。包括 de-at
level
通過這個來設定事件的嚴重性。
包括:fatal 、error 、 warning 、 info 、 debug 。( fatal : 嚴重,error 錯誤,error 為預設 )
scope.setLevel('warning');
通過 setLevel 來設定。
Fingerprint
指紋,通過指紋把資訊分到不同的組中
Extra Data
傳入額外的資訊。並不會建立索引(也就是不可以提供來檢索)。
scope.setExtra("character_name", "Mighty Fighter");
通過 setExtra 來設定。
6、Breadcurumbs 麵包屑
麵包屑用於記錄一系列當行為,當下一次發生錯誤事件上傳當時候會隨著一起上報。
瀏覽器 javascript sdk 將自動記錄所有當位置更改。
Sentry.addBreadcrumb({ category: 'auth', message: 'Authenticated user ' + user.email, level: 'info' });
我們可以通過 addBreadcrumb 來新增一次行為記錄。
7、user Feedback
使用者反饋,sentry 提供了一個客戶反饋當視窗。
當錯誤發生當時候,可以彈出視窗收集一些資訊,例如:
使用者名稱
使用者當郵件地址
發生的問題的描述等。
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
npm i -g @sentry/cli
// 上面的不行就用下面的 npm install -g @sentry/cli --unsafe-perm
獲取認證的 token
選擇API後就可以生成token,記得勾選 project:write 許可權。
這裡的 token 是用於登陸的。
登陸
sentry-cli --url myserver login
回車後輸入上一步獲得的 token 即可
建立版本
sentry-cli releases -o 組織 -p 專案 new [email protected]
-o : 組織,可以在我們的 Organization Settings 中找到
-p : 專案名稱 , 可以在 projuct 中找到
[email protected] : 釋出的版本號,可以自定義,這個後需要在應用配置的時候傳入
配置 release 到應用
Sentry.init({ dsn: 'http://[email protected]:9000/2', release: '[email protected]', });
上傳 sourcemap 檔案
sentry-cli releases -o 組織 -p 專案 files [email protected] 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
[auth] token=1a59c94sdfsdfs33b5588b27bd3628c98ff2837c054b4503be089ad623620527 [defaults] url=http://localhost:9000 project=react-test org=test
配置之後就不需要在輸入專案名稱和地址了。
總結步驟:
1、註冊賬號 、建立專案
直接登陸 sentry 官網,註冊賬號,並且建立一個專案
2、在專案中配置 sentry
Sentry.init({ dsn: 'http://[email protected]:9000/2', release: RELEASE_VERSION, });
3、打包時候上傳 sourcemap 檔案
4、配置郵件預警
https://www.cnblogs.com/jiebba/p/10049938.html
我的部落格 : XiaoLong's Blog
部落格園小結巴巴: https://www.cnblogs.com/jiebba