基於Sentry打造前端效能監控平臺

語言: CN / TW / HK

為什麼要搭建前端效能監控平臺?

1.研發人員並不能避免百分百沒有bug,以及測試同學也不能覆蓋整個專案。

2.如果等待使用者反饋,時間週期長,不易復現,增加額外的溝通成本,領導也不高興。

上線的專案我們也要對他進行個兜底原則,至少在一定範圍內我們知道它內部發生了什麼,什麼時候,什麼地方,怎樣的方式。

我們的期望: 使用者踩了雷,我們要同步的知道問題,第一時間排掉。

自己去寫一個這樣的監控系統不是很難,但是需要時間,也需要除錯,對於小團隊來說,時間就是成本,現成的開源專案sentry反饋都不錯,所以優選還是他。(工作久了,覺得精力有限,這些活用開源的就好,免費,又好用不香嗎)。

搭建sentry兩種方式。

1:商業版, 優點:省事,只需要配置就好了,有限額(花錢可以解決)

2:開源版 優點:一勞永逸,不用向sentry

好評: 商業版和開源版功能講都差不多,這也是sentry社群意思 會盡量保證商業版本和開源版本一致

這裡是個例子主動丟擲了異常,後面開啟sourcemap 精準定位,郵件通知,基本無縫銜接

能看到呼叫棧,以及上下文,使用者的環境,ip地址,瀏覽器環境,應有盡有

image.png

image.png

image.png

image.png

安裝方式:(docker安裝)

```shell 安裝docker

$ curl -sSL https://get.daocloud.io/docker | sh

安裝 docker-compose $ sudo curl -L "https://github.com/docker/compose/releases/download/1.28.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

這裡注意版本需要1.28.0

檢查是否安裝成功 docker -v

docker-compose -v

隨便找個目錄下

git clone https://github.com/getsentry/onpremise.git

$ cd onpremise $ ./install.sh

過程很漫長,最後會讓你輸入一個管理員賬戶

docker-compose up -d //啟動

``` 然後訪問http://localhost:9000 (伺服器的話就是你ip)

這裡sentry預設埠是9000,不建議修改預設埠,注意其他程序別佔用

接下來設定郵件服務

當前目錄應該還在onpremise下

shell vim sentry/config.yml

image.png

這裡用的是QQ

mail.username 你的郵箱

mail.password 授權碼

use-tls 開啟

mail.from 'admin<你郵箱>'

這裡admin字首 就是發郵件時你的發件名字 自己可以修改 後面的跟著郵箱

!! smtp中的密碼不是你郵箱的真實密碼,而是你郵箱安全設定的smtp授權碼

```shell docker-compose stop //停止

docker-compose up -d //再次啟動 ``` 郵件服務搭建完畢 !!!

image.png

點選頭像可以測試下

基本搭建就完成了 接下來會說一些在react umi中專案中應用 先更到這裡