閾值報警功能詳情 - javascript,前端框架,前端優化,前端性能,node.js 前端開源監控作者動態日志

所謂web,即使你我素未謀面，便知志趣相投；足不出户，亦知世界之大。

01 - 什麼是閾值報警功能

在我們前端監控系統中，雖然我們收集了用户實時訪問應用數據信息，並提供可視化界面方便用户查詢，但是作為一款監控系統，卻少了靈魂的東西，那就是自動報警功能，因為我們並不喜歡，也沒人願意時時刻刻查看監控系統。因此，我們需要自動報警。
那自動報警怎麼做呢？自動報警意味着我們事先定義好一系列規則，當達到設定條件，系統將觸發我們定義的行為。

那需要些什麼呢？那我們就一步一步來搭建這個監控報警功能。

主要階段：定義觸發規則、任務調度框架、郵件通知服務。

定義觸發規則：我們的前端監控，會主要追蹤三種報警情況（js錯誤率達到設定閾值報警、api錯誤率達到閾值報警、訪問速度慢報警）。

圖片描述

任務調度框架:任務框架有很多，並且都是開源的。由於我們的後台使用nodeJs，並且數據存儲是mongo。所以選了agenda。下圖是各種框架對比。

圖片描述

郵件通知服務：目前郵件通知服務也有很多，我們選的是阿里雲的郵件推送。使用起來簡單，每天有200的免費額度可以使用。

02 — 實現過程

界面上的事我就不多説了，大家可以上監控平台看一下。我們來看一下如何定義任務調度-郵件推送。

配置Agenda任務調度，創建agenda實例：
const mongoConnectionString = 'mongodb://127.0.0.1:27017/agendatask';
const agenda = new Agenda({ db: { address: mongoConnectionString } });
agenda.processEvery('30 seconds');

配置阿里雲郵件推送，這裏使用STMP方式去發送郵件。
const transporter = nodemailer.createTransport({

"host": "smtpdm.aliyun.com",
"port": 25,
"secureConnection": true, // use SSL, the port is 465
"auth": {
    "user": '*********',
    "pass": '*********'
}

});
var mailOptions = {

from: '前端監控平台管理員<admin@hubing.online>', // sender address mailfrom must be same with the user
to: options.email, // list of receivers
subject: subject, // Subject line
replyTo: '****',//custom reply address
html: body, // html body

};
transporter.sendMail(mailOptions, function (error, info) {

 if (error) {
      console.log('Message sent: ' + error);
 }
 console.log('Message sent: ' + info.response);

});

在用户點擊開啓/關閉監控警報的時候，我們為用户在後台創建或取消相應的任務。

//創建/取消發送郵件任務
/*
options.email 郵件
options.alarmType 郵件類型（jsError,apiError,perfSpeed）
options.times 間隔時間（s）
options.state 任務狀態（true/false）
options.limitValue
options.appKey
*/
function createTask(options) {

//取消任務
agenda.cancel({ name: `send alarm email`, "data.appKey": options.appKey, "data.alarmType": options.alarmType });
if (!options.state) {
    return;
}
(async function () {
    await agenda.start();
    let job = agenda.create(`send alarm email`, options);
    job.repeatEvery(`${options.times} minutes`, {
        skipImmediate: true
    });
    await job.save();
})();

};
定義調度任務實現：

圖片描述

別忘了，在應用起來後我們會開啓agenda任務調度，不然不會觸發任務調度。
exports.startTask = function () {

//定義任務
agenda.define(`send alarm email`, (job, done) => {
    sendEmail(job.attrs.data);
    done();
});
//開啓任務
(async function () {
    await agenda.start();
})();

};

創建完任務後，agenda會在數據庫中生成相應的任務,之後agenda回去調用相應的服務：

圖片描述