基於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 安裝文件
ofollow,noindex">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 myserverlogin
回車後輸入上一步獲得的 token 即可
建立版本
sentry-cli releases -o 組織 -p 專案 new [email protected]
-o : 組織，可以在我們的 Organization Settings 中找到
-p : 專案名稱 ， 可以在 projuct 中找到
[email protected] : 釋出的版本號，可以自定義，這個後需要在應用配置的時候傳入
配置 release 到應用
Sentry.init({
dsn: 'http://18ac34902da74aa29a4328879a58fb0d@localhost: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://18ac34902da74aa29a4328879a58fb0d@localhost:9000/2',
release: RELEASE_VERSION,
});
3、打包時候上傳 sourcemap 檔案
4、配置郵件預警
https://www.cnblogs.com/jiebba/p/10049938.html