关于javascript:Ohbug-前端监控新方向

家喻户晓，前端监控包含了异样监控、行为监控、性能监控等等，且每种业务对于须要监控的内容既有共通的异样、性能监控等，又有自定义的用户行为、用户画像等内容须要收集。

罕用的监控平台已有许多，sentry、fundebug、frontjs 等，他们从异样监控、数据分析到告警告诉等一系列性能都很成熟。

那么为什么不选用他们还要本人搞一套进去呢？

其实在局部状况下上述平台根本能够满足需要，无非是应用体验或是性能上的细微差别。

然而在另一部分场景，咱们可能须要非凡场景的监控，比方某个模块、某个页面的曝光率，或是某个页面出现异常须要失去用户的实在反馈，这些非凡的场景产生的数据没有一个对立的形式去收集、解决、剖析。

所以不同于以往的监控工具，咱们心愿打造一个开源的根底工具，基于扩大 / 插件的模式扩大，以反对各式各样的监控需要。

为了达到目标，咱们心愿通过相似微内核架构的设计，借以扩大机制实现，从初始化、创立事件、上报三大流程动手，三个阶段皆可自定义批改，以此反对各种监控需要。

首先咱们心愿设计一个外围的数据收集程序 @ohbug/core，它须要具备参数的验证、扩大的加载、数据的封装、上报数据这么几个性能。

这个外围程序不单单能够收集异样数据、收集性能信息，还能够收集用户行为、用户身份甚至你所想要的任何信息。

上面是外围工作的整个生命周期。

Ohbug 的要害是扩大机制，所以扩大必须能够很简略的与少数数据收集工具联合。例如 perfume.js，它是一个轻量的 Web 性能监控工具，咱们对它进行了简略的封装，短短十几行代码便可实现一个扩大（@ohbug/extension-perfume）。

咱们为浏览器环境整合了一套浏览器扩大 @ohbug/browser，它集成了异样监控（JavaScript 代码谬误 & 资源谬误、没有被 reject 解决的 Promise 谬误、AJAX/Fetch 谬误、Websocket 谬误）、行为监控（路由切换、点击事件、console 等信息）、用户画像设置、自定义数据收集等性能，不便疾速接入业务。

框架层面的扩大均以 @ohbug/browser 为根底，除了浏览器扩大的性能外新增了一些与框架相干的信息，相当于对 @ohbug/browser 的进一步扩大。

@ohbug/react 应用 componentDidCatch 生命周期封装了一个谬误边界组件，用以捕捉在子组件树中任何中央的 JavaScript 异样，并且能够展现备用 UI 而非让组件树解体。

你能够通过为组件传入 FallbackComponent prop 来定义备用 UI。

import React from 'react'
import Ohbug from '@ohbug/browser'
import OhbugReact from '@ohbug/react'

const client = Ohbug.init({apiKey: 'YOUR_API_KEY'})
const OhbugErrorBoundary = client.use(OhbugReact, React)

function App() {
  return (
    <div className="App">
      <OhbugErrorBoundary>
        <HelloWorld />
      </OhbugErrorBoundary>
    </div>
  )
}

@ohbug/vue 应用 Vue.config.errorHandler 函数处理错误，除了错误信息外还可获取到 Vue 实例相干的数据。

import Vue from 'vue'
import Ohbug from '@ohbug/browser'
import OhbugVue from '@ohbug/vue'

const client = Ohbug.init({apiKey: 'YOUR_API_KEY'})
client.use(OhbugVue, Vue)

@ohbug/extension-perfume: 封装 perfume.js，用于收集性能信息。
@ohbug/extension-rrweb: 封装 rrweb，用于“录屏”。
@ohbug/extension-uuid: 扩大 Event.user 减少 UUID 标识。

举个栗子，当我须要对某个我的项目做简略的异样监控，只须要接入 @ohbug/browser。

当然如果你的我的项目是基于 Vue 实现的，并且想收集更多 Vue 实例相干的异样数据，那么只须要多写一行代码 client.use(OhbugVue, Vue)。

等等我还想收集用户的性能信息，那就再多写一行 client.use(OhbugExtensionPerfume)

等等我还想给用户加上惟一标识好辨别，那就在多写一行 client.use(OhbugExtensionUUID)

等等 ……

如果你有本人独特的需要，能够依据须要自行创立扩大。创立一个扩大非常简单：

yarn add @ohbug/core

import {createExtension} from '@ohbug/core'

export const extension = createExtension({
  name: 'ExtensionName',
  init: () => {// 这里初始化数据收集的程序}
})

除了被动收集信息，扩大也可用于对已收集的事件进行批改。例如这个扩大 @ohbug/extension-uuid，它可为每一条事件新增一个 UUID 的字段，用于用户身份的辨认，它的代码大略如下：

import {createExtension} from '@ohbug/core'
import {getUUID} from './uuid'

export const extension = createExtension({
  name: 'OhbugExtensionUUID',
  created: (event) => {const uuid = getUUID()
    event.setUser({uuid,})
    return event
  },
})

还有许多有用的货色能够作为扩大，咱们也在为丰盛扩大欠缺外围模块而致力。

一个人的力量无限，咱们拥抱开源一方面也是为了集中力量办事，心愿有更多开发者退出进来，欠缺 Ohbug，丰盛扩大市场。

上述内容所提及的内容均以开源 Ohbug，更多文档可见 Ohbug Docs。后续会分享对于前端监控的内容。

关注 Ohbug 公众号

关于javascript:Ohbug-前端监控新方向

外围

扩大

浏览器扩大

框架扩大

React

Vue

更多扩大

创立扩大

批改事件

开源

结语