Flutter中捕获JS异常并继续执行后续代码的实现方案

问题分析 #

你的代码存在两个核心问题导致捕获异常后无法继续执行：

1. 外层try/catch块中使用了rethrow，会将捕获到的异常重新抛出，直接中断后续代码执行；
2. 直接执行存在错误的JS代码时，异常在JS环境中未被处理，传递到Dart层时出现序列化问题（即你看到的obj[$toString] is not a function错误），无法被Dart的异常处理逻辑正确捕获。

解决方案 #

1. 移除rethrow并调整Dart层异常处理 #

外层catch块的rethrow是代码中断的直接原因，移除它才能让捕获异常后继续执行后续代码。同时补充通用catch块，覆盖所有类型的异常。

2. 在JS层面包裹异常捕获 #

将需要执行的JS代码放在JS的try/catch块中，把异常信息转为字符串返回给Dart，避免跨环境传递时的序列化问题，确保Dart能正确接收并处理结果。

修改后的完整代码 #

Future<void> myMethod() async {
  try {
    if (webController != null) {
      final hasElement = await webController?.evalRawJavascript(
        "document.getElementById('gradient-canvas').isConnected"
      );
      if (hasElement == true) {
        // 在JS层面包裹try/catch，返回执行结果或错误信息
        final result = await webController!.evalRawJavascript('''
          try {
            gradientt.play();
            return "success";
          } catch (e) {
            return "error: " + e.toString();
          }
        ''');
        // 处理JS返回的结果
        if (result.toString().startsWith("error:")) {
          debugPrint("JS执行错误: ${result.toString()}");
        } else {
          debugPrint("JS执行成功");
        }
      }
    }
  } on Error catch (e) {
    debugPrint("Dart层捕获异常: -------> ${e.toString()}");
    // 移除rethrow，避免中断后续代码
  } catch (e) {
    // 捕获所有类型的异常，包括非Error类型的异常
    debugPrint("捕获未知异常: ${e.toString()}");
  }

  // 此处代码现在会在异常捕获后继续执行
  debugPrint("异常处理完成，代码继续执行");
}

关键说明 #

• JS层面捕获：通过将JS代码包裹在try/catch中，把异常转为字符串返回，避免了跨环境的异常序列化问题，确保Dart能正确接收并处理结果。
• 移除rethrow：外层catch块不再重新抛出异常，代码流程不会被中断。
• 新增通用catch块：捕获所有类型的异常（不仅仅是Error类型），避免遗漏未处理的异常情况。

内容的提问来源于stack exchange，提问作者Cyrus the Great