UI Development

Best Practices in Error Handling

Always write a code assuming that “yes your code may fail”. Error handling depends on the company’s architecture.

Different most common types of errors are as under-

a) Syntax Errors – These errors comes due to the wrong syntax of the code. if suppose in a file this error has happened whole file code will not run.

In order to avoid them we should always use a proper syntax according to the specs.

b) Type Errors – These type errors generally happens when the value is not of the type which is declared.

In order to avoid them we should always the type should be in accordance with what is expected to be.

c) Reference Errors- These happens when we generally refer a value but it doesn’t exist.

In order to avoid them we should always we should declare and assign the values first before we referencing it.

d) URI Errors – These errors come when the URI is malformed.

In order to avoid them we should always look in for the proper URI methods.

e) Range Errors – These error comes when we have added the range that is not valid.

In order to avoid them we should always provide a valid range value.

In order to handle these errors we can follow following practices as under-

1)  We can always surround our code with the try and catch block and try to log the proper message

try {
} catch(exception) {
  console. log(exception.message);
} finally() {
 // here we can run our code always weather it  has 
 // some error or not

2) We can log JS error to our server. This actually depends on the architecture of the site and the user base.  Suppose we are logging every window.onerror() call to our servers.

     For a small user base site we can manage it but suppose the site with the heavy traffic with some millions of users.

     This will again ensures that we are not flooding our server with millions of useless errors.  So, reducing the logging size

     and randomising it is a good technique to see the significant errors only we can do something like this-

Window.onerror = (errorMessage, pageURL, lineNumber) => {
  if (math.random < 0.1) {
     logError(errorMessage, pageURL, lineNumber) 

3) We can also throw our own error like

function() {
 if (true) {
    // operation
  } else {
    throw new Error(“your custom error”);

Note: Error should be thrown in lower level implementation of the code like utilities, libraries but we should try and catch in higher level implementation like client side business logic, specific operation.

4) we can stack trace the javascript errors. We can find the functions order, from the most  latest ones to the global scope

function stackTrace() {
   try {
   } catch(exception) {

5)  Async operations where we use now async await where error can be catch by making a global error handler factory.

const myPromise = new Promise((resolve, reject) => { 
    setTimeout(()=> reject(“its is an error”), 1000);

const testPromise = async () => {
  const payload = await myPromise;

const errorHandler = (fn) => (...params)=> fn(...params).catch((error)=> console.error(error));


we can use Error class provided by the ES6, We can create some most common error types and then export it like below

class ValidationError extends Error {
  constructor(message) {
	Error.captureStackTrace(this, this.constructor);
    this.name = 'ValidationError';
    this.message = message;

// make different custom classes to handle errors and export them as below

module.exports = {

and then we can made use of these error in our code like

import { ValidationError } from  './custom-error';

function customFunction(input) {
   if (!input)
     throw new ValidationError('Their is a validation error!');
   return input;

when we throw a custom error like above then we can also check the name of the error like-

try {
} catch (e) {
  if (e.name === 'ValidationError') {
    console.log("handle validation error");
  } else {
    console.log("handle other errors");

Catching error when a promise is returned. Before rejecting a promise we can also update user with more useful message and  what went wrong and  they can to do next.

import { ValidationError } from './custom-error';
function customFunction(input) {
  return new Promise((resolve, reject) => {
    if (!input)
      // Here you can show the user a useful detail, telling the problems and what to do next
      updateUserMessage("More Useful Message for user to know what went wrong and what to do next");
      return reject(new ValidationError('Their is a validation error'));



About The Author