浏览器控制台间歇性地报告“Uncaught（in promise）DOMException”，但不提供其他详细信息。我怎么能让它给我一些？

Question

我有一个Angular 6应用程序，允许用户在浏览器中录制音频并将其上传到服务器。对于录制它使用WebAudioTrack.js库，它通过<script>标记包含，因为我找不到任何方法将其编译到Angular应用程序中。

大约一半的录音工作正常。其余的时间它工作正常（使用VU表和所有东西），直到用户点击停止按钮。发生这种情况时，Chrome控制台会将错误报告为：

未捕获（在承诺中）DOMException

当我在开发模式下运行Angular时，Chrome错误消息通常包含指向导致错误的代码行的链接。但是，在这种情况下，链接仅指向HTML页面的第1行，即DOCTYPE行。

通过插入大量的console.log语句，我能够遵循程序执行，我相信我已经部分缩小了问题的根源。它似乎发生在下面的代码块中，在调用this.audioTrack.stopRecording((e)的行。

// "Stop" button was clicked
recordStop() {

  /* Browser shows error when following line is called */
  this.audioTrack.stopRecording((e) => {

    /* When browser errs, this code is never reached */
    this.blobWav = this.audioTrack.blob;
    this.audioURL = this.audioTrack.getBlobSrc();
    this.tearDownMediaStream();
    this.recordState = 'playbackready';
    window.clearInterval(this.timer);
  });
}

请注意，这似乎与新的Chrome自动播放策略无关，该策略要求用户在使用AudioContext播放音频之前与页面进行交互，并在使用暂停的AudioContext时抛出类似的错误消息。我已经考虑到了这一点，并且AudioContext的状态被报告为“正在运行”。此外，这是录音，而不是播放。

我已经尝试检查this.audioTrack.stopRecording((e)的返回值并将其输出到控制台。码：

recordStop() {
  var retval = this.audioTrack.stopRecording((e) => {
    // ...
  });
  console.log(retval);
}

输出：

WebAudioTrack {context: AudioContext, sampleRate: 48000, bufferSize: 4096, numberOfAudioChannels: 1, volume: 1, …}

所以，我猜这不是一个返回值，而是一个对象的副本。

我也尝试过添加.catch，但它不支持该方法。

我坚持下一步该做什么继续缩小这种间歇性错误的来源。对于promises的语法，我也有点不知所措，特别是在Angular中。我几乎无法写出它们，所以我还没有调整它们。

如何让浏览器向我提供有关此错误消息的更多详细信息？或者有什么方法可以捕获DOMException，处理它，并输出更多细节？

Answer 1

音频播放，暂停和停止使用chrome有很多问题，它们是异步调用所以我建议在停止音频并将stopRecording转换为异步函数时尝试.then（（）=> {}）：

这里有关于bug的一些文档，希望它有所帮助：https://developers.google.com/web/updates/2017/06/play-request-was-interrupted