How To Manage "uncaught Exceptions" In Javascript In Order To Show The Error Message In The User Interface?

When a Uncaught Exception is thrown in some website or web application, an error appears in the Develper tools in each browser In Electron for instance, if an uncaught exception,

Solution 1:

You can handle it as an event listener on window object.

window.onunhandledrejection = event => {
  console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
};

window.onerror = function(message, source, lineNumber, colno, error) {
  console.warn(`UNHANDLED ERROR: ${error.stack}`);
};

Or also like this:

window.addEventListener('error', function(event) { ... })

You can read more about the unhandledrejection event on the MDN web docs here and the onerror event on the docs here

Solution 2:

try {
  // YOUR CODE GOES HERE
} catch (e) {
 if ( e instanceof CustomExceptionError ) {
    // ...
  } elseif ( e instanceof OtherExceptionError ) {
    // ...
  } else {
    // ...
  }
 //OR CALL THE ALERT BOX OR ANY OTHER UI CHANGE
}