背景
在這越來越發達的網絡時代，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 代碼
|
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>'
});
|
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>'
});
|
2、捕獲事件
主動捕獲錯誤或者異常
sentry 常見的是錯誤捕獲，可以根據平台的不同來捕獲錯誤，並且可以傳遞不同的錯誤信息。
|
1
2
3
4
5
|
try
{
aFunctionThatMightFail();
}
catch
(err) {
Sentry.captureException(err);
}<br data-filtered=
"filtered"
>Sentry.captureException(
new
Error(
'test'
))
|
捕獲消息
另一種常見操作是捕獲裸信息。消息只是應該發送給Sentry的一些文本信息。
|
1
|
Sentry.captureMessage(
'Something went wrong'
);
|
3、初始化配置
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 : 發送前操作
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 。
|
1
2
3
4
|
// 將 scope 配置到 context 上面
Sentry.configureScope((scope) => { }); <br data-filtered=
"filtered"
>
// 創建一個零時到 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 來設置。
6、Breadcurumbs 面包屑
面包屑用於記錄一系列當行為，當下一次發生錯誤事件上傳當時候會隨着一起上報。
瀏覽器 javascript sdk 將自動記錄所有當位置更改。
|
1
2
3
4
5
|
Sentry.addBreadcrumb({
category:
'auth'
,
message:
'Authenticated user '
+ user.email,
level:
'info'
});
|
我們可以通過 addBreadcrumb 來添加一次行為記錄。
7、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 data-filtered=
"filtered"
>
// 上面的不行就用下面的
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
|
配置之后就不需要在輸入項目名稱和地址了。
總結步驟：
1、注冊賬號 、創建項目
直接登陸 sentry 官網，注冊賬號，並且創建一個項目
2、在項目中配置 sentry
|
1
2
3
4
|
Sentry.init({
dsn:
'http://18ac34902da74aa29a4328879a58fb0d@localhost:9000/2'
,
release: RELEASE_VERSION,
});
|
3、打包時候上傳 sourcemap 文件
4、配置郵件預警
https://www.cnblogs.com/jiebba/p/10049938.html