Skip to content
Related Articles
Open in App
Not now

Related Articles

How to manage “uncaught exceptions” in JavaScript in order to show the error message in user interface ?

Improve Article
Save Article
  • Last Updated : 04 Aug, 2022
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!