給你的項目裝個探頭 — Sentry

在線上環境中，由於應用跑在用戶瀏覽器中，發生錯誤時咱們若是要對其進行調試就會顯得比較困難。因此咱們接入了 Sentry 服務對遠程錯誤進行記錄，接下來咱們將會一步一步接入 Sentry 服務。

初始化 Sentry

咱們能夠到 Sentry 官網中去建立一個帳號，而後咱們在 Sentry 中根據咱們項目類型建立一個項目，因爲這裏咱們作演示是 React 應用，因此咱們選擇 React，固然了 Sentry 支持很是多的類型，你們能夠按照本身項目進行添加。

這時候，咱們會看到這個界面，咱們點擊按鈕。這時候會出現例子，咱們先記住，而後開始建立咱們的 React 應用。

初始化 React 應用

咱們用 create-react-app 建立好咱們的應用，而且安裝好 @sentry/browser。

接着咱們在 index.js 裏初始化 Sentry。

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

Sentry.init({
  dsn: 'https://54ad7a14513e48bbb9b20698da401d1d@sentry.io/1491516'
});
複製代碼

而後，在 App.js 裏寫一段拋出錯誤的代碼。

<button
  onClick={() => {
    throw new Error('拋出錯誤');
  }}
 >
  throw error
</button>
複製代碼

點擊按鈕，咱們就可以在 Sentry 中看到錯誤了。

咱們點擊進去以後能夠看到很是多的信息，包括錯誤堆棧，以及瀏覽器的事件等等，這些都可以幫助咱們快速定位問題，而且在郵箱中咱們收到了來自 Sentry 的報警郵件。

等等，咱們好像忘記了一個問題，若是別人也往這裏發報錯信息，咱們會接收到全部的報錯信息，可是咱們只想收到咱們應用的報錯。

能夠在這個地方設置咱們接收的域名。

設置 releases

在咱們項目進行版本迭代的過程當中，咱們在一個新版本修復了一個問題，可是因爲用戶使用的是老版本，因此一樣的錯誤又暴露出來了，這時候咱們就可以清楚的知道，這是由於用戶使用了老版本代碼形成的。

那麼咱們要如何在 Sentry 中設置項目的版本呢？很簡單，就像下面這樣：

Sentry.init({
  dsn: 'https://54ad7a14513e48bbb9b20698da401d1d@sentry.io/1491516',
  release: 'sentry_example@20190627121204'
});
複製代碼

這樣新版本上的錯誤就會被標記成 sentry_example@20190627121204。

sourceMap

上面說的這些，咱們可以簡單的對項目進行錯誤預警，可是有個問題就是當咱們將項目進行打包以後代碼變得極其難閱讀，這樣的報錯信息對於咱們來講是不友好的，那麼咱們要怎麼解決這個問題呢？

答案固然就是給 webpack 的配置加上 source-map 了，咱們將 webpack 的配置打開，這時候咱們再進行編譯就會出現 map 文件了。

那麼 Sentry 是如何知道咱們的 map 文件的呢？答案就是咱們須要將 map 文件上傳到 Sentry 中去，也就是說，咱們在 build 以後須要將文件上傳一份到 Sentry 中去，同時，咱們將版本和 map 文件結合起來，也就是說咱們須要先創建一個版本，而後將對應版本的文件上傳上去，那麼咱們該如何操做呢？

1. 第一步，先安裝 @sentry/cli 工具
2. 第二步，在編譯以後進行版本肯定以及文件上傳工做

# 咱們肯定版本號的格式爲 sentry_example@20190627220147
# 這時候咱們使用 sentry-cli 工具建立對應的版本
$ sentry-cli releases new sentry_example@20190627220147
# 再使用 sentry-cli 上傳文件
$ sentry-cli releases files sentry_example@20190627220147 upload-sourcemaps --url-prefix http://localhost:8080 ./build
# 圓滿成功
複製代碼

上面的操做中有個須要注意的點，就是 --url-prefix 參數是你的靜態文件訪問的前綴，這個必定要寫對，否則它對應不起來。

3. 第三步，使用 http-server 啓動一個服務，而後訪問它，再點擊拋錯按鈕。

經過上面幾步，咱們又在 Sentry 中收到了報警。

bingo，咱們看到了更容易閱讀的錯誤報告，同時，你還能夠去設置郵件、釘釘、微信等接入報錯提醒，關於 Sentry 接入更多信息，能夠到官網查看文檔。

最後，你們使用 Sentry 還有場景是須要本身在內網搭建部署，若是是配合 Docker，那麼搭建 Sentry 服務就變得很是簡單了。

通過迷茫後，博客將繼續更新，歡迎 Star，敬請期待。

github.com/balancelove…