Come gestire Uncaught (in promise) DOMException in JavaScript

Quando vedete qualcosa come,

dove è specificato "(in promise)", indica semplicemente che un oggetto Promise è stato rifiutato, e non è stato catturato.

In brief, something like the below could generate a Promise error:

1. var x = "hello"; 
2.  
3. new Promise((resolve,reject) => { 
4. if(typeof x !== "number") 
5. return reject(new TypeError("x must be numeric")); 
6. // ... 
7. }); 

Here, because ‘x’ is a string and not a number, ‘reject’ is called. Quando si tratta di programmazione asincrona, questo significa fondamentalmente che si è verificato un errore asincrono, e dall'avvento delle funzioni asincrone, quando una Promessa viene rifiutata e non catturata, viene registrato l'errore, come si vede nell'immagine sopra.

Il modo più semplice per catturare un errore di Promessa è quello di utilizzare il metodo Promise catch. Rewriting the code above as follows would allow you to catch the error:

1. var x = "hello"; 
2.  
3. new Promise((resolve,reject) => { 
4. if(typeof x !== "number") 
5. return reject(new TypeError("x must be numeric")); 
6. // ... 
7. }).catch((err)=>{ 
8. console.log('Caught!'); 
9. }); 

Now, instead of logging a thrown error, Caught! is logged.

Now, to get into a little more depth on error management in async programming. When an error is thrown in normal, linear programming and is not caught, the error will be logged:

1. function square(x) { 
2. if(typeof x !== "number") 
3. throw new TypeError("Argument 'x' must be numeric"); 
4. return x * x; 
5. } 
6.  
7. square("hello"); 
8. // "Uncaught Error: Argument 'x' must be a number" 

This you’re probably pretty familiar with.

The same thing, however, will also happen for errors thrown in asynchronous functions. For instance:

1. async function callServer(message) { 
2. if(typeof message !== "string") 
3. throw new TypeError("Argument 'message' must be a string"); 
4.  
5. return JSON.parse( 
6. await fetch('/api/' + message) 
7. ); 
8. } 
9.  
10. callServer(); // argument[0] === undefined, not a string! 
11. // "Uncaught (in promise) TypeError: Argument 'message' must be a string" 

And you’ll notice, this cannot be caught with a regular try {} catch() {}, e.g., by trying to run the following right in the console:

1. try { 
2. callServer(); 
3. } catch(e) {} 
4. // still logs: 
5. // "Uncaught (in promise) TypeError: Argument 'message' must be a string" 

This is because callServer() runs asynchronously and returns a Promise, but the try {} catch() {} here only catches synchronous errors. To catch this kind of error, you need to catch it as a Promise error. In asynchronous programming, there are two ways to do this:

1. Use the Promise ‘catch’ method, like from above. Since callServer() returns a Promise, we can simply do:

1. callServer().catch(()=>{ 
2. console.log('Caught!'); 
3. }); 

2. Catch it in an async function. Unlike regular functions which cannot ‘catch’ Promise errors, async functions can catch both synchronous and asynchronous Promise errors:

1. async function callServerCatchingErrors(...args) { 
2. try { 
3. await callServer(...args); 
4. } catch(e) { 
5. console.log('Caught!'); 
6. } 
7. } 
8.  
9. callServerCatchingErrors(); 
10. // passing undefined still raises an error internally, 
11. // but the error now doesn't escape 'callServerCatchingErrors' 

Qui, potete vedere che stiamo usando try {} catch() {}, ma poiché è dentro una funzione asincrona, opera in modo asincrono, e quindi cattura gli errori asincroni.

(FTR, assicuratevi di fare qualcosa con i vostri errori, sincroni o asincroni - a differenza del codice di esempio sopra. Ovviamente registrare solo 'Caught!' non è utile :)