Angular 6音频录制stopRecording间歇性抛DOMException，如何获取详情？

嘿，我完全懂你现在的头疼之处——间歇性的错误，还只给个模糊的DOMException提示，连代码行都指向DOCTYPE，这排查起来确实挠头。不过别担心，我们可以通过几个方法强制浏览器吐出更多错误细节，一步步定位问题：

1. 全局捕获未处理的Promise拒绝 #

既然错误提示是Uncaught (in promise)，说明有个Promise的拒绝没被处理。我们可以给window添加一个全局监听，直接拿到完整的错误对象和堆栈：

在你的main.ts或者根组件（比如app.component.ts）里添加这段代码：

window.addEventListener('unhandledrejection', (event) => {
  console.error('=== 未处理的Promise拒绝 ===');
  console.error('错误原因:', event.reason);
  console.error('错误名称:', event.reason.name);
  console.error('错误消息:', event.reason.message);
  console.error('完整堆栈:', event.reason.stack);
  event.preventDefault(); // 阻止默认的控制台报错，避免重复输出
});

这样不管这个Promise是从哪里跑出来的，你都能拿到最详细的错误信息，包括具体的调用堆栈，再也不会只指向HTML第一行了。

2. 检查WebAudioTrack的错误回调 #

很多老的JS库会用「成功回调+错误回调」的模式，而不是Promise的.catch()。你之前只传了一个回调，可能这个回调是成功触发的，而错误被单独抛出了。试试给stopRecording传第二个错误回调参数：

recordStop() {
  this.audioTrack.stopRecording(
    // 成功回调
    (e) => {
      this.blobWav = this.audioTrack.blob;
      this.audioURL = this.audioTrack.getBlobSrc();
      this.tearDownMediaStream();
      this.recordState = 'playbackready';
      window.clearInterval(this.timer);
    },
    // 新增错误回调
    (error) => {
      console.error('stopRecording 出错了:', error);
      console.error('错误详情:', error.message, error.name);
      console.error('堆栈:', error.stack);
    }
  );
}

说不定这个库本来就提供了错误回调，只是你没用到，错误才变成了未捕获的Promise拒绝。

3. 把stopRecording封装成Promise来捕获错误 #

如果库本身不支持Promise，但你想用.catch()的方式处理，可以自己把它封装成Promise：

recordStop() {
  // 封装成Promise
  const stopPromise = new Promise((resolve, reject) => {
    this.audioTrack.stopRecording(resolve, reject);
  });

  stopPromise
    .then((e) => {
      // 原来的成功逻辑
      this.blobWav = this.audioTrack.blob;
      this.audioURL = this.audioTrack.getBlobSrc();
      this.tearDownMediaStream();
      this.recordState = 'playbackready';
      window.clearInterval(this.timer);
    })
    .catch((error) => {
      console.error('录制停止失败:', error);
      console.error('错误栈:', error.stack);
      // 这里还可以加一些错误后的恢复逻辑，比如重置录制状态
    });
}

这样所有的错误都会被.catch()捕获到，方便你排查。

4. 检查MediaStream的状态（提前排查潜在问题） #

间歇性错误很多时候和资源状态有关，比如录制过程中MediaStream意外断开了。在调用stopRecording之前，先打印一下MediaStream的状态：

recordStop() {
  // 检查MediaStream和Track的状态
  if (this.audioTrack?.stream) {
    console.log('MediaStream是否活跃:', this.audioTrack.stream.active);
    this.audioTrack.stream.getTracks().forEach(track => {
      console.log('音频Track状态:', track.readyState); // 正常应该是"live"
    });
  }

  // 再执行停止逻辑
  this.audioTrack.stopRecording(...)
}

如果某次报错前，Track状态变成了ended或者MediaStream不活跃了，那问题可能出在MediaStream的意外中断上，而不是stopRecording本身。

5. 用Angular的NgZone确保错误被捕获 #

第三方库的异步操作有时候会跑出Angular的Zone，导致错误没被Angular的错误处理机制捕获。你可以把stopRecording的调用包裹在NgZone里：

// 先引入NgZone
import { NgZone } from '@angular/core';

// 构造函数注入NgZone
constructor(private ngZone: NgZone) {}

recordStop() {
  this.ngZone.run(() => {
    this.audioTrack.stopRecording(
      (e) => { /* 成功逻辑 */ },
      (error) => { /* 错误处理 */ }
    );
  });
}

这样操作会回到Angular的Zone里，错误也能被正常捕获和打印。

先试试全局捕获unhandledrejection的方法，应该能立刻拿到详细的错误信息，然后根据错误提示再深入排查——比如如果错误是NotAllowedError，可能和权限有关；如果是InvalidStateError，那大概率是MediaStream或者AudioContext的状态不对。

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