关于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 的进一步扩大。

React

@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>  )}

Vue

@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)

创立扩大

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

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 公众号

外围

扩大

浏览器扩大

框架扩大

React

Vue

更多扩大

创立扩大

批改事件

开源

结语