Chrome及WebView更新后Ionic1应用出现Uncaught in (promise) DOMException异常求助

Hey there, I’ve run into exactly this frustrating issue with Ionic 1 apps right after updating Chrome and Android System WebView to version 66.0.3359.126! Let me walk through what I discovered and the fixes that worked for me.

Common Causes #

Chrome 66 and its corresponding WebView introduced stricter security and promise-handling rules that exposed issues that were previously ignored:

• Uncaught promise rejections: Older versions might have swallowed failed promises, but Chrome 66 now throws explicit DOMExceptions for unhandled rejections.
• Tightened same-origin/CSP rules: Cross-origin requests or resource access that worked before might now be blocked due to stricter Content Security Policy enforcement.
• Plugin compatibility gaps: Some Ionic 1-era Cordova plugins (like cordova-plugin-inappbrowser or cordova-plugin-file) haven’t been updated to align with the new WebView’s behavior.

Step-by-Step Fixes #

1. Add catch handlers to all promises
   Go through your custom code and Ionic service calls to ensure every .then() has a corresponding .catch() to handle failures. For example:

   // Example with $http
   $http.get('/api/your-data')
     .then(function(response) {
       // Handle success
     })
     .catch(function(error) {
       console.error('Request failed:', error);
       // Add proper error handling (e.g., show a toast to the user)
     });
   

   Don’t forget Ionic’s built-in services like $ionicPopup or $ionicLoading—these return promises too and need error handlers.

2. Update your Content Security Policy (CSP)
   Chrome 66 enforces CSP more strictly. Update the meta tag in your index.html to allow necessary resources. Here’s a baseline you can adjust:

   <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
   

   Add specific domains if your app needs to access external APIs (e.g., https://your-api-domain.com to the default-src directive).

3. Patch Ionic 1 and Cordova plugins
   Even though Ionic 1 is end-of-life, there were late patches to fix WebView compatibility. Update your Ionic dependencies:

   npm install ionic@1.3.9 --save
   

   Also, update critical Cordova plugins:

   cordova plugin update cordova-plugin-whitelist
   cordova plugin update cordova-plugin-inappbrowser
   cordova plugin update cordova-plugin-webview
   

4. Log detailed error information
   To narrow down the exact cause, add a global handler for uncaught promise rejections to get full DOMException details:

   window.addEventListener('unhandledrejection', function(event) {
     console.error('Uncaught Promise Rejection:', event.reason);
     // Check event.reason for message, code, and stack trace
   });
   

   For example, a SecurityError points to a CORS/permission issue, while NotFoundError might mean a missing resource or file.

If you still run into issues after trying these steps, sharing the specific error message from the unhandledrejection handler will help pinpoint the problem faster.

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