如何检测 Network 请求异常 - PerformanceObserver

图片来自 bing.com

背景

我们想实现一个 Tampermonkey 插件，当发现某个接口报错则使用替代接口。比如某个 AI 网站接口挂了，我们想替换成 kimi 或 deepseek 的接口，但是我们没法修改这个网站的源码。

其次我们经常在 Chrome 控制台的 Network 面板看到接口报错 500，如何监听这类错误呢？

GET https://example.com/api/completion?query=3 500 (Internal Server Error)

如何实现？可以使用 PerformanceObserver

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('entry', entry)
    
    if (entry.initiatorType === 'fetch' || entry.initiatorType === 'xmlhttprequest') {
      if (entry.responseStatus >= 400) {
        console.error('网络请求错误:', entry.name, '状态码:', entry.responseStatus);
      }
    }
  });
});

observer.observe({ type: 'resource', buffered: true });

注意点：entry.initiatorType 会报 ts 错误，因为 entry 的类型被误认为是 PerformanceEntry 没有该字段，TS 无法做到如此精确的推导问题 github.com/microsoft/T… 。从逻辑上看 type: resource 则 entry 的类型为 PerformanceResourceTiming 则自然有 initiatorType。

PerformanceResourceTiming 继承自 PerformanceEntry

我们可以通过 @ts-expect-error https://github.com/microsoft/TypeScript/issues/58644 或更好的方式采用 type assertion。

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
+   const entry = perEntry as PerformanceResourceTiming;
    console.log('entry', entry)
    
    if (entry.initiatorType === 'fetch' || entry.initiatorType === 'xmlhttprequest') {
      if (entry.responseStatus >= 400) {
        console.error('网络请求错误:', entry.name, '状态码:', entry.responseStatus);
      }
    }
  });
});

observer.observe({ type: 'resource', buffered: true });

我们封装下“检测网络请求异常”的函数。

type IProps = {
  when: (entry: PerformanceResourceTiming) => boolean;
  callback: (entry: PerformanceResourceTiming) => unknown;
  buffered?: boolean;
}

function observeNetwork({ when, callback, buffered = true }: IProps) {
    const observer = new PerformanceObserver((list) => {
      list.getEntries().forEach((perfEntry) => {
        const entry = perfEntry as PerformanceResourceTiming;

        if (when(entry)) {
          callback(entry)
        }
      });
    });

    observer.observe({ type: 'resource', buffered });
    
    return () => {
      observer.disconnect()
    }
}

用法：

const doSthOnNetworkError = (entry: PerformanceResourceTiming) => {
  console.error('网络请求错误:', entry.name, '状态码:', entry.responseStatus);
}

const disconnect = observeNetwork({
  when: ({ initiatorType, responseStatus }) => {
    return responseStatus >= 400 && (initiatorType === 'fetch' || initiatorType === 'xmlhttprequest')
  },
  
  callback: doSthOnNetworkError
})

// 当不需要监听的时候
disconnect()

// 这样设置可以获取到页面加载初期所有资源的性能数据
observer.observe({ 
  type: 'resource', 
  buffered: true 
});

// 如果只想观察后续发生的资源加载
observer.observe({ 
  type: 'resource', 
  buffered: false 
});