自研前端监控系统总结(SDK篇)-接口监控

本文总结了作者所在公司自研的前端监控系统中,针对SDK接口监控的方法。通过二次封装第三方库,重写特定事件,可以捕获并分析所有接口请求信息,以判断接口状态是否正常。示例代码展示了如何改写实现这一功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

对我司自研的前端监控系统的前端SDK进行总结

所有的请求第三方库都是基于xhrfetch二次封装的,所以只需要重写这两个事件就可以拿到所有的接口请求的信息,通过判断status的值来判断当前接口是否是正常的。举个栗子,重写xhr的代码操作 。

private xhrReplace () {
    if (!window.XMLHttpRequest) return
    const xmlhttp = window.XMLHttpRequest
    const _oldSend = xmlhttp.prototype.send
    const _oldSetRequestHeader = xmlhttp.prototype.setRequestHeader
    let startTime = 0
    const _handleEvent = (event: any) => {
      if (event && event.currentTarget) {
        const currentTarget = event.currentTarget
        const log: any = {
          code: 0,
          path: currentTarget.responseURL,
          time: Date.now(),
          duration: Date.now() - startTime
        }
        if (currentTarget.status !== 200) {
          // 自定义错误上报
          log.code = -1
          log.page = wind
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值