Como lidar com Uncaught (in promise) DOMException in JavaScript

Quando você vê algo como,

where "(in promise)" é especificado, ele indica simplesmente que um objeto Promessa foi rejeitado, e não foi pego.

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 se trata de programação assíncrona, isto significa basicamente que ocorreu um erro assíncrono, e desde o advento das funções assíncronas, quando uma promessa é rejeitada e não capturada, ela registra o erro, como visto na imagem acima.

A maneira mais simples de capturar um erro da promessa é usar o método de captura da promessa. 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' 

Haqui, você pode ver que estamos usando try {} catch() {}, mas como está dentro de uma função assíncrona, ele opera de forma assíncrona, e assim captura os erros assíncronos.

(FTR, certifique-se de fazer algo com seus erros, síncrono ou assíncrono - ao contrário do código de exemplo acima. Obviamente, apenas registar 'Caught!' não é útil :)