javascript - 如何在Android App中全局捕获Vue项目的Promise异常？

Question

目前将vue项目打包嵌入到android打包壳中套壳使用;然后需要监控vue代码异常,使用以下方法捕获异常

• Vue.config.errorHandler监控vue异常
• window.onerror和window.addeventlistener("error")监控js代码异常
• window.onunhandledrejection和window.addeventlistener("unhandledrejection")捕获未被处理的promise异常
  最主要的是onunhandledrejection异常,因为是老项目,代码中promise方法基本都没有catch,所以需要增加全局捕获,不然改整个项目不现实;
  其中Vue.config.errorHandler在web环境和android app中可以捕获vue错误;
  但是其他方法在web环境下生效,在android app环境下不生效,方法都不进入

代码位置 main.js

抛出如下错误


所有的监听都捕获不到错误

环境

• vue 2.5.2
• android版本 8
• android sdk 28

各位大神有遇到此问题吗?如何解决?
谢谢!

• 在index.html中尝试添加监听,只会在html文件中抛出异常才会捕获,当进入vue代码中无效
• 将异常捕获代码放在app.vue-> mounted()方法中,使用this.$nextTick中包裹还是无效

Answer 1

在Android App中全局捕获Vue项目的Promise异常时，如果window.onunhandledrejection和window.addEventListener("unhandledrejection")在Web环境下工作正常，但在Android App环境下不生效，那么可能是由于Android WebView的某些限制或差异导致的。以下是一些建议的解决步骤和可能的原因：

1. 检查WebView设置：
   确保你的Android WebView设置允许JavaScript执行，并且没有禁用某些与异常捕获相关的功能。
2. 确保Vue和JS环境相同：
   确认在Android App中的WebView加载的Vue环境与Web环境尽可能一致。有时，Android WebView可能不支持某些Web API或者存在行为差异。
3. 更新Vue和Android SDK：
   如果可能的话，尝试更新Vue版本到较新的稳定版本，并检查是否有更新的Android SDK或WebView组件可用。
4. 使用try-catch包装Promise：
   由于你的Vue项目中的Promise方法大多没有.catch()处理，你可能需要在全局范围内使用try-catch来包装Promise的调用，并在catch块中处理异常。这可以通过创建一个全局的Promise包装函数或使用库（如bluebird）来实现。
5. 自定义Vue Mixin：
   你可以创建一个Vue全局Mixin，自动给所有组件方法添加错误处理。但是，这种方法对Promise的捕获可能不够直接，因为Mixin主要用来处理组件的生命周期和方法。
6. 使用第三方库：
   考虑使用第三方库来帮助捕获全局异常，例如vue-error-boundary或vue-error-handler。这些库可能提供了更好的跨环境兼容性。
7. 调试WebView控制台：
   使用Android Studio的Logcat功能或WebView的调试工具来查看是否有与异常捕获相关的日志输出。这可能会提供一些关于为什么异常没有被捕获的线索。
8. 考虑重构代码：
   虽然这可能需要大量工作，但逐步将代码库中的Promise更新为使用.catch()来处理异常可能是一个长期稳定的解决方案。

请注意，由于Android WebView的行为可能因版本和设备而异，因此可能需要针对特定情况进行调试和测试。

最后，对于“在index.html中尝试添加监听只会在html文件中抛出异常才会捕获”的问题，这是因为window.onerror和window.onunhandledrejection等事件监听器是全局的，它们应该能够捕获在Vue组件中抛出的异常，前提是这些异常是通过标准的错误抛出机制（如throw new Error()）或未处理的Promise rejection发生的。如果这些监听器在Android WebView中不起作用，那么很可能是由于WebView的限制或配置问题。