如何自己开发一个前端监控SDK

news2025/1/19 23:08:51

最近在负责团队前端监控系统搭建的任务。因为我们公司有统一的日志存储平台、日志清洗平台和基于 Grafana 搭建的可视化看板,就剩日志的采集和上报需要自己实现了,所以决定封装一个前端监控 SDK 来完成日志的采集和上报。

架构设计

因为想着以后有机会可以把自己封装的 SDK 推广给其他团队使用,所以 SDK 在架构设计上就需要有更多的可拓展性。我的想法是把 SDK 根据职责拆解成几个模块,然后有一个核心模块来管理所有的模块,各团队往不同的模块里添加插件由此实现自身定制化的需求。

我们知道一个前端监控 SDK 它需要完成的任务有:日志采集 =>日志整理 =>日志上报。所以根据这个工作流,我把整个 SDK 分成四个模块:

在这里插入图片描述

  • Plugin:负责原始数据的采集。Plugin 内部采用插件化的方式去实现,不同的插件采集不同的数据。比如如果我们想采集网络请求相关的数据,那个可以封装一个专门采集网络请求的插件。
  • Builder:负责把原始数据封装成我们想要的数据结构。
  • Reporter:负责把数据上报到日志平台。因为考虑到一份数据可能会上报到不同的日志平台,所以 Reporter 我也是采用插件化的方式去实现,不同的插件上报到不同的日志平台。
  • Manager:负责和各模块之间进行通信,以及封装一些公共的方法。

综上,整个 SDK 的工作流程如下:

在这里插入图片描述

  1. Manager 建立和各个模块之间的联系。

  2. Plugin 中的某个插件采集到相应的数据,并把数据发送给 Manager。

  3. Manager 接收到来自 Plugin 的数据,并把数据转发给 Builder。

  4. Builder 接收到数据以后按照预设的数据处理方法对数据进行处理,处理完后再把数据发送给 Manager 。

  5. Manager 接收到来自 Builder 的数据,并把数据转发给 Reporter 。

  6. Reporter 中的每个插件接收到数据以后,会把数据上报到对应的日志平台。

在整个SDK运作的过程中,每个模块专注于自己的职责,全程只和 Manager 通信,不受其他模块的影响。

另外,在模块接收或者发送数据的时候都会对外暴露相应的生命周期,这样开发者就可以拿到不同阶段的数据,并对数据进行自定义处理以及决定是否要中断流程。

模块通信

模块通信我采用的是发布-订阅模式,并定义了3个事件:assign (注册)、receive (接收数据)、next (发送数据)。

Manager 会订阅 next 事件,而其他模块会订阅 assign 事件和 receive 事件。最开始的时候,其他模块通过 assign 事件接收到 Manager 的实例,由此其他模块就可以使用 Manager 上定义的发布-订阅相关的方法。当数据在某个模块处理完毕后,这个模块会发布 next 事件把数据传给 Manager ,Manager 接收到数据后再发布 receive 事件把数据传给下一个模块。

export class Manager<O extends ManagerConfigType> extends EventBus {
  constructor(config?: O) {
    super()
    this.assignPlugins(config.plugins || [])
    this.assignBuilder(config.builder || {})
    this.assignReporter(config.reporters || [])
    this.on('manager:next', this.next.bind(this))
    this.on('manager:next', this.next.bind(this))
  }
  
  private assignPlugins(plugins: any[]) {
    plugins.forEach(plugin => {
      this.on('plugin:assign', plugin.init.bind(plugin))
    })
    this.emit('plugin:assign', this)
  }

  private assignBuilder(builder: any) {
    this.on('builder:assign', builder.init.bind(builder))
    this.emit('builder:assign', this)
  }

  private assignReporter(reporters: any[]) {
    reporters.forEach(reporter => {
      this.on('reporter:assign', reporter.init.bind(reporter))
    })
    this.emit('reporter:assign', this)
  }
  
  // 从上一级模块接收数据,然后发给下一级模块
  public next(args: { from: 'plugin' | 'builder' | 'reporter', data: any}) {
    const { from, data } = args
    if (from === 'plugin') {
      this.emit('builder:receive', data)
    } else if (from === 'builder') {
      this.emit('reporter:receive', data)
    }
  }
}

export class PluginA<O extends PluginAConfigType> {
  public init(manager: any) {
    this._manager = manager
  }
  
  private handleError(msg) {
    this._manager.emit('manager:next', { from: 'plugin', data: msg })
  }
}

export class Builder<O extends BuilderConfigType> {
  public init(manager: any) {
    this._manager = manager
    this._manager.on('builder:receive', this.receive.bind(this))
  }
  
  private receive(data: any) {
    // 处理数据
    const newData = this.process(data)
    this._manager.emit('manager:next', { from: 'builder', data: newData })
  }
}

export class ReporterA<O extends ReporterAConfigType> {
  public init(manager: any) {
    this._manager = manager
    this._manager.on('reporter:receive', this.receive.bind(this))
  }
  
  public receive(args: any) {
    this.report(args)
  }
}

接口请求捕获

在大多数情况下,前端通过HTTP的方式和服务端进行交互。不管是自己封装请求方法,还是直接使用类似于 axios 的 HTTP 请求库,都是需要基于 XHR 和 Fetch 去实现的。所以我们需要重写 XHR 和 Fetch 暴露出来的 Hook 并进行代理,由此获得请求相关的信息。

XMLHttpRequest

XMLHttpRequest.open() 方法用来初始化一个新创建的请求,在这个方法里我们可以拿到请求的 URL 和请求方法。

XMLHttpRequest.send() 方法用来发送HTTP请求,在这个方法里我们可以拿到请求参数。

另外,在 XMLHttpRequest.onreadystatechange 事件里,我们可以监听到请求状态的变化。当 xhr.readyState === XMLHttpRequest.DONE 时表示请求操作已经完成,这时候我们就可以记录请求的状态码和请求结束的时间。

	public overideXHRMethod() {
    const xhrproto = XMLHttpRequest.prototype;
    const originalOpen = xhrproto.open
    const originalSend = xhrproto.send
    
    xhrproto.send = function (this, ...args: any): void {
      const xhr = this;
      msg = {
        ...msg,
        request: args[0],
      }
      return originalSend.apply(xhr, args);
    }

    xhrproto.open = function (this, ...args: any): void {
      const xhr = this;

      msg = {
        ...msg,
        url: args[1],
        method: (args[0] || '').toUpperCase(),
        statusCode: 0,
        startTimestamp: Date.now() // 请求开始时间
      }

      const onreadystatechangeHandler = function (): void {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            try {
              msg.statusCode = xhr.status
              msg.endTimestamp = Date.now() // 请求结束时间
              msg.responseHeaders = xhr.getAllResponseHeaders()
              if (['', 'json', 'text'].indexOf(xhr.responseType) !== -1) {
                msg.response = typeof xhr.response === 'object' ? JSON.stringify(xhr.response) : xhr.response
              }
            } catch (e) {
              /* do nothing */
            }
        }
      }

      if ('onreadystatechange' in xhr && typeof xhr.onreadystatechange === 'function') {
        const original = xhr.onreadystatechange
        xhr.onreadystatechange = function (...readyStateArgs: any): void {
          onreadystatechangeHandler();
          return original.apply(xhr, readyStateArgs);
        }
      } else {
        xhr.addEventListener('readystatechange', onreadystatechangeHandler);
      }

      return originalOpen.apply(xhr, args);
    }
  }

如果想获取响应头可以使用方法 XMLHttpRequest.getAllResponseHeaders()XMLHttpRequest.getResponseHeader() 。不过这两个方法并不能拿到所有的响应头信息,对于跨域的请求只能拿到以下几个字段:

  • Cache-Control
  • Content-Language
  • Content-Length
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma

如果想拿到其他字段,需要在响应头 Access-Control-Expose-Headers 里指定哪些字段是可以公开的。

Fetch

window.fetch() 方法用来发起获取资源的请求,它的第一个参数为请求的 URL,第二个参数为 Request 对象。它返回一个 promise,这个 promise 会在请求响应后被 resolve,并传回 Response 对象。

	public overideFetchMethod() {
    const originalFetch = window.fetch
    if (!originalFetch) {
      return
    }
    window.fetch = function(...args) {
      const method = String(args[1]?.method || 'get').toUpperCase()
      const url = String(args[0])
      return originalFetch.apply(window, args).catch((err: Error) => {
        let msg: ReportMsgType = {
          url,
          method: method
        }
        throw err
      })
    }
  }

因为公司的项目里很少用到由 Fetch 发起的请求,所以这里写的比较简单。

JS错误捕获

对于那些可预见的 JS 错误,通常我们通过 try/catch 去捕获。其他的 JS 错误,我们可以通过全局监听 error 事件来捕获。另外值得一提的是,对于 Promise 中的错误,如果我们有用 reject 去处理错误那么会触发 rejectionhandled 事件,否则会触发 unhandledrejection 事件。

	private handleError(event: ErrorEvent | PromiseRejectionEvent) {
    const error = 'error' in event ? event.error : event.reason
    const msg: ReportMsgType = {
      name: 'browserError',
      catchBy: 'PluginBrowser',
      error
    }
  }

  private initMonitor() {
    window.addEventListener('error', this.handleError.bind(this))
    window.addEventListener('unhandledrejection', this.handleError.bind(this))
  }

资源加载错误捕获

常见的前端资源加载包括图片的渲染和外部文件的引用,我们可以通过监听 img、link 和 script 标签的 error 事件来捕获这些资源的加载错误。

const resourceTagName: string[] = ['img', 'script', 'link']

export class PluginResource<O extends ResourceConfigType> {
	private handleError(event: Event) {
    const target = event.target as HTMLScriptElement | HTMLLinkElement
    if (!target) {
      return
    }
    const tagName = (target.tagName || '').toLowerCase()
    const isResource = resourceTagName.includes(tagName)
    if (!isResource) {
      return
    }
    const msg: ReportMsgType = {
      name: 'ResourceLoadError',
      catchBy: 'PluginResource',
      url: 'src' in target ? target.src : target.href,
      tagName: tagName
    }
  }

  private initMonitor() {
    window.addEventListener('error', this.handleError.bind(this), true)
  }
}

最后

目前整个 SDK 还处于很初级的阶段,能完成常见错误类型的捕获和上报,后续随着需求的增加 SDK 需要实现更多的功能,希望后续再更新一波~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/997269.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023/09/08 qtc++ day3

自行封装一个栈的类&#xff0c;包含私有成员的属性&#xff1a;栈的数组&#xff0c;记录栈顶的变量 成员函数&#xff1a;构造函数、析构函数、拷贝构造函数、入栈、出栈、清空栈、判空、判满、获取栈顶元素、求站的大小 头文件 #ifndef STACK_H #define STACK_H #include …

el-table操作列动态自适应设置(根据操作项个数动态设置宽度)

一、目的 目的&#xff1a;表格操作列宽度&#xff0c;根据操作项多少&#xff0c;自动调节宽度背景&#xff1a;用el-table组件开发时&#xff0c;对于表格的操作列的自适应宽度是一个问题&#xff0c;如果不设置&#xff0c;操作按钮多时会有换行问题。如果设置最小宽度或宽…

Tomcat 的部署和优化

1、什么是Tomcat Tomcat&#xff1a;是一个免费的、开源的轻量级web应用服务器&#xff0c;普遍用于中小型系统和访问用户流量小的场合&#xff0c;由于是java语言所开发开发&#xff0c;所以要jdk环境 由 web容器、servlet容器、jsp容器构成 web容器&#xff1a;完成 Web 服…

个人主页网站动态星空背景源码(带后台版本)

动态星空背景个人主页网站源码是一种用于创建个人主页的开源项目。它具有一个令人印象深刻的动态星空背景&#xff0c;为用户提供了一个独特而吸引人的网页设计。此源码还包含一个后台版本&#xff0c;使用户能够轻松管理和更新他们的个人主页内容。 通过该源码&#xff0c;用…

stringBuffer.append(“字符串参数“);这个在字符串参数后添加空格怎么写

stringBuffer.append(“字符串参数”);这个在字符串参数后添加空格怎么写&#xff1f; 要在字符串参数后添加空格&#xff0c;可以直接在字符串参数的末尾使用空格字符&#xff0c;像这样&#xff1a; stringBuffer.append("字符串参数 ");这样就在字符串参数后添加…

试图替代 Python 的下一代AI编程语言:Mojo

文章目录 为什么叫 Mojo &#xff1f;Python 家族的一员&#xff0c;MojoPython 的好处&#xff1a;Python 兼容性Python 的问题移动和服务器部署&#xff1a;Python 子集和其他类似 Python 的语言&#xff1a; Mojo 是一种创新的编程语言&#xff0c;结合了 Python 的可用性和…

【Unity】 2D 游戏 库存模块实现

库存模块主要参考了 youtube 上的视频 BMo 的 Flexible INVENTORY SYSTEM in Unity with Events and Scriptable Objects 和 Simple Inventory UI in Unity With Grid Layouts 这两个视频是一个系列 还是一个视频也是 BMo的 How To INTERACT with Game Objects using UNITY E…

git:亲测体验rebase与merge

rebase与merge异同与最佳使用场景[1] 这个dev-cui分支从devlop分支切出后,一直都只有我一个人在开发&维护. 假如还有一位同事张三, 在devlop分支切出的分支dev-zhangsan上进行开发,他添加了一个glossary.md,而后进行了add & commit 此时项目开发完成,需要将两个分支合并…

【C++模拟实现】手撕AVL树

【C模拟实现】手撕AVL树 目录 【C模拟实现】手撕AVL树AVL树的介绍&#xff08;百度百科&#xff09;AVL树insert函数的实现代码验证是否为AVL树AVL树模拟实现的要点易忘点AVL树的旋转思路 作者&#xff1a;爱写代码的刚子 时间&#xff1a;2023.9.10 前言&#xff1a;本篇博客将…

《自然语言处理(NLP)的最新进展:Transformers与GPT-4的浅析》

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

Stable Diffusion 免费升级 SDXL 1.0,哪些新特性值得关注?体验如何?5 分钟带你体验!

一、引言 7 月 26 日&#xff0c;Stability AI 发布了 SDXL 1.0&#xff0c;号称目前为止&#xff0c;最厉害的开放式图像生成大模型。 它到底有没有网上说的那么炸裂&#xff1f;真的已经实现了像 midjourney 一样 靠嘴出图 的功能吗&#xff1f;相对于之前的版本&#xff0c;…

【redis进阶】Redis String数据类型为什么不好用

保存1 亿张10字节图片标识&#xff0c;String结构用了 6.4GB 的内存&#xff0c;为什么&#xff1f;如何优化&#xff1f; 数据量多时&#xff0c;比较占空间 存储数量量较多的时候&#xff0c;可以使用list数据结构来替代String&#xff0c;以二级编码的方式将数据存入redis…

[杂谈]-电动汽车有哪些不同类型

电动汽车有哪些不同类型&#xff1f; 文章目录 电动汽车有哪些不同类型&#xff1f;1、概述2、纯电动汽车&#xff08;BEV&#xff09;3、燃料电池电动汽车&#xff08;FCEV&#xff09;4、插电式混合动力汽车 (PHEV&#xff09;5、混合动力电动汽车 (HEV)6、轻度混合动力HEV7、…

树形DP()

没有上司的舞会 Ural 大学有 N 名职员&#xff0c;编号为 1∼N。 他们的关系就像一棵以校长为根的树&#xff0c;父节点就是子节点的直接上司。 每个职员有一个快乐指数&#xff0c;用整数 Hi 给出&#xff0c;其中 1≤i≤N。 现在要召开一场周年庆宴会&#xff0c;不过&am…

非结构化数据之XPath学习

1、XPath语法 XPath 是一门在 XML 文档中查找信息的语言。 XPath 可用来在 XML 文档中对元素和属性进行遍历。 <?xml version"1.0" encoding"ISO-8859-1"?> <bookstore> <book><title lang"eng">Harry Potter</t…

实战教程:如何将自己的Python包发布到PyPI上

1. PyPi的用途 Python中我们经常会用到第三方的包&#xff0c;默认情况下&#xff0c;用到的第三方工具包基本都是从Pypi.org里面下载。 我们举个栗子: 如果你希望用Python实现一个金融量化分析工具&#xff0c;目前比较好用的金融数据来源是 Yahoo 和 Google。你可能需要读取…

13-RocketMQ主从同步(HA实现)源码原理

slave每次接收到master发过来的一批commitlog数据时&#xff0c;会看master传过来的这段commitlog的起始端&#xff0c;对应的全局物理偏移量&#xff0c;和slave本地存储的批commitlog数据的最大物理偏移量&#xff0c;是否相等 如果相等&#xff0c;也说明master端没有给sla…

TCP详解之三次握手和四次挥手

TCP详解之三次握手和四次挥手 1. TCP基本认识 1.1 什么是 TCP TCP是面向连接的、可靠的、基于字节流的传输层通信协议。 1.2 TCP协议段格式 我们先来看看TCP首部协议的格式 我们先来介绍一些与本文关联比较大的字段&#xff0c;其他字段不做详细阐述。 序列号&#xff1a…

【javaweb课设源码】图书管理系统SSM Mysql 期末课设

文章目录 简介 简介 本系统使用Javaweb技术制作&#xff0c;数据库为mysql 附带论文报告文档 printf("需要源码&#xff0c;可以baidu学长敲代码")&#xff1b;

input子系统框架、外设驱动开发

一、input子系统基本框架 Linux内核为了两个目的&#xff1a; 简化纯输入类外设&#xff08;如&#xff1a;键盘、鼠标、游戏杆、轨迹球、触摸屏。。。等等&#xff09;的驱动开发统一输入类外设产生的数据格式&#xff08;struct input_event&#xff09;&#xff0c;更加方…