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

 

背景

 

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

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

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

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

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

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

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

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

 

　　前端錯誤監控日誌系統　　

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

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

 

監控系統搭建方案

 

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

　　二、藉助第三方插件( 阿里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 代碼

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端口。

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

 

 

三、建立項目

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

　　

 

　　點擊右上角的  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 

<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/browser@4.4.1

yarn add @sentry/browser@4.4.1

　　引用到項目中，而且配置

import * as Sentry from '@sentry/browser';

Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });

　　

 

　　二、捕獲事件

 

　　主動捕獲錯誤或者異常

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

try {
    aFunctionThatMightFail();
} catch (err) {
    Sentry.captureException(err);
}
Sentry.captureException(new Error('test'))

　　

 

　　捕獲消息

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

Sentry.captureMessage('Something went wrong');

　　

 

　　三、初始化配置

　　

　　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 : 發送前操做

 

　　四、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 。

// 將 scope 配置到 context 上面
Sentry.configureScope((scope) => { }); 

// 建立一個零時到 scope ，配置到 context 上面
Sentry.withScope((scope) => { });

　　

　　

　　User

 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 來設置的。

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 來設置。

 

　　

　　六、Breadcurumbs 麪包屑　　

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

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

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

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

 

　　七、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 release@1.1.0

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

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

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

 

　配置 release 到應用　　　

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

　　

　　上傳 sourcemap 文件

 

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

[auth]
token=1a59c94sdfsdfs33b5588b27bd3628c98ff2837c054b4503be089ad623620527

[defaults]
url=http://localhost:9000
project=react-test
org=test

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

 

 

總結步驟：

　　一、註冊帳號 、建立項目 

　　 直接登錄 sentry 官網，註冊帳號，而且建立一個項目

 

　　二、在項目中配置 sentry 

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

　　

　　三、打包時候上傳 sourcemap 文件

 

　　四、配置郵件預警

 

 

http://www.javashuo.com/article/p-sdqnlqsl-cp.html 

   個人博客 ：  XiaoLong's Blog

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