Ohbug 前端監控系統開源第二彈

這裏是 Ohbug 開源計劃第二彈。第一彈的 Ohbug SDK 咱們已經能夠收集到數據，這一彈聊一聊數據的處理。前端

依據數據的流向，我大概繪製了一個架構圖：git

這裏解釋一下幾個核心模塊的功能：github

SDK：數據採集 SDK
Transfer: 數據接收、預處理
Manager：任務管理，包括 Event 聚合、存取 Event、存取 Issue、通知任務的生成
Notifier：通知任務的執行，包括 email、webpush、webhook
Dashboard：控制檯 API 的實現

可能圖片解釋的不夠清楚，這裏仍是系統介紹一下：web

Transfer

首先看一眼 Event 的數據結構：sql

interface OhbugEvent<D> {
  apiKey: string
  appVersion?: string
  appType?: string
  releaseStage?: OhbugReleaseStage
  timestamp: string
  category?: OhbugCategory
  type: string
  sdk: OhbugSDK

  detail: D
  device: OhbugDevice
  user?: OhbugUser
  actions?: OhbugAction[]
  metaData?: any
}

Event 經過 SDK 收集上來之後，經過 Nginx 轉發給 Transfer。typescript

爲了方便存儲，Transfer 須要對不肯定數據類型的字段預處理爲字符串，這裏轉化 detail actions metaData 三個字段。具體轉化的細節可見源碼 formatter。數據庫

以後將預處理後的 Event 給到 Manager。api

Manager

Manager 收到 Transfer 傳來的 Event 後，首先對 Event 進行聚合，聚合的目的是將相同的 Event 合併，畢竟數據展現時不但願看到一堆相同的問題佔據視野。安全

聚合的思路是根據數據結構對 Event 進行解構，例如 Fetch 的異常就取出 url, method, data 這些數據，經過 md5 加密後獲得聚合的依據 intro。數據結構

case FETCH_ERROR:
  return {
    agg: [detail.req.url, detail.req.method, detail.req.data],
    metadata: {
      type,
      message: detail.req.url,
      others: detail.req.method,
    },
  };

獲得了 intro 就能夠將相同 intro 的 Event 合併到一個數據集裏，咱們稱每個數據集爲 Issue，而後就能夠將數據持久化存儲了。

Event 的存儲經過 kafka 通知到 logstash*，logstash* 存入 elasticsearch。

Issue 的存儲則直接使用 postgresql，另外 Ohbug 使用 typeorm 來操做 postgresql，好處是方便作數據庫之間的遷移。

Notifier

Manager 在完成 Issue 的存儲後，會判斷當前條件是否符合通知規則，再將 Issue 與通知內容一塊兒傳給 Notifier。

Notifier 的工做就是就收到任務後觸發指定通知，包括 email、webpush、webhook 的發送/觸發。

Dashboard

Dashboard 爲控制檯總體流程的提供支持。主要工做是爲控制檯前端提供數據，例以下圖

另外 Issue 對應的 Event 數據經過 elasticsearch 獲取：

除此以外 Dashboard 還實現了用戶系統、團隊、項目、通知、SourceMap 的增刪改查。

關於 Dashboard 的實現其實還有不少東西能夠聊，之後能夠單獨拿出一篇單聊。

結語

目前的實現仍是屬於比較基礎的數據採集分析產品，之後還有許多可拓展的方向，若是你出於平臺數據安全的考慮，Ohbug 也支持本地部署。

一我的的力量有限，咱們擁抱開源一方面也是爲了集中力量辦事，但願有更多開發者加入進來，完善 Ohbug。

上述所說起的內容均以開源 Ohbug Server，若是你想搶先體驗能夠試用 Ohbug 官方服務。更多內容可見 Ohbug Docs。