高性价的前端监控系统-原生支持Elasticsearch, Logstash, Kibana无需投入后端资源

allen_word

Keep-observer

https://github.com/keep-obser...

elk: https://www.elastic.co/cn/wha...

这是一个应用于web端中的监控服务

线上demo

  • 关于keep-observer:

    • 这是一个基于纯javascript编写用于线上环境监控,适用于web:PC端以及移动端的无感嵌入捕获,并持续追踪用户交互行为,
    • 支持Elasticsearch+kibana数据可视化后台显示,提供docker快速私有化部署
    • 提供细粒度时间维度分析以及关键字段索引搜索
    • 提供单用户追踪记录,一连串事件持续追踪,并提供错误回溯
    • 提供pageLoad首屏加载分析,时间维度,多版本对比
    • 采用插件服务组合方式,提供中间件扩展接口
    • 支持可自由组合监控内容,并且允许自定义扩充控捕获服务,自定义上报服务等。
    • 配置信息和API以及自定义服务,详细信息见 keepObserver
  • 你为什么需要keep-observer?

    • 你的业务需要: 业务监控,异常报警,错误追踪
    • 你的业务需要: 分析首屏性能信息,需要提供ABtest等灰度测试的结果数据分析
    • 你需要: 日志细粒度的搜索以及查询,并提供可视化数据报表
    • 你需要: 用户行为操作追踪,异常错误回溯查询
    • 你的团队: 没有后端资源提供,完全由前端团队操作
    • 可提供快速接入监控,快速部署后端服务,无复杂的服务端操作,前端技术人员即可安装部署
    • 高自定义扩展度,允许自定义扩展其他服务
  • 功能:

    • keepObserverLog

      • 拦截捕获全局 console 相关日志,包括(error,log,warn,time,timeEnd,clear,info,debug)等
      • 配置信息以及API详细信息见 keepObserverLog
    • keepObserverNetwork

      • 捕获全局 XMLHttpRequest以及fetch请求
      • 配置信息以及API详细信息见keepObserverNetwork
    • KeepObserverHtmlElementActive

    • KeepObserverKibanaApmReport

      • 使用Elasticsearch+kibana需要这个服务。依靠kibana APM上报数据
      • 配置信息以及API详细信息见KeepObserverKibanaApmReport
    • KeepObserverMiddlewareKibanaApmTrack

  • 兼容与支持:

    • 兼容目前所有主流框架运行版本, vue angular react等框架。IE 678暂未测试

Use And reportMonitorData

安装与索引

ElasticsearchKibana

关于keepObserver:

keepObserver本身只维护一个pipeMQ以及相关middlewareServer服务,所有的监控捕获服务以及上报服务均由插件提供,并提供中间件扩展接口,扩展信息通道,

结构设计如下
  • ProducerServer: 提供捕获数据。如log network error 相关catch
  • ConsumerServer: 处理接收到的数据。如上报到后台服务器 kibanaAPM
  • MiddlerwareServer: 在ProducerServer发起一个消息时,将经过MiddlerwareServerArray的处理才最终达到ConsumerServer,MiddlerwareServer具有interrupt和next的特性,将控制消息是否达到下一个MiddlerwareServer处理或被中断

image

MiddlerwareServer结构如下

image

关于Elasticsearch+kibana

数据存储阶段,核心的使用场景在于 不同数据维度的灵活查询,逐层分析对比各个维度的数据快速定位到问题,而这恰好可以利用elasticsearch的检索特性,即使对于一个最小集合的elasticsearch集群,也可以比较轻松实现每天千万级别的日志量的存储和查询,并且配套kibana完成数据可视化,以及查询搜索相关日志内容,以及提供快速私有化部署docker

最简单的一个日志查询,提供细粒度的时间维度以及相关字段的搜索

image

详细的单用户行为追踪

image

page-load的查询分析

image

Installation

    npm install keep-observers

Examples

一个简单的使用例子
import KeepObserver,{
    KeepObserverLog,
    KeepObserverNetwork,
    KeepObserverHtmlElementActive,
    KeepObserverMiddlewareKibanaApmTrack,
    KeepObserverKibanaApmReport,
} from 'keep-observers'
//实例
const ko = new KeepObserver({ 
    isInterruptNormal:true,         //KeepObserverMiddlewareKibanaApmTrack use
    isGlobalElementActionCatch:true, //KeepObserverHtmlElementActive use
    serverUrl:'http://localhost:8200', //KeepObserverKibanaApmReport use
    serviceName: "push-test", //KeepObserverKibanaApmReport use
    agentVersion: "step_1",   //KeepObserverKibanaApmReport use
})
//注册监控服务
ko.use(KeepObserverLog)
ko.use(KeepObserverNetwork)
ko.use(KeepObserverHtmlElementActive)
//注册kibanaApm上报
ko.use(KeepObserverKibanaApmReport)
//注册中间件时间轴追踪服务
ko.use(KeepObserverMiddlewareKibanaApmTrack)
自定义服务例子
import KeepObserver,{
    KeepObserverLog,
    KeepObserverNetwork,
    KeepObserverHtmlElementActive,
    KeepObserverMiddlewareKibanaApmTrack,
    KeepObserverKibanaApmReport,
} from 'keep-observers'

//简单的一个本地存储插件
/*
    这样可以获取扩展中间件服务
    ps:注意这样获取的中间件服务无法和其他插件共享
    import { KeepObserverPublic } from 'keep-observers/@util/index'
    class LocalstorageMiddlewareServer extends KeepObserverPublic{
        apply(){
            
        }
    }
    const server = new LocalstorageMiddlewareServer()
    server.useMiddle //注册
    server.runMiddle //执行
*/
class LocalstorageMiddlewareServer {
    constructor(config) {
        /*
        config={
            isInterruptNormal:true,
            isGlobalElementActionCatch:true,
            serverUrl:'http://localhost:8200',
            serviceName: "push-test",
            agentVersion: "step_1"
        }
        */
    }
    apply({
        //更多参数请查看Documentation
        sendMessage,                //发送消息方法
        useExtendMiddle,    //注册中间件扩展,等效ko.useMiddle()
        middleScopeNames,   //中间件命名
        registerSendDoneCallback    //注册发送结束空闲回调
    }) {
        const [sendMessageName] = middleScopeNames
        //注册中间件服务
        useExtendMiddle(sendMessageNamem,(interrupt,next)=>(message)=>{
            //这只是一个简单的例子,举例使用 
            var value = JSON.stringify(message)
            localStorage.setItem('message', value);
            //转入下一个中间件
            //interrupt(message) 将直接跳过下级中间件处理进入kibanaApm上报
            //interrupt(false) 将直接跳过下级中间件处理并忽略本次消息
            next(message)
        })
        /*
            如果存在返回
            return {
                remove:(key)=>localStorage.removeItem(key)
            }
            可以通过ko.apis('remove','message')调用到此返回方法
        */
    }
}

//实例
const ko = new KeepObserver({ 
    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(new LocalstorageMiddlewareServer())
ko.use(LocalstorageMiddlewareServer)
更多config配置详情,以及相关api等,请参考Documentation。
阅读 618
34 声望
0 粉丝
0 条评论
34 声望
0 粉丝
文章目录
宣传栏