Keep-observerhttps://github.com/keep-obser...elk：https://www.elastic.co/cn/wha...这是监控服务应用于web的在线demo。关于keep-observer：这是一个基于纯javascript的在线环境监控，适用于web：PC和手机无线Sense嵌入式抓取，并持续跟踪用户交互行为，支持Elasticsearch+kibana数据可视化后台展示，提供快速私有化部署docker，提供细粒度时间维度分析和关键字段索引搜索，提供单用户跟踪记录，连续跟踪一系列事件，并提供错误回溯，pageLoad首屏加载分析，时间维度，多版本对比，采用插件式服务组合方式，提供中间件扩展接口支持监控内容自由组合，允许自定义扩展控件抓包服务、自定义报表服务等。配置信息、API、自定义服务详见keepObserver。为什么需要保持观察者？您的业??务需求：业务监控、异常告警、错误跟踪您的业务需求：分析首屏性能信息，提供ABtest等灰度测试结果数据分析您需要：日志细粒度搜索查询，提供可视化数据报表您需要：用户行为操作跟踪，异常错误回溯查询您的团队：不提供后端资源，完全由前端团队操作提供快速访问监控，快速部署后端服务，无需复杂的服务端操作，前端技术人员可以安装和部署高度自定义扩展，允许自定义扩展其他服务功能：keepObserverLog拦截和捕获全局控制台相关日志，包括(error、log、warn、time、timeEnd、clear、info、debug)等配置信息和API详情，见keepObserverLogkeepObserverNetwork获取全局XMLHttpRequest和fetch请求配置信息andAPI详见keepObserverNetworkKeepObserverHtmlElementActive捕获用户dom交互（点击、更改）事件，提供xPath路径跟踪配置信息和API详见KeepObserverHtmlElementActiveKeepObserverKibanaApmReport使用Elasticsearch+kibana需要该服务。依赖kibanaAPM上报数据配置信息和API详情，参见KeepObserverKibanaReportKeepObserverMiddlewareKibanaApmTrack中间件扩展服务，提供kibana时间线跟踪日志记录配置信息和API详情，参见KeepObserverMiddlewareKibanaApmTrack兼容性和支持：兼容目前所有主流框架运行版本，vueangularreact等构架。IE678尚未经过测试。使用和reportMonitorData安装和索引ElasticsearchKibana关于keepObserver：keepObserver本身只维护了一个pipeMQ和相关的middlewareServer服务。所有监控抓包服务和报表服务均由插件提供，并提供中间件扩展接口，扩展信息渠道。结构设计如下ProducerServer：提供采集数据。比如记录网络错误相关的catchConsumerServer：处理接收到的数据。比如向后台服务器上报kibanaAPMMMiddlerwareServer：当ProducerServer发起消息时，会经过MiddlerwareServerArray处理，最终到达ConsumerServer。MiddlerwareServer具有interrupt和next的特性，会控制消息是到达下一个MiddlerwareServer处理还是被中断。MiddlerwareServer结构如下关于Elasticsearch+kibana在数据存储阶段，核心使用场景在于灵活查询不同数据维度，对各个维度的数据进行逐层分析对比，快速定位问题，而这恰好可以利用elasticsearch的检索特性，即使是最小集合的elasticsearch集群。相对容易实现每天千万级日志的存储和查询，配合kibana完成数据可视化，查询和搜索相关日志内容，为docker快速私有化部署提供最简单的日志查询，提供细粒度的时间维度和搜索相关字段详细的单用户行为跟踪页面加载查询分析安装npminstallkeep-observersExamples一个简单的使用示例observers'/Exampleconstko=newKeepObserver({isInterruptNormal:true,//KeepObserverMiddlewareKibanaApmTrack使用isGlobalElementActionCatch:true,//KeepObserverHtmlElementActive使用serverUrl:'http://localhost:8200',//KeepObserverKibanaApmReportuseserviceName:"push-test",//KeepObserverKibanaApmReportuseagentVersion:"step_1",//KeepObserverKibanaApmReportuse})//注册监控服务ko.use(KeepObserverLog)ko.use(KeepObserverNetwork)ko.use(KeepObserverHtmlElementActive)//registerkibanaApmreportko.use(KeepObserverKibanaApmReport)//注册中间件时间线跟踪服务ko.use(KeepObserverMiddlewareKibanaApmTrack)自定义服务示例plug-in/*这样可以获取到扩展的中间件服务ps:注意这种方式获取到的中间件服务不能与其他插件共享import{KeepObserverPublic}from'keep-observers/@util/index'classLocalstorageMiddlewareServerextendsKeepObserverPublic{apply(){}}constserver=newLocalstorageMiddlewareServer()server.useMiddle//注册erserver.runMiddle//执行*/classLocalstorageMiddlewareServer{constructor(config){/*config={isInterruptNormal:true,isGlobalElementActionCatch:true,serverUrl:'http://localhost:8200',serviceName:"push-test",agentVersion:"step_1"}*/}apply({//请检查更多参数DocumentationsendMessage,//发送消息方法useExtendMiddle,//注册中间件扩展，相当于ko.useMiddle()middleScopeNames,//中间件名称registerSendDoneCallback//注册发送端空闲回调}){const[sendMessageName]=middleScopeNames//注册中间件serviceuseExtendMiddle(sendMessageNamem,(interrupt,next)=>(message)=>{//这只是一个简单的例子，例如usevarvalue=JSON.stringify(message)localStorage.setItem('message',value);//转到下一个中??间件//interrupt(message)会直接跳过下层中间件处理，进入kibanaApm报告//interrupt(false)会直接跳过下层中间件处理，忽略这条消息next(message)})/*如果存在return{remove:(key)=>localStorage.removeItem(key)}你可以通过ko.apis('remove','message')*/}}//instanceconstko=newKeepObserver({isInterruptNormal:true,isGlobalElementActionCatch:true,serverUrl:'http://localhost:8200',serviceName:"push-test",agentVersion:"step_1",})//注册监控服务ko.use(KeepObserverLog)ko.use(KeepObserverNetwork)ko.use(KeepObserverHtmlElementActive)//注册kibanaApm报告ko.use(KeepObserverKibanaApmReport)//注册中间件时间线跟踪服务ko.use(KeepObserverMiddlewareKibanaApmTrack)//注册自定义服务//你也可以这样做ko.use(newLocalstorageMiddlewareServer())ko.use(LocalstorageMiddlewareServer)更多config配置细节和相关API请参考Documentation
