Flutter如何捕获js_dev_runtime抛出的JavaScript错误？

你遇到的NotAllowedError是浏览器端的JavaScript错误，Flutter自带的FlutterError和PlatformDispatcher仅处理Dart层或Flutter框架抛出的错误，无法直接捕获JS侧的底层错误。以下是几种有效捕获和处理这类错误的方案：

1. 利用audioplayers自带的错误回调 #

audioplayers包提供了播放器错误监听API，可以直接捕获底层传递的JS错误信息：

final player = AudioPlayer();

// 监听播放器错误
player.onPlayerError.listen((errorMessage) {
  debugPrint('播放器错误详情: $errorMessage');
  // 匹配Autoplay限制错误
  if (errorMessage.contains('NotAllowedError')) {
    debugPrint('检测到Autoplay限制：需先与页面交互才能播放音频');
    // 这里可以添加提示用户交互的逻辑
  }
});

// 执行播放操作
await player.play(UrlSource('你的音频地址'));

2. 通过dart:js注册全局JS错误监听 #

如果需要捕获所有JS侧未处理的错误，可以使用dart:js库在全局层面监听JS错误：
首先确保pubspec.yaml中引入js依赖：

dependencies:
  js: ^0.6.7

然后在main函数中注册监听：

import 'dart:js' as js;

void main() {
  // 注册全局JS错误处理器
  js.context['onerror'] = (Object error, String? source, int? lineno, int? colno, Object? errorObj) {
    debugPrint('JS错误: $error');
    if (error.toString().contains('NotAllowedError')) {
      debugPrint('捕获到Autoplay限制错误');
      // 处理逻辑
    }
    return true; // 可选：阻止错误继续输出到浏览器控制台
  };

  // 保留原有Flutter错误监听
  FlutterError.onError = (details) {
    FlutterError.presentError(details);
    debugPrint("FlutterError");
  };
  PlatformDispatcher.instance.onError = (error, stack) {
    debugPrint("PlatformDispatcher");
    return true;
  };

  runApp(const MyApp());
}

3. 提前检测Autoplay权限（从根源避免错误） #

更合理的方式是提前判断浏览器是否允许自动播放，避免错误抛出：

import 'dart:js' as js;

Future<bool> hasAutoplayPermission() async {
  try {
    // 创建临时音频元素测试Autoplay权限
    final audioElement = js.JsObject(js.context['Audio']);
    await js.promiseToFuture(audioElement.callMethod('play'));
    audioElement.callMethod('pause');
    return true;
  } catch (e) {
    return false;
  }
}

// 使用示例
final canAutoplay = await hasAutoplayPermission();
if (canAutoplay) {
  // 执行音频播放
} else {
  debugPrint('请先点击页面或进行其他交互后再播放音频');
  // 显示用户提示
}

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