共计 2596 个字符,预计需要花费 7 分钟才能阅读完成。
家喻户晓,前端监控包含了异样监控、行为监控、性能监控等等,且每种业务对于须要监控的内容既有共通的异样、性能监控等,又有自定义的用户行为、用户画像等内容须要收集。
罕用的监控平台已有许多,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)
更多扩大
- @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 公众号