HTMLVideoElement load()抛出无法捕获的DOMException，如何解决？

为什么try/catch无效 #

这个Uncaught (in promise) DOMException属于异步Promise拒绝，并非videoElem.load()调用时抛出的同步错误。load()方法本身不返回Promise，但媒体资源的加载是异步过程，该异常产生于后续的资源获取阶段，因此同步的try/catch无法捕获它。

正确的捕获方案 #

可以通过监听video元素的error或abort事件来处理这类错误：

方案1：监听error事件 #

videoElem.addEventListener('error', (e) => {
  console.error('视频加载出错:', e.target.error);
  // 在这里执行后续业务逻辑
});

videoElem.load();

方案2：监听abort事件（针对资源被中止的场景） #

由于报错明确是资源加载被用户代理中止，也可以单独监听abort事件：

videoElem.addEventListener('abort', () => {
  console.log('视频加载被浏览器中止');
  // 继续执行你的代码
});

videoElem.load();

兜底方案：全局Promise拒绝捕获（不推荐） #

如果需要兜底处理所有未捕获的Promise拒绝，可监听全局unhandledrejection事件，但这种方式不够精准，会捕获所有场景的未处理Promise拒绝：

window.addEventListener('unhandledrejection', (event) => {
  if (event.reason instanceof DOMException && event.reason.message.includes('aborted by the user agent')) {
    event.preventDefault(); // 阻止浏览器默认的报错提示
    // 处理视频加载中止的逻辑
  }
});

说明 #

Firefox在页面不可见时中止视频加载是浏览器的资源优化策略，通过上述事件监听，就能在错误发生时正常执行后续代码，不会因为未捕获的Promise异常阻断流程。

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