React部署时脚本MIME类型错误监听方案咨询

你遇到的这类因资源404返回HTML页面导致的脚本MIME类型不匹配错误，默认的window.addEventListener('error')在冒泡阶段可能监听不到——这类资源加载相关的错误部分会在捕获阶段触发，或是被浏览器事件机制限制无法冒泡到window层面。以下是几种可行的处理方案：

1. 开启捕获阶段监听error事件 #

将监听事件的第三个参数设为true，强制在捕获阶段捕获错误，就能拿到这类资源加载错误：

window.addEventListener('error', function(e) {
  // 筛选目标错误：包含MIME类型提示且是指定脚本
  if (e.message.includes('MIME type') && e.filename.includes('mycookscript.js')) {
    // 这里写你的处理逻辑，比如提示用户刷新、触发页面重载等
    console.log('捕获到目标加载错误:', e);
  }
}, true);

2. 针对动态加载的脚本（如React懒加载chunk）直接捕获错误 #

如果mycookscript.js是React路由分割或懒加载生成的chunk，直接在import()的catch回调里处理更精准：

const LazyComponent = React.lazy(() => 
  import('./path/to/your/component').catch(err => {
    if (err.message.includes('mycookscript.js') || err.message.includes('MIME type')) {
      // 自定义错误处理，比如返回备用组件
      console.log('动态加载脚本出错:', err);
      return { default: () => <div>资源加载异常，请刷新页面重试</div> };
    }
    // 非目标错误继续抛出
    throw err;
  })
);

3. 用Performance API主动检查资源加载状态 #

如果上述方法仍有遗漏，可以通过Performance API主动扫描已加载的资源，找出404的目标脚本：

function checkFailedScript() {
  const resourceList = performance.getEntriesByType('resource');
  const targetFailed = resourceList.find(item => 
    item.name.includes('mycookscript.js') && item.responseStatus === 404
  );
  if (targetFailed) {
    console.log('检测到404的目标脚本:', targetFailed);
    // 执行你的处理逻辑
  }
}

// 页面加载完成后检查一次
window.addEventListener('load', checkFailedScript);
// 如果是动态加载的资源，可以定时检查（按需调整间隔）
setInterval(checkFailedScript, 1500);

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