If you are a JS programmer, Promise must be too familiar. How do you normally handle it when it returns an error? In this article, let’s learn about it.
1. Error handling with .catch
Assuming there is a segment like this, you have handled enough for both the success and failure of the promise (when the promise is rejected or an error occurs).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token keyword">function</span> <span class="token function">getProfile</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">resolve <span class="token punctuation">,</span> reject</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">var</span> myFunc <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token function">myFunc</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token comment">// code generates an error</span> <span class="token function">setTimeout</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> firstName <span class="token operator">:</span> <span class="token string">'Trang'</span> <span class="token punctuation">,</span> lastName <span class="token operator">:</span> <span class="token string">'Nguyen'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token number">3000</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">getProfile</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token parameter">profile</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> profile <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token parameter">error</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'An error has occur: '</span> <span class="token punctuation">,</span> error <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
myFunc()
is not actually a function. This is the part that caused the error. Since you already have the error handling snippet, of course, you will get a log that prints the normal error like this.
1 2 | An error has occur: TypeError: myFunc is not a function |
And now, let’s try a little change. Let’s position the error line differently, in the then () of the promise like this.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <span class="token keyword">function</span> <span class="token function">getProfile</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">resolve <span class="token punctuation">,</span> reject</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">setTimeout</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> firstName <span class="token operator">:</span> <span class="token string">'Trang'</span> <span class="token punctuation">,</span> lastName <span class="token operator">:</span> <span class="token string">'Nguyen'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token number">3000</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">getProfile</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token parameter">profile</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">var</span> myFunc <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token function">myFunc</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token comment">// code generates an error</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> profile <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token parameter">error</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'An error has occur: '</span> <span class="token punctuation">,</span> error <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
And at this point, the processing for printing your error message has not been triggered anymore, you get the result like this.
1 2 | UnhandledPromiseRejectionWarning: TypeError: myFunc is not a function |
Simply understood, because the part you are using to handle errors (error) => {}
only catches the cases where the Promise returns errors. In this case the Promise is returned, then it has another piece of code that causes the error that leads to the promise being rejected. So now what to do if I want to handle it? Remember try...catch
? OK, let’s apply. You just need to fix it
1 2 3 4 5 6 7 8 9 | <span class="token comment">// Example 1.1</span> <span class="token function">getProfile</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token parameter">profile</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">var</span> myFunc <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token function">myFunc</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token comment">// code generates an error</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> profile <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">catch</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">error</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'An error has occur: '</span> <span class="token punctuation">,</span> error <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
The code below executes the promise and let’s understand .catch
means there will be an implicit try...catch
around it.
When we throw an error in .then, the promise will be rejected, thus jumping to the nearest error handling. The error here is not necessarily an explicitly rejected error, it may be a random error in the handler.
1 2 3 4 5 6 7 8 9 | <span class="token comment">// Example 1.2</span> <span class="token function">getProfile</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token parameter">profile</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span> <span class="token punctuation">(</span> <span class="token string">'error nay'</span> <span class="token punctuation">)</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> profile <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">catch</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">error</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'An error has occur: '</span> <span class="token punctuation">,</span> error <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
1 2 3 4 5 6 7 8 9 10 | <span class="token comment">// Example 1.3</span> <span class="token function">getProfile</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token parameter">profile</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">reject</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">Error</span> <span class="token punctuation">(</span> <span class="token string">'error nay'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> profile <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">catch</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">error</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'An error has occur: '</span> <span class="token punctuation">,</span> error <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
In all 3 cases 1.1, 1.2, and 1.3, errors are handled and printed out to the user.
So always remember. catch()
when using promises.
With consecutive series of promises
.catch
doesn’t always have to include a .then
. It may appear after one or more .then
So if you have a string of promises, how do you handle them while doing them, something goes wrong.
The simplest way is to catch all the errors in the last .catch()
in the promise string. This way, if any promises return reject (possibly due to network error or invalid json or whatever), the runtime will jump to the nearest error handling and .catch
will trigger them.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token function">fetch</span> <span class="token punctuation">(</span> <span class="token string">'/article/promise-chaining/user.json'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token parameter">response</span> <span class="token operator">=></span> response <span class="token punctuation">.</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token parameter">user</span> <span class="token operator">=></span> <span class="token function">fetch</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token string">https://api.github.com/users/</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> user <span class="token punctuation">.</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token template-punctuation string">`</span></span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token parameter">response</span> <span class="token operator">=></span> response <span class="token punctuation">.</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token parameter">githubUser</span> <span class="token operator">=></span> <span class="token keyword">new</span> <span class="token class-name">Promise</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">resolve <span class="token punctuation">,</span> reject</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">let</span> img <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">createElement</span> <span class="token punctuation">(</span> <span class="token string">'img'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> img <span class="token punctuation">.</span> src <span class="token operator">=</span> githubUser <span class="token punctuation">.</span> avatar_url <span class="token punctuation">;</span> img <span class="token punctuation">.</span> className <span class="token operator">=</span> <span class="token string">"promise-avatar-example"</span> <span class="token punctuation">;</span> document <span class="token punctuation">.</span> body <span class="token punctuation">.</span> <span class="token function">append</span> <span class="token punctuation">(</span> img <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token function">setTimeout</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> img <span class="token punctuation">.</span> <span class="token function">remove</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> githubUser <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token number">3000</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">catch</span> <span class="token punctuation">(</span> <span class="token parameter">error</span> <span class="token operator">=></span> <span class="token function">alert</span> <span class="token punctuation">(</span> error <span class="token punctuation">.</span> message <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
2. Throw the bug back
As mentioned .catch
at the end of string is similar to try..catch
. We can have multiple .then
and then use a single .catch
at the end to handle the error in all of them. With try ... catch
, we can parse the error and re-throw them if it hasn’t been handled yet, so is the promise.
If you throw an error in the .catch
, it is routed to the next nearest error handler. And if you handle them and end up normally (with no more errors), it will continue to jump to the next successful handler, here is .then()
1 2 3 4 5 6 7 8 9 10 11 | <span class="token comment">// the execution: catch -> then</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">resolve <span class="token punctuation">,</span> reject</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span> <span class="token punctuation">(</span> <span class="token string">"Whoops!"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">catch</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token parameter">error</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token string">"The error is handled, continue normally"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token string">"Next successful handler runs"</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Here .catch
has been normally ended. So the next .then
will continue to be called.
Another example is with .catch()
. The handler (*) catches the errors but cannot handle them (in this example it only handles the URIError form), so it throws the error again:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <span class="token comment">// the execution: catch -> catch</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">resolve <span class="token punctuation">,</span> reject</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span> <span class="token punctuation">(</span> <span class="token string">"Whoops!"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">catch</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token parameter">error</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// (*)</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> error <span class="token keyword">instanceof</span> <span class="token class-name">URIError</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// handle it</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token string">"Can't handle such error"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">throw</span> error <span class="token punctuation">;</span> <span class="token comment">// throwing this or another error jumps to the next catch</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* doesn't run here */</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">catch</span> <span class="token punctuation">(</span> <span class="token parameter">error</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// (**)</span> <span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token string">The unknown error has occurred: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> error <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token template-punctuation string">`</span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// don't return anything => execution goes the normal way</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
The executable will jump from first .catch (*) to .catch (**) which is next closest handler.
3. Unhandled rejections
What if an error occurs but is not handled. Suppose, you forgot to add .catch
to the end of the string like below:
1 2 3 4 5 6 7 | <span class="token keyword">new</span> <span class="token class-name">Promise</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">noSuchFunction</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Error here (no such function)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// successful promise handlers, one or more</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// without .catch at the end!</span> |
In the event of an error, the promise will be rejected, the execution will go to the closest rejection processing. But it’s not here, so the bug is “stuck”, there’s no code handling it leading to the program crashing and standing there. JavaScript tracks such rejection and generates a global error in that case. You will see a red error message in the console.
To handle them, in the browser, we can catch such errors using unhandledrejection
:
1 2 3 4 5 6 7 8 9 10 | window <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">'unhandledrejection'</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token parameter">event</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// the event object has two special properties:</span> <span class="token function">alert</span> <span class="token punctuation">(</span> event <span class="token punctuation">.</span> promise <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// [object Promise] - the promise that generated the error</span> <span class="token function">alert</span> <span class="token punctuation">(</span> event <span class="token punctuation">.</span> reason <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Error: Whoops! - the unhandled error object</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span> <span class="token punctuation">(</span> <span class="token string">"Whoops!"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// no catch to handle the error</span> |
This way, if the error occurs and the .catch
, you can still notify the user of the error, or you can report the problem to the server.
4. Error in setTimeout
What do you think about this example? .catch
catch this error?
1 2 3 4 5 6 | <span class="token keyword">new</span> <span class="token class-name">Promise</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token parameter">resolve <span class="token punctuation">,</span> reject</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">setTimeout</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span> <span class="token punctuation">(</span> <span class="token string">"Whoops!"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token number">1000</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">catch</span> <span class="token punctuation">(</span> alert <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
And the answer is NO
As mentioned above, an implicit try... catch
will work. That try-catch
is synchronous. (You can read more here ) So with exceptions occurring in “scheduled” code (such as setTimeout
, setInterval
) it will not be possible. To handle this, you can try...catch
inside the setTimeout
callback
1 2 3 4 5 6 7 8 9 10 | new Promise(function(resolve, reject) { setTimeout(() => { try { throw new Error("Whoops!"); } catch(error) { console.log('Error in setTimeout: ', error); }; }, 1000); }).catch(e => console.log('Error: ', e)); |
summary
.catch
handles errors in promises: when calling reject (), or when an error is thrown during processing.- Put the
.catch
in the exact place where you want to handle the error and know how to handle them. When processing we should either parse the error types (using custom error classes) or throw them back. - In any case, we should have
unhandledrejection
(for browsers, and similar environments) to track for unresolved errors and to notify the user (or server) about them, hence, our app. we will avoid crashes.
This article is over, thank you for watching.