編者注：作者是網(wǎng)易資深前端@金炳，當前負責網(wǎng)易嚴選自研Node框架建設工作棘催。做過前端劲弦、后端、產(chǎn)品設計醇坝，是一名全棧工程師邑跪。目前致力于Node應用框架研究開發(fā)與生態(tài)建設，實踐Node應用在Serverless呼猪、Faas場景下的遷移和落地画畅，探索Service Mesh在Node應用中的價值。
本文講解node郑叠，以及node+typescript+sourcemap夜赵，兩種類型的Node應用監(jiān)控
一、背景
經(jīng)過了一陣子的學習時間乡革，那個看了一些Node開發(fā)技巧的童鞋，終于開發(fā)出了他人生中第一個后端應用摊腋。熱血沸騰沸版，寫出了一個應用，好開心兴蒸，然后開啟了他漫漫長路的功能迭代的時代视粮，準備迎接他產(chǎn)品的黃金時代。
但是突然有一天橙凳，發(fā)現(xiàn)他的用戶蕾殴，說這怎么不能用，那怎么報錯提示岛啸，然后他花了大量的時間钓觉，去幫他們定位，去復現(xiàn)各種問題坚踩，去重構荡灾，去review代碼，終于解決了這些問題。但是這個過程中批幌，因為解決問題肯定要時間础锐，所以慢慢的用戶也就流失了。
上面這個情況荧缘，應該是大部分后端經(jīng)歷過的問題皆警，也是很多初級開發(fā)遇到的痛點。
但是截粗，這整個過程中信姓，其實有很多可以改進的地方，本文桐愉，作為以一個過來人的經(jīng)驗财破，準備講講Node的錯誤監(jiān)控，來提升我們自身的成長速度以及錯誤定位速度从诲。
二左痢、監(jiān)控
錯誤監(jiān)控，是監(jiān)控里面的一種系洛，我們常常將監(jiān)控做到三個維度.
機器的性能俊性，內(nèi)存，CPU這些的系統(tǒng)監(jiān)控
調(diào)用失敗描扯，RT定页，QPS等類型的應用監(jiān)控
業(yè)務賣的怎么樣的業(yè)務監(jiān)控
2.1 系統(tǒng)監(jiān)控
系統(tǒng)監(jiān)控，比如你的機器绽诚，是不是磁盤讀寫出問題了典徊，CPU是不是要被占用光了，內(nèi)存是不是要沒了恩够。
2.2 調(diào)用失敗卒落，RT，QPS等類型的應用監(jiān)控
整個系統(tǒng)蜂桶，調(diào)用出錯了多少次儡毕，QPS有多少，這個類型的監(jiān)控扑媚。
2.3 業(yè)務監(jiān)控
比如運營同學會問腰湾，"開發(fā)小哥哥，今天我負責的某某商品今天銷量如何疆股？", "我要做活動费坊，但是什么時間開售比較好呢？", "我去別的公眾號投了廣告押桃，但是廣告有沒有帶來效果葵萎，我下次要不要再投他們家廣告呢"导犹。
這類，就需要我們開發(fā)同學羡忘，去做業(yè)務監(jiān)控嘍谎痢。
所以我們看到，錯誤監(jiān)控卷雕，屬于應用類型的監(jiān)控节猿，只是我們監(jiān)控的一個環(huán)節(jié)，如果后續(xù)希望看到其他文章介紹漫雕，請關注我們滨嘱。
三、搭建錯誤監(jiān)控系統(tǒng)
最快的解決方式浸间，就是去了解這塊有什么知名的開源解決方案以及哪些我們可以用的服務太雨。
有哪幾個呢？
Fundebug-不放過每一個BUG
sentry
總的來說：
上面的以前是免費的魁蒜，后來收費了囊扳。下面的開源的，挺好用的兜看。所以下面我們就介紹sentry相關應用吧锥咸，畢竟文章不能太長，哈哈哈细移。
3.1 sentry是什么搏予？
sentry是一個開源的實時錯誤報告工具，支持web前后端弧轧，移動應用以及游戲雪侥，支持Python, OC,Java,Go, Node, Django等主流編程語言和框架，還提供了Github精绎、Slack校镐、Trello等常見開發(fā)工具的集成。
3.2 文檔地址
官網(wǎng)地址：https://sentry.io/welcome/
github地址：https://github.com/getsentry/sentry
整體項目是用django開發(fā)的后端+django的后端模板渲染的前端捺典。
3.3 安裝方法
這邊用官方的docker-compose的方式進行安裝，關于其他安裝方法从祝，隨便搜襟己，畢竟知名呀，如果你以前沒用過牍陌，說明要趕緊的了哈擎浴。
官方的一個方式：
步驟一：
git clone代碼.倉庫地址: https://github.com/getsentry/onpremise.git，然后下載完代碼后進入這個目錄進行操作毒涧。
gitclone?https://github.com/getsentry/onpremise.git
步驟二：
docker?volumecreate--name=sentry-data?&&?docker?volume?create?--name=sentry-postgres
步驟三：
把他的環(huán)境配置文件拷貝一份贮预，修改。
cp-n.env.example.env
步驟四：
執(zhí)行build
docker-compose?build
步驟五：
產(chǎn)生一個key。
docker-compose?run--rm?web?config?generate-secret-key
會提示給我們一個key的仿吞。
然后將這個key滑频，修改vim .env然后填進去。
步驟六：
數(shù)據(jù)庫orm的執(zhí)行唤冈，生成數(shù)據(jù)庫表和數(shù)據(jù)庫初始數(shù)據(jù)
docker-compose?run--rm?web?upgrade?
然后他會提示我們創(chuàng)建一個賬號峡迷，那這時大家輸入一個賬號。
步驟七：
運行
docker-compose?up?-d
步驟八：
打開我們的網(wǎng)頁訪問: http://127.0.0.1:9000你虹，看到以下界面:
然后我們輸入賬號密碼后绘搞，他會進入這個頁面：
image.png
然后我們輸入賬號密碼后，他會進入這個頁面：
image.png
然后我們進入后就能看到如下界面：
image.png
然后直接進入實戰(zhàn)吧傅物。
四夯辖、Node基礎應用篇
4.1.1 新建項目
我們打開sentry網(wǎng)站，如下圖董饰，點擊新建一個項目:
image.png
然后我們選擇nodejs
image.png
然后我們就到了這個頁面:
image.png
4.1.2 新建代碼工程
我們選擇一個自己的目錄蒿褂，然后創(chuàng)建一個文件夾。
mkdir?-p?hello_world?&&cdhello_world
然后我們執(zhí)行下面命令來初始化一個npm項目
npminit?-y
然后我們新建一個index.js文件尖阔，并且安裝@sentry/node這個庫
npminstall?@sentry/node?-s
然后index.js的代碼如下:
constSentry?=require('@sentry/node');
Sentry.init({dsn:'http://dfa471316a1143a689364ff5d7517753@127.0.0.1:9000//3'});
4.1.3 構建異常
我們修改index.js文件
constSentry?=require('@sentry/node');
Sentry.init({dsn:'http://dfa471316a1143a689364ff5d7517753@127.0.0.1:9000//3'});
thrownewError("hello")
然后運行這個代碼.
node./index.js
4.1.4 查看異常
然后我們點開剛剛項目頁面會看到:
image.png
說明異常已經(jīng)報告上來了贮缅。
點擊查看詳情：
image.png
4.1.5 解決問題
然后根據(jù)異常，我們就需要去解決代碼里面這個異常介却。比如代碼修改成下面這樣:
constSentry?=require('@sentry/node');
Sentry.init({dsn:'http://dfa471316a1143a689364ff5d7517753@127.0.0.1:9000//3'});
console.log("hello?world")
然后再執(zhí)行谴供，問題就不上報了。
然后同時我們把剛剛這個問題給resolve掉齿坷。
image.png
最終確保我們項目頁面異常是空的桂肌，否則雖然報錯了，但是問題又不改永淌，那這個平臺的價值就沒了崎场。
五、Node + Typescript + sourceMap篇
上面我們介紹了Node.js的基礎使用方法遂蛀，下面我們介紹一下Node + typescript + sourcemap的情況谭跨。
前兩步會跟上面差不多。
5.1.1 新建項目
我們打開sentry網(wǎng)站李滴，如下圖螃宙，點擊新建一個項目:
image.png
然后我們選擇nodejs
image.png
然后我們就到了這個頁面:
image.png
5.1.2 新建代碼工程
我們選擇一個自己的目錄，然后創(chuàng)建一個文件夾所坯。
mkdir?-p?hello_world?&&cdhello_world
然后我們執(zhí)行下面命令來初始化一個npm項目,這步開始跟基礎篇不一樣,然后tsc --init會給我們生成一個tsconfig.json文件
npminit?-y?&&?tsc?--init
修改tsconfig.json文件內(nèi)容:
{
"compilerOptions":?{
"target":"es2017",
"module":"commonjs",
"sourceMap":true,
"outDir":"./dist",
"baseUrl":".",
"inlineSources":true,
"strict":true,
"esModuleInterop":true
}
}
然后我們新建一個index.js文件谆扎，并且安裝@sentry/node這個庫
npminstall?@sentry/node?-s
然后index.ts的代碼如下:此處代碼也不一樣了
import*asSentryfrom'@sentry/node'
import*asIntegrationsfrom'@sentry/integrations';
Sentry.init({dsn:'http://dfa471316a1143a689364ff5d7517753@127.0.0.1:9000//3',release:'dev',integrations:?[
newIntegrations.RewriteFrames()
]});
5.1.3 構建異常
為了后續(xù)根據(jù)js和sourcemap還原ts文件，還需要安裝@sentry/integrations
npminstall?@sentry/integrations?-s
然后修改index.ts文件
import*asSentryfrom'@sentry/node'
import*asIntegrationsfrom'@sentry/integrations';
Sentry.init({dsn:'http://dfa471316a1143a689364ff5d7517753@127.0.0.1:9000//3',release:'dev',integrations:?[
newIntegrations.RewriteFrames()
]});
thrownewError("hello123")
然后我們可以首先運行ts版本的:
ts-node?./index.ts
然后我們來看平臺上確實查看到了這個報錯芹助，雖然下面有報錯堂湖，這個報錯原因是沒有node_modules:
image.png
5.1.4 編譯typescript代碼
我們除了本地環(huán)境以外闲先，測試、線上都只會跑js版本无蜂。因為會將ts代碼編譯js伺糠。
執(zhí)行編譯
tsc-p?./tsconfig.json
然后會生成js和sourcemap文件。
5.1.5 上傳代碼準備
上傳這個我們需要做一個準備酱讶，在工程目錄下退盯，我們創(chuàng)建一個文件:
文件名: .sentryclirc
[auth]
token=fc8e6e2e3d12427fb005105694ac576593578d0f667946b0adbffc855c6cf39f
[defaults]
url=http://127.0.0.1:9000/
org=sentry
project=hello
url的話，是sentry網(wǎng)站的地址
org：項目有個org的泻肯，拷貝過來
project：項目名字
token創(chuàng)建方法：
image.png
新建一個token渊迁，并且主要勾選權限。
image.png
5.1.6 安裝上傳工具
上傳工具：
npminstall?@sentry/cli?-g
5.1.7 上傳js和sourcemap
首先我們創(chuàng)建一個release,取名: dev
sentry-cli?releasesnewdev
然后執(zhí)行上傳:
sentry-cli?releases?files?dev?upload-sourcemaps--rewrite?dist?
上傳完畢：
image.png
5.1.8 測試異常
然后我們跑編譯后的灶挟，模擬測試服和線上服琉朽。
運行方式:
node./dist/index.js
然后我們?nèi)テ脚_上查看：
image.png
5.1.9 解決問題
然后根據(jù)異常，我們就需要去解決代碼里面這個異常稚铣。比如代碼修改成下面這樣:
import*asSentryfrom'@sentry/node'
import*asIntegrationsfrom'@sentry/integrations';
Sentry.init({dsn:'http://dfa471316a1143a689364ff5d7517753@127.0.0.1:9000//3',release:'dev3',integrations:?[
newIntegrations.RewriteFrames()
]});
console.log("hello?world")
然后再執(zhí)行箱叁，問題就不上報了。
然后同時我們把剛剛這個問題給resolve掉惕医。
image.png
最終確保我們項目頁面異常是空的耕漱，否則雖然報錯了，但是問題又不改抬伺，那這個平臺的價值就沒了螟够。
六、其他的使用指南
文章目錄其實很長峡钓，暫時只整理了Node相關的一些使用妓笙，比如react，vue能岩，angular這類前端項目也可以用寞宫，electron這類的跨平臺的也可以用。
關于Sentry這樣的錯誤監(jiān)控拉鹃，在項目開發(fā)中挺有用的辈赋，有些公司采用自建，有些是用這類開源項目二次開發(fā)膏燕，所以還沒學會的同學炭庙，趕緊試試吧。
七煌寇、結論
本文其實也只是講解了sentry這塊的錯誤監(jiān)控的一小塊，例如react這類前端項目里面也可以用逾雄。還有郵件報警等等阀溶。
如果聽了之后腻脏，對你有所啟發(fā)和幫助，希望能幫忙轉發(fā)一下银锻，如果有問題永品，可以關注下面微信公眾號聯(lián)系我。
公眾號名字： Node全棧進階
