How to Handle Errors in JavaScript

Dealing with errors or exceptions is an integral a part of software program software growth. Errors or exceptions could cause this system to work in an surprising method, leading to safety points or inconvenience to the consumer. For that reason, it is extremely essential to handle errors appropriately.  

Let’s think about a easy software program program like calculator performing division of two numbers. The software offers an enter display screen for customers to enter the information on which the operation is required to be carried out. Now, what if the consumer sorts in an invalid enter, like say textual content as a substitute of numbers or tries to carry out division by zero. What occurs if an error happens?  

Any software program is designed to carry out orderly transitions between completely different states. Now due to errors, we’d find yourself being in a state which isn’t thought-about or envisaged throughout software program growth. This case is named unpredictable state of the software program and might result in severe vulnerabilities corresponding to lack of information, buffer overflows and so on.  

Error dealing with, additionally known as as exception dealing with, will assist us stop this unpredictable state by offering express directions on dealing with unpredictable states. For instance, if the consumer enters string information as a substitute of numeric information for performing division operation, we can validate the info by transitioning to validation state for checking situations that may create an error. If there isn’t any error, software program would proceed to execute, in any other case it could enter a state the place it could show the error message. 

Like most programming languages, JavaScript additionally has exception dealing with statements i.e. throw assertion and take a look at…catch assertion. 

A observe on exception Sorts: JavaScript offers predefined exceptions for particular functions and it’s recommended to make use of one in all them for effectiveness. That mentioned, any object may be thrown in JavaScript and the most typical apply is to throw numbers or strings as errors.  

throw assertion is used to throw an exception with a specified worth to be thrown. A few examples are as follows: 

throw 'new error';  // String kind 
throw 54;           // Quantity kind 
throw false;        // Boolean kind 
throw  // Object kind 

attempt…catch assertion consists of a attempt block which incorporates a number of statements and a catch block containing the statements to be executed if an exception occurs in attempt block throughout execution of statements in that block. 

In constructive circulate, all of the statements in attempt block succeed and management will skip the catch block. In any other case, if there may be an exception thrown in the attempt block, the next strains in attempt block are skipped and the management shifts to catch. In both case, lastly block executes after try to catch blocks are executed. 

operate getIPLTeamCaptain(crew) 
  let groups = new Map(); 
  if (groups.has(crew) === true)  
    return groups.get(crew); 
  const captain = getIPLTeamCaptain('Pune'); 
 catch (error)  

In catch block, we’ve an identifier that holds the worth specified by the throw assertion. This can be utilized to get the details about the exception particulars. The scope of this identifier lasts inside catch block and submit ending the execution, the identifier not exists. 

Notice on greatest practices: When logging errors to the console inside a catch block, it’s advisable to use console.error() relatively than console.log() for debugging. It codecs the message as an error, and provides it to the listing of error messages generated by the web page. 

Few pitfalls or greatest practices to be recognized whereas contemplating lastly block 

  • If there may be an I/O operation in attempt block which ends up in an exception, then it’s higher to deal with the clean-up code in lastly block. For instance, a DB connection is made or a file is opened and through processing of the file an exception has occurred. Although the catch will deal with the exception, clear up code has to be dealt with in finally block i.e. closing of file. 
  • The lastly block will execute no matter whether or not an exception has been raised or not.  If a lastly block returns a price, then no matter whether or not an exception is raised or a price is returned in the try to catch block, the finally block return worth will overwrite those values. 
operate raiseException()  
attempt  catch(e)  

Nesting of attempt..catch statements is feasible; but when internal attempt block doesn’t have corresponding catch block then it ought to have lastly block. The enclosing attempt…catch assertion’s catch block is checked for a match. 

Error objects are particular kind of core objects that are thrown throughout runtime. To log extra refined messages about error, we will use ‘identify’ and ‘message’ properties. 

Consult with this hyperlink to know extra about Error object

For instance, throw new Error(‘Error Message’); when caught in catch block, the identifier may have the property identify as ‘Error’ and property message as ‘Error Message’. 

When a runtime error happens, error objects are created and thrown. Any user-defined exceptions may be constructed extending the Error. 

Beneath are among the predefined error constructors prolonged from generic Error constructor.  

  • AggregateError  
  • EvalError  
  • RangeError  
  • ReferenceError  
  • SyntaxError  
  • TypeError  
  • URIError  

Let’s perceive every one with an instance. 

1. AggregateError because the identify suggests is used to wrap a number of errors right into a single error. Think about we’re processing a number of async calls through guarantees and used Promise.any(). This may elevate AggregateError or we will create our personal new AggregateError as proven beneath. 

  Promise.reject(new Error("some error")), 
]).catch(e => ); 


  throw new AggregateError(['Error'500new Error('message')],'AggregateErrorMessage'); 
 catch (e)  

2. EvalError happens when utilizing world eval() operate. This exception is not any extra thrown by JavaScript. 

three. RangeError is to be thrown when a price is just not within the vary of allowed values. Like passing unhealthy values to numeric strategies like toFixedtoPrecision and so on. 

attempt  catch (e)  

four. ReferenceError is raised when a non-existent variable is referenced. 

attempt  catch (e)  
  console.log(e instanceof ReferenceError)  // true 
  console.log(e.message)                    // "undefinedVar is just not outlined" 
  console.log(e.identify)                       // "ReferenceError" 

5. SyntaxError is thrown by the JavaScript engine if it encounters tokens which don’t conform to the syntax of the language whereas parsing the code. 

  eval('hoo bar'); 
 catch (e)  

6. TypeError is raised if an operation is carried out on a price which isn’t anticipated on its kind. Say if we are trying to modifa price that can’t be modified. 

  const a = "fixed"; 
  a = 'change'; 
 catch (e)  
  console.log(e instanceof TypeError)  // true 
  console.log(e.message)               // "Project to fixed variable." 
  console.log(e.identify)                  // "TypeError" 

7. URIError is raised when world URL dealing with operate is utilized in an inappropriate method. 

attempt  catch (e)  
  console.log(e instanceof URIError)  // true 
  console.log(e.message)              // URI malformed 
  console.log(e.identify)                 // "URIError 

Dealing with Particular error

If we need to deal with completely different error sorts otherwise then we will test for error instanceof and deal with them accordingly. 

attempt  catch (e)  

Notice: In actual time softwares, we’d deal with particular error kinds based mostly on the performance in the attempt block and wouldn’t have so many various error sorts for a single attempt…catch block. Additionally having a number of errors and having a number of if … else statements is just not really helpful as per the single accountability precept. 

Please check with the above code just for reference to establish the particular error kind. 

Customized Error Kind

Typically we wish customise the error or need to have our personal error sorts. To create customized Error sorts, we’ve to increase the prevailing Error object and throw the customized error accordingly. We will seize our customized error kind utilizing instanceof. That is cleaner and extra constant method of error dealing with. 

class MyError extends Error  
  throw new MyError('customized''message') 
  console.error(e.identify)           // MyError 
  console.error(e.customProperty// customized 
  console.error(e.message)        // message 
  console.error(e.stack)          // MyError: message with stacktrace 

DOMException Kind

The DOMException happens because of calling a way or accessing a property of an internet API which represents an irregular occasion that occurred. 

Consult with this hyperlink to know extra about DOMException 

Promise Error Propagation

A Promise is an object representing the eventual completion or failure of an asynchronous operation. Guarantees enable to chain a number of asynchronous operations back-to-back in a sequence order. 

After we chain a number of asynchronous operations, then we will have catch on the finish of the chain to seize any exception or rejection that occurred at any promise. Catch takes a callback operate and the callback is set to execute when the Promise is rejected. 

For instance: 

.then(action1 => Action1(action1)) 
.then(action2 => Action2(action2)) 
// Attaches a callback for under the rejection of the Promise. 
// @returns — A Promise for the completion of the callback. 

As per the above instance, we’re performing a number of async actions however we’ve a single catch block to seize any rejection. Let’s perceive this with an assumption that the calls are synchronous in nature. 

  const action1 = doSomething(); 
  const action2 = Action1(action1); 
  const finalResult = Action2(action2); 
  console.log(`Obtained the ultimate end result: $finalResult`); 

If there’s an exception, then the browser will bounce over to catch block and execute the failureCallback. 

Based mostly on ECMAScript 2017 async/await syntactic sugar-coated method, we will change the synchronous code to asynchronous. 

async operate SampleAsync()  
    const action1 = await doSomething(); 
    const action2 = await Action1(action1); 
    const finalResult = await Action2(action2); 
    console.log(`Obtained the ultimate end result: $finalResult`); 

Guarantees assist to resolve the callback hell by catching all errors i.e. thrown exceptions or programming errors. That is vital for purposeful composition of async operations. 

What would occur if there isn’t a catch for a promise?

 Guarantees are related to two occasions i.e. rejectionhandled and unhandledrejection. Every time a promise is rejected, one in all these two occasions is shipped to the worldwide scope which is perhaps a window or a employee. 

  • rejectionhandled – despatched when a promise is rejected, and submit rejection the executor’s reject is dealt with. 
  • unhandledrejection – promise is rejected however there isn’t any rejection handler out there. 

Notice: Each occasions are of kind PromiseRejectionEvent which has particulars of the particular promise which was rejected and a motive property depicting the rationale for rejection. 

Since each the occasions are in world scope, all errors will go to the identical occasion handlers whatever the supply. This makes it straightforward to supply a fallback error dealing with mechanism for guarantees. 

Whereas working with Node.js on the server facet, we may embody some frequent modules and there may be a excessive risk that we might have some unhandled rejected guarantees which get logged to the console by the Node.js runtime. If we need to seize these and course of or log them exterior the console, then we will add these handlers on the method as proven beneath. 

course of.on("unhandledRejection", (motivepromise=>  
  // You may begin right here by including code to look at the "promise" and "motive" values. 

 The impact of including this handler on the method is that it will stop the errors from being logged to the console by the node.js runtime. There is no such thing as a want for calling preventDefault() technique out there on browser runtimes. 

 Notice: Including the listener on the course of.on and never coding to seize the promise and causes would end in lack of the error. So it’s recommended so as to add code to look at the rejected promise to establish the reason for rejection. 

Window UnhandledRejection Occasion

The world scope being window (may additionally be employee), it’s required to name the occasion.preventDefault() within the unhandledrejection to cancel the occasion. This stops it from effervescent as much as be dealt with by the runtime’s logging code. It works as a result of unhandledrejection is cancellable. 

window.addEventListener('unhandledrejection'operate (occasion)  
  // ...your code right here to deal with the unhandled rejection... 
  // Stop the default dealing with (corresponding to outputting the 
  // error to the console) 

To summarise a couple of factors associated to error dealing with: 

  • Attempt to deal with errors particular to the kind of error. 
  • Use Error object as a substitute of numeric, string or Boolean whereas throwing an error. As Error object will seize the stack hint and error kind, particular dealing with is feasible. 
  • Launch sources if any in lastly block. 
  • Being extra particular with throw error helps in dealing with it cleanly as a substitute of generic error. 
  • Keep away from undesirable catch block if they’re meant just for logging, and re-throw the error once more. In any other case, it will end in clogging of logs. 
  • Final however not least, suppression/swallow/shadowing of exception as proven beneath ought to be averted. This may make the applying proceed to work however the underlining subject is not going to be fastened. 
catch(e)  // nobody is aware of about this 
  console.log(err); // error is logged however software continues 


Error dealing with is likely one of the most vital sides in software program programming that has to be acknowledged and skilled by the developer. Software program ought to be as predictable as potential when it comes to state transitions. 

Leave a Reply

Your email address will not be published.