如何在Web应用JS中捕获浏览器的ERR_CACHE_READ_FAILURE错误并自动刷新？

你当前的window.error监听无效，核心原因是ERR_CACHE_READ_FAILURE属于资源加载类错误，这类错误不会触发全局window.error事件，或事件对象的message中不会包含该错误码。以下是可行的解决方案：

方法1：捕获资源加载错误（捕获阶段监听） #

通过在捕获阶段监听document的error事件，能覆盖所有资源（脚本、样式、图片等）的加载错误：

// 捕获所有资源加载错误（捕获阶段监听确保不遗漏）
document.addEventListener('error', function(event) {
  const target = event.target;
  // 仅处理带资源地址的元素（img/script/link等）
  if (target.src || target.href) {
    // 通过Performance API获取资源请求详情
    const entries = performance.getEntriesByName(target.src || target.href);
    if (entries.length > 0) {
      const latestEntry = entries[entries.length - 1];
      // 缓存读取失败时，资源请求状态通常为0
      if (latestEntry.responseStatus === 0) {
        // 加标记避免无限刷新
        if (!sessionStorage.getItem('cacheErrorRefreshed')) {
          sessionStorage.setItem('cacheErrorRefreshed', 'true');
          window.location.reload(true); // 强制跳过缓存刷新
        }
        return;
      }
    }
    // 兼容部分场景下的错误信息匹配
    if (event.message && event.message.toLowerCase().includes('err_cache_read_failure')) {
      window.location.reload(true);
    }
  }
}, true);

方法2：用PerformanceObserver精准监控资源加载 #

PerformanceObserver可以更精准地追踪资源加载的全生命周期状态：

const resourceObserver = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    // 仅处理资源加载项，且状态为失败（缓存读取失败会返回0状态）
    if (entry.entryType === 'resource' && entry.responseStatus === 0) {
      if (!sessionStorage.getItem('cacheErrorRefreshed')) {
        sessionStorage.setItem('cacheErrorRefreshed', 'true');
        // 延迟刷新避免页面状态混乱
        setTimeout(() => window.location.reload(true), 500);
      }
    }
  });
});

// 启动监控所有资源加载
resourceObserver.observe({ entryTypes: ['resource'] });

// 页面加载完成后清除刷新标记，保证下次错误能正常触发
window.addEventListener('load', () => {
  sessionStorage.removeItem('cacheErrorRefreshed');
});

方法3：补充异步错误监听（可选） #

针对部分异步加载资源的错误，可以补充监听未处理的Promise拒绝：

window.addEventListener('unhandledrejection', function(event) {
  if (event.reason?.message?.toLowerCase().includes('err_cache_read_failure')) {
    window.location.reload(true);
  }
});

内容的提问来源于stack exchange，提问作者Kangning Li