众所周知，前端监控包括异常监控、行为监控、性能监控等，每个业务都有共同的异常、性能监控等内容。需要进行监控，还需要采集自定义用户行为、用户画像等内容。常用的监控平台有很多，比如sentry、fundebug、frontjs等，它们有从异常监控、数据分析到告警通知等一系列功能，非常成熟。那么为什么不选择它们并自己制作一个呢？事实上，在某些情况下，上述平台基本可以满足需求，无非是用户体验或功能上的细微差别。但是在其他场景下，我们可能需要监控一些特殊的场景，比如某个模块或者某个页面的曝光率，或者某个页面异常时需要用户的真实反馈。这些特殊场景产生的数据是不统一的。收集、处理和分析的方法。所以不同于以往的监控工具，我们希望打造一个开源的基础工具，可以基于扩展/插件进行扩展，支持各种监控需求。为了达到目的，我们希望采用类似微内核架构的设计来实现扩展机制，从初始化、事件创建、上报三大流程入手。所有三个阶段都可以定制和修改，以支持各种监控需求。核心首先，我们希望设计一个核心数据采集程序@ohbug/core，需要具备参数校验、扩展加载、数据封装、数据上报等几个功能。这个核心程序不仅可以收集异常数据和性能信息，还可以收集用户行为、用户身份甚至任何你想要的信息。下面是核心工作的整个生命周期。扩展Ohbug的关键是扩展机制，所以扩展必须能方便地与大多数数据采集工具集成。例如，perfume.js是一个轻量级的网络性能监控工具。我们对其进行了简单的封装，只需十几行代码就可以完成一个扩展（@ohbug/extension-perfume）。浏览器扩展我们针对浏览器环境集成了一套浏览器扩展@ohbug/browser，集成了异常监控（JavaScript代码错误&资源错误、未被拒绝的Promise错误、AJAX/Fetch错误、Websocket错误）、行为监控（路由切换、点击事件、控制台等信息）、用户画像设置、自定义数据采集等功能，业务接入方便快捷。框架扩展框架级别的扩展基于@ohbug/browser。除了浏览器扩展的功能外，还增加了一些框架相关的信息，相当于@ohbug/browser的进一步扩展。React@ohbug/react使用componentDidCatch生命周期包装错误边界组件，以捕获子组件树中任何位置的JavaScript异常，并呈现备用UI而不是使组件树崩溃。您可以通过传入组件的FallbackComponent属性来定义回退UI。从'react'导入React从'@ohbug/browser'导入Ohbug从'@ohbug/react'导入OhbugReactfunctionApp(){return(
