Cordova iOS 项目中解决 window.onerror 捕获不到详细错误信息的问题

问题背景

在 Cordova iOS 应用开发中，开发者经常使用 window.onerror 全局错误处理函数来捕获 JavaScript 运行时错误。然而，许多开发者发现，在 iOS 平台上，通过这种方式捕获到的错误信息极其有限，通常只显示"Script error"而没有具体的错误信息、行号或堆栈跟踪，这给调试和错误监控带来了很大困难。

问题根源

这个现象的根本原因在于 Safari/WebKit 的安全机制。当网页内容通过 file:// 协议加载时（这是 Cordova iOS 的默认加载方式），浏览器会将这些内容视为跨域资源。出于安全考虑，浏览器会限制跨域脚本的错误信息访问，只提供最基本的错误提示，这就是为什么 window.onerror 只能捕获到"Script error"而没有更多详细信息。

解决方案

Cordova iOS 提供了使用自定义 URL Scheme 替代 file:// 协议的方案，这可以解决错误信息受限的问题：

1. 在项目的 config.xml 文件中添加以下配置：

<platform name="ios">
    <preference name="scheme" value="app" />
    <preference name="hostname" value="localhost" />
</platform>

2. 这样配置后，应用内容将通过 app://localhost 这样的 URL 加载，而不是 file://，从而避免了跨域限制。

注意事项

采用 URL Scheme 方案后，开发者需要注意以下几点：

1. Web Storage 数据隔离：由于 origin 改变（从 file:// 变为 app://localhost），所有基于 origin 的 Web Storage（包括 localStorage、sessionStorage、IndexedDB 等）将无法访问之前存储的数据。这是因为浏览器将这些存储容器与 origin 严格绑定。

2. 数据迁移策略：对于已经发布的应用，如果需要保留用户数据，可以考虑实现数据迁移方案。具体可以通过以下步骤实现：

   • 检查旧的 file:// 协议下的存储文件（通常是 SQLite 数据库）
   • 检查新的 URL Scheme 下的存储文件是否存在
   • 如果旧数据存在而新数据不存在，则将旧数据迁移到新位置

3. 文件命名规则：WebKit 的存储文件通常遵循 <protocol>_<hostname>_0.localstorage 的命名规则。例如：

   • file:// 协议下的文件名为 file__0.localstorage
   • app://localhost 协议下的文件名为 app_localhost_0.localstorage

最佳实践

1. 对于新项目，建议从一开始就使用 URL Scheme 方案，避免后期迁移的复杂性。

2. 对于现有项目，在切换到 URL Scheme 前应该：

   • 评估现有存储数据的重要性
   • 制定数据迁移计划
   • 考虑在应用启动时自动执行迁移

3. 错误处理增强：即使解决了错误信息获取问题，也建议实现更健壮的错误处理机制，如：

   • 结合 try-catch 捕获关键代码块错误
   • 实现错误上报系统
   • 在生产环境中提供友好的错误提示

总结

Cordova iOS 应用中 window.onerror 捕获不到详细错误信息的问题，本质上是由于 file:// 协议导致的跨域限制。通过切换到自定义 URL Scheme 方案可以解决这个问题，但同时需要注意 Web Storage 的数据隔离问题。开发者应根据项目实际情况选择合适的方案，并在必要时实现数据迁移策略，确保应用稳定性和用户体验。