In this article, we will discuss the uncaught exceptions in javascript, and how to handle these exceptions in order to show the error message as and when they appear.
Understanding “uncaught exceptions” in javascript: An exception is an abnormal condition that happens due to various reasons, for example, an API call fails, or you are not able to parse a string into a JSON object using JSON.parse() method, etc. To handle these exceptions, we often write the code (which we believe will most likely throw an exception if the code did not run as expected) inside a try/catch block. The code is run in the try block, and once an exception occurs, it is handled in the catch block.
Now, uncaught exceptions are a special case in the family of exceptions, in that they are not caught in the catch block, and the browser intercepts these exceptions and handles them.
Let’s see how to handle these uncaught exceptions and show the appropriate error message on the user interface.
Handling uncaught exceptions:
- Approach 1: Using unhandledrejection event listener. unhandledrejection fires off when there is an unhandled rejection inside the element on which the event listener is added.
Example 1:
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h2>Handling unhandler rejections in javascript</h2> </body> <script> window.onunhandledrejection = event => { // Logs the error in the console console.log(`UNHANDLED PROMISE REJECTION: ${event.reason}`); }; new Promise((resolve, reject) => { reject('Rejected!') }) </script> </html> |
Output:
UNHANDLED PROMISE REJECTION: Rejected!
Example 2:
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h2>Handling unhandler rejections in javascript</h2> </body> <script> window.addEventListener('unhandledrejection', event => { // Logs the error in the console console.log(`UNHANDLED PROMISE REJECTION: ${event.reason}`); }); // Code to generate an uncaught exception error new Promise((resolve, reject) => { reject('Rejected!') }) </script> </html> |
Output:
UNHANDLED PROMISE REJECTION: Rejected!
- Approach 2: Using error event listener. error event fires off when there is an error inside the element on which the event listener is added.
Example 1:
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h2>Handling unhandler rejections in javascript</h2> </body> <script> window.onerror = (error) => { // Logs error on the console console.log(`UNHANDLED ERROR: ${error}`); }; // Throws the uncaught exception error throw "Deliberate Error!"; </script> </html> |
Output:
UNHANDLED PROMISE REJECTION: Uncaught Deliberate Error!
Example 2:
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h2>Handling unhandler rejections in javascript</h2> </body> <script> window.addEventListener('error', error => ({ // Logs error on the console console.log(`UNHANDLED ERROR:`, error); }); // Throws the uncaught exception error throw "Deliberate Error!"; </script> </html> |
Output:
Code output
