• Login
Tuesday, July 8, 2025
Blogue
  • Homepage
  • Affiliates
    Best Sellers in Home at Amazon

    Best Sellers in Home at Amazon

  • Web
    The WordPress Drama- Open Source at War

    The WordPress Drama: Open Source at War

    The Plan to Break Apart Google- RIP Chrome_

    The Plan to Break Apart Google: RIP Chrome?

    Andrew Tate’s Hustler’s University Hacked- What We Know

    Andrew Tate’s Hustler’s University Hacked: What We Know

    Scraping Websites with Various Scraper Frameworks (With Examples)

    Scraping Websites with Various Scraper Frameworks (With Examples)

    Git : Developer’s Favourite

    Git : Developer’s Favourite

    HTTP Status/Error Codes and How to Fix them

    HTTP Status/Error Codes and How to Fix them

    A Walkthrough to Hashing, Salting , and Verifying Passwords in NodeJS, Python, Golang, and Java

    A Walkthrough to Hashing, Salting , and Verifying Passwords in NodeJS, Python, Golang, and Java

    Guide to Googling

    Guide to Googling

    How To Submit a Form With Puppeteer and JavaScript

    How To Submit a Form With Puppeteer and JavaScript

  • Web Developer
    How to Detect Ad Blockers in a React.js Application

    How to Detect Ad Blockers in a React.js Application

    How to Create Responsive Image in CSS

    How to Create Responsive Image in CSS

    A Walkthrough to Hashing, Salting , and Verifying Passwords in NodeJS, Python, Golang, and Java

    A Walkthrough to Hashing, Salting , and Verifying Passwords in NodeJS, Python, Golang, and Java

    How To Take Screenshot With Puppeteer

    How To Take Screenshot With Puppeteer

    Web Scraping With JavaScript and Puppeteer

    Web Scraping With JavaScript and Puppeteer

    How to create a Responsive Website

    How to create a Responsive Website

    Top Frontend Frameworks To Learn

    Top Frontend Frameworks To Learn

    Full Stack Web Developer: A Guide to Learn

    Full Stack Web Developer: A Guide to Learn

  • Web Scraping
    Scraping Websites with Various Scraper Frameworks (With Examples)

    Scraping Websites with Various Scraper Frameworks (With Examples)

    Scraping Table Data into JSON File with Puppeteer

    Scraping Table Data into JSON File with Puppeteer

    How To Scrape Multiple Pages With Puppeteer and JavaScript

    How To Scrape Multiple Pages With Puppeteer and JavaScript

    How To Submit a Form With Puppeteer and JavaScript

    How To Submit a Form With Puppeteer and JavaScript

    How to Automate Form Submission with Puppeteer and Javascript

    How to Automate Form Submission with Puppeteer and Javascript

    How To Take Screenshot With Puppeteer

    How To Take Screenshot With Puppeteer

    Web Scraping With JavaScript and Puppeteer

    Web Scraping With JavaScript and Puppeteer

  • How To?
    How LinkedIn Powers Professional Networking: A Look Inside Its System Design

    How LinkedIn Powers Professional Networking: A Look Inside Its System Design

    Facebook: The Engine Behind the World’s Largest Social Network

    Facebook: The Engine Behind the World’s Largest Social Network

    Snapchat: The System Powering Snaps, Stories, and Lenses

    Snapchat: The System Powering Snaps, Stories, and Lenses

    How WhatsApp Powers Instant Communication for Billions

    How WhatsApp Powers Instant Communication for Billions?

    How Instagram Scales to Billions of Photos and Videos Daily

    How Instagram Scales to Billions of Photos and Videos Daily?

    How Netflix Delivers High-Quality Streaming to Millions Worldwide

    How Netflix Delivers High-Quality Streaming to Millions Worldwide

    Effective Structure for Describe Image, Retell Lecture, and Summarize Spoken Text in PTE Academic

    Effective Structure for Describe Image, Retell Lecture, and Summarize Spoken Text in PTE Academic

    Understanding Marks Allocation in PTE Academic Tasks

    Understanding Marks Allocation in PTE Academic Tasks

    From Power-On to Productivity: How Your Operating System Comes to Life

    From Power-On to Productivity: How Your Operating System Comes to Life

  • Technology
    A Deep Dive into Physical Storage Devices: From Floppy Disks to Modern SSDs

    A Deep Dive into Physical Storage Devices: From Floppy Disks to Modern SSDs

    How Netflix Delivers High-Quality Streaming to Millions Worldwide

    How Netflix Delivers High-Quality Streaming to Millions Worldwide

    The WordPress Drama- Open Source at War

    The WordPress Drama: Open Source at War

    25 Software Bugs That Changed the World

    25 Software Bugs That Changed the World

    The Plan to Break Apart Google- RIP Chrome_

    The Plan to Break Apart Google: RIP Chrome?

    Guide to Googling

    Guide to Googling

    How Video Streaming on the Internet Works

    How Video Streaming on the Internet Works

    Git : A short history

    Git : A short history

    A Walkthrough to Blockchain

    A Walkthrough to Blockchain

  • System Design
    How LinkedIn Powers Professional Networking: A Look Inside Its System Design

    How LinkedIn Powers Professional Networking: A Look Inside Its System Design

    Facebook: The Engine Behind the World’s Largest Social Network

    Facebook: The Engine Behind the World’s Largest Social Network

    Snapchat: The System Powering Snaps, Stories, and Lenses

    Snapchat: The System Powering Snaps, Stories, and Lenses

    How WhatsApp Powers Instant Communication for Billions

    How WhatsApp Powers Instant Communication for Billions?

    How Instagram Scales to Billions of Photos and Videos Daily

    How Instagram Scales to Billions of Photos and Videos Daily?

    How Netflix Delivers High-Quality Streaming to Millions Worldwide

    How Netflix Delivers High-Quality Streaming to Millions Worldwide

    How YouTube Handles Billions of Videos Daily

    How YouTube Handles Billions of Videos Daily?

    How Spotify Streams Personalized Music to Millions in Real-Time?

    How Spotify Streams Personalized Music to Millions in Real-Time?

Submit Post
No Result
View All Result
  • Homepage
  • Affiliates
    Best Sellers in Home at Amazon

    Best Sellers in Home at Amazon

  • Web
    The WordPress Drama- Open Source at War

    The WordPress Drama: Open Source at War

    The Plan to Break Apart Google- RIP Chrome_

    The Plan to Break Apart Google: RIP Chrome?

    Andrew Tate’s Hustler’s University Hacked- What We Know

    Andrew Tate’s Hustler’s University Hacked: What We Know

    Scraping Websites with Various Scraper Frameworks (With Examples)

    Scraping Websites with Various Scraper Frameworks (With Examples)

    Git : Developer’s Favourite

    Git : Developer’s Favourite

    HTTP Status/Error Codes and How to Fix them

    HTTP Status/Error Codes and How to Fix them

    A Walkthrough to Hashing, Salting , and Verifying Passwords in NodeJS, Python, Golang, and Java

    A Walkthrough to Hashing, Salting , and Verifying Passwords in NodeJS, Python, Golang, and Java

    Guide to Googling

    Guide to Googling

    How To Submit a Form With Puppeteer and JavaScript

    How To Submit a Form With Puppeteer and JavaScript

  • Web Developer
    How to Detect Ad Blockers in a React.js Application

    How to Detect Ad Blockers in a React.js Application

    How to Create Responsive Image in CSS

    How to Create Responsive Image in CSS

    A Walkthrough to Hashing, Salting , and Verifying Passwords in NodeJS, Python, Golang, and Java

    A Walkthrough to Hashing, Salting , and Verifying Passwords in NodeJS, Python, Golang, and Java

    How To Take Screenshot With Puppeteer

    How To Take Screenshot With Puppeteer

    Web Scraping With JavaScript and Puppeteer

    Web Scraping With JavaScript and Puppeteer

    How to create a Responsive Website

    How to create a Responsive Website

    Top Frontend Frameworks To Learn

    Top Frontend Frameworks To Learn

    Full Stack Web Developer: A Guide to Learn

    Full Stack Web Developer: A Guide to Learn

  • Web Scraping
    Scraping Websites with Various Scraper Frameworks (With Examples)

    Scraping Websites with Various Scraper Frameworks (With Examples)

    Scraping Table Data into JSON File with Puppeteer

    Scraping Table Data into JSON File with Puppeteer

    How To Scrape Multiple Pages With Puppeteer and JavaScript

    How To Scrape Multiple Pages With Puppeteer and JavaScript

    How To Submit a Form With Puppeteer and JavaScript

    How To Submit a Form With Puppeteer and JavaScript

    How to Automate Form Submission with Puppeteer and Javascript

    How to Automate Form Submission with Puppeteer and Javascript

    How To Take Screenshot With Puppeteer

    How To Take Screenshot With Puppeteer

    Web Scraping With JavaScript and Puppeteer

    Web Scraping With JavaScript and Puppeteer

  • How To?
    How LinkedIn Powers Professional Networking: A Look Inside Its System Design

    How LinkedIn Powers Professional Networking: A Look Inside Its System Design

    Facebook: The Engine Behind the World’s Largest Social Network

    Facebook: The Engine Behind the World’s Largest Social Network

    Snapchat: The System Powering Snaps, Stories, and Lenses

    Snapchat: The System Powering Snaps, Stories, and Lenses

    How WhatsApp Powers Instant Communication for Billions

    How WhatsApp Powers Instant Communication for Billions?

    How Instagram Scales to Billions of Photos and Videos Daily

    How Instagram Scales to Billions of Photos and Videos Daily?

    How Netflix Delivers High-Quality Streaming to Millions Worldwide

    How Netflix Delivers High-Quality Streaming to Millions Worldwide

    Effective Structure for Describe Image, Retell Lecture, and Summarize Spoken Text in PTE Academic

    Effective Structure for Describe Image, Retell Lecture, and Summarize Spoken Text in PTE Academic

    Understanding Marks Allocation in PTE Academic Tasks

    Understanding Marks Allocation in PTE Academic Tasks

    From Power-On to Productivity: How Your Operating System Comes to Life

    From Power-On to Productivity: How Your Operating System Comes to Life

  • Technology
    A Deep Dive into Physical Storage Devices: From Floppy Disks to Modern SSDs

    A Deep Dive into Physical Storage Devices: From Floppy Disks to Modern SSDs

    How Netflix Delivers High-Quality Streaming to Millions Worldwide

    How Netflix Delivers High-Quality Streaming to Millions Worldwide

    The WordPress Drama- Open Source at War

    The WordPress Drama: Open Source at War

    25 Software Bugs That Changed the World

    25 Software Bugs That Changed the World

    The Plan to Break Apart Google- RIP Chrome_

    The Plan to Break Apart Google: RIP Chrome?

    Guide to Googling

    Guide to Googling

    How Video Streaming on the Internet Works

    How Video Streaming on the Internet Works

    Git : A short history

    Git : A short history

    A Walkthrough to Blockchain

    A Walkthrough to Blockchain

  • System Design
    How LinkedIn Powers Professional Networking: A Look Inside Its System Design

    How LinkedIn Powers Professional Networking: A Look Inside Its System Design

    Facebook: The Engine Behind the World’s Largest Social Network

    Facebook: The Engine Behind the World’s Largest Social Network

    Snapchat: The System Powering Snaps, Stories, and Lenses

    Snapchat: The System Powering Snaps, Stories, and Lenses

    How WhatsApp Powers Instant Communication for Billions

    How WhatsApp Powers Instant Communication for Billions?

    How Instagram Scales to Billions of Photos and Videos Daily

    How Instagram Scales to Billions of Photos and Videos Daily?

    How Netflix Delivers High-Quality Streaming to Millions Worldwide

    How Netflix Delivers High-Quality Streaming to Millions Worldwide

    How YouTube Handles Billions of Videos Daily

    How YouTube Handles Billions of Videos Daily?

    How Spotify Streams Personalized Music to Millions in Real-Time?

    How Spotify Streams Personalized Music to Millions in Real-Time?

Submit Post
No Result
View All Result
Blogue
  • Homepage
  • Affiliates
  • Web
  • Web Developer
  • Web Scraping
  • How To?
  • Technology
  • System Design

Error Handling in Javascript

The Blogue Team by The Blogue Team
May 19, 2024
in Error, ES6, How To?, JavaScript, Programming, Tutorial
Reading Time: 9 mins read
306
A A
0
318
SHARES
1.1k
VIEWS
Share on FacebookShare on XShare on RedditShare on Whatsapp

JavaScript is a lightweight, interpreted, object-oriented language with first-class functions, and is best known as the scripting language for Web pages, but it’s used in many non-browser environments as well. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.JavaScript runs on the client side of the web, which can be used to design / program how the web pages behave on the occurrence of an event. JavaScript is an easy to learn and also powerful scripting language, widely used for controlling web page behavior.Contrary to popular misconception, JavaScript is not “Interpreted Java”. In a nutshell, JavaScript is a dynamic scripting language supporting prototype based object construction. The basic syntax is intentionally similar to both Java and C++ to reduce the number of new concepts required to learn the language. Language constructs, such as if statements, for and while loops, and switch and try … catch blocks function the same as in these languages .

JavaScript can function as both a procedural and an object oriented language. Objects are created programmatically in JavaScript, by attaching methods and properties to otherwise empty objects at run time, as opposed to the syntactic class definitions common in compiled languages like C++ and Java. Once an object has been constructed it can be used as a prototype for creating similar objects.JavaScript’s dynamic capabilities include runtime object construction, variable parameter lists, function variables, dynamic script creation , object introspection , and source code recovery.

It is very hard to write a clean & error free code. One small mistake can lead to a bigger issue. Error handling plays a vital role to reduce the number of bugs. If you handle error elegant way, it will save a lot of time in the future. So the bigger question is how you should handle the error.

Let’s take this sample code as an example:

const express = require("express");
const app = express();
app.get("/", (_, res) => res.end("Cool"));
app.listen(8000);

The above code is a sample code written in nodejs on an express framework. This code trying to run a server at port 80. What if we know that port 8000 is already taken by some other app and we try to run the above code. How do we know what will happen? Will it run or break with some error? This is very unclear while seeing this code. Even you want to handle an error, you may have to read the documentation. But don’t worry, just like any natural language. The programming language has some grammar. Even there is no standard specification in ECMA standard for Error handling. But the Javascript community follows certain coding guidelines.

Types of Errors

Since JavaScript has a different flavor of the compiler and most of the have written and maintained by a different organization. Except for SyntaxError, There is no very definite or consistent distribution among the type of error. Even the message varies compiler to compiler. However, You can find a list fo the errors. Since Javascript is a dynamic language, most of the errors are runtime errors.

console.log(Number(10).toPrecision(200));

If we run the above code, It will throw RangeError. RangeError: toPrecision() argument must be between 1 and 100.

How to handle Error

Base on the nature of the API(method) call sync/async, Error can be handle differently.

Synchronous

try-catch: You can use try-catch block to handle Synchronous error.

try {
  console.log(Number(10).toPrecision(200));
} catch (error) {
  // RangeError: toPrecision() argument must be between 1 and 100console.log(error instanceof RangeError); // true
}

If you don’t want to catch the error and perform any operation. In the newer version of JavaScript compiler you can do so.

try {
  console.log(Number(10).toPrecision(200));
} catch {}

If you want to perform some default operation on error, You can use finally block after the catch block.

let average;
try {
  average = getAverage(); 
// Sum function does not exits
} catch {
} finally {
  average = 0;
}
console.log(`Average is ${average}`);
// Average is 0

Finally block is mainly used to clean the resources like some open file, open connection.

Asynchronous:

An API is called asynchronous in nature when the outcome will come on some next event cycle of the EventLoop. Normally, All network call and IO operation are an async in nature. To get data from async call we either use callback or promise object.

Error handle in async-callback API(callback-error-data): Core Browser base javascript has very limited async APIs. You can create an async function either using timer APIs like setTimeout and setInterval Or you can create an AJAX call using fetch. setTimeout and setInterval do not throw any such error that can be handle. And fetch is a promised based async call(We will learn later to handle promise-based error). However, nodejs has a lot of standards and third-party APIs which throws an error. Just like our first express.js example.

const express = require("express");
const app = express();
app.get("/", (_, res) => res.end("OK"));

const server = app.listen(80);
server.on("error", function handleListen(error) {
  console.log(error);
});

Here in the above example, Express does not try to handle error for you. Instead, it returns the core server instance of nodejs. You can catch error on the error handler callback function.

Nodejs follows certain rules. As a coding standards, all the async APIs accept a callback. In the callback, the first argument will be an error generated by API and the second argument will be data on success. This standard has been followed by the overall community too.

fs.readFile("a file that does not exist", (err, data) => {
  if (err) {
    console.error("There was an error reading the file!", err);
    return;
  }
  // Otherwise handle the data
});

Note: You can not handle async callback error in try-catch block. However, there is an exception. A recent version of ECMA Script, using async-await now we can handle error in try-catch. We will learn that later.

// This will not work

try {
  app.listen(80);
} catch (error) {
  // never calledconsole.error(error);
}

Error handle in promise-based API(try-catch-await): After ES5, Javascript introduce a new design pattern to handle callback for async API. That is a promise design pattern. This solves the previous issue of callback hell.

const promise = new Promise((response, reject) => {
  // some async code here
});

promise
  .then(function onSuccess(data) {
    console.log("SUCCESS");
  })
  .catch(function onError(err) {
    console.error(err);
  });

To get error form a promise object, you have to use the catch method and pass a callback function.

The promise is much cleaner than that callback. However, It is very hard to understand the flow in a big codebase. The recent version of ECMA Script has introduced async-await. Using async-await we can write asynchronous code in a synchronous way.

async function main() {
  try {
    await promise1;
    const data = await promise2;
  } catch (error) {
    console.log(error); // SOME ERROR
  }
}
main();

Using try-catch-await, you can handle multiple errors in one block which was not possible/complicated in the promise-then-catch pattern.

Now we know how to handle the error. However, while writing code we don’t have to handle error only. We may want to create a custom error. This will help to write clean and maintainable code. It is good practice, you should create custom errors for business logics

Custom Error

Creating a custom error is very simple. You can use any custom class and throw it as an error.

class SomeNetworkError {
  constructor(status) {
    this.status = status;
  }
}
try {
  throw new SomeNetworkError(4000);
} catch (error) {
  console.log(error instanceof SomeNetworkError); // trueconsole.log(`SomeNetworkError Status: ${error.status}`); 
// SomeNetworkError Status: 4000
}


Above we have SomeNetworkError class and we use an instance of this class to throw an error. This is a valid code. However, as a coding practice, we should extend default(standard) error-classes. The base of all error-class is Error and call with a super method with the message.

class SomeNetworkError extends Error {
  constructor(message, status) {
    super(message);
    this.status = status;
  }
}
try {
  throw new SomeNetworkError("Network Error", 4000);
} catch (error) {
  console.error(error instanceof Error); // trueconsole.log(`> ${error}`); // > Error: Network Errorconsole.error(error); // SomeNetworkError: Network Errorconsole.error(error.stack); // stacktrace here
}

If you notice, extending the Error class and calling super automatically get .toString method of the SomeNetworkError class and print a nice message. Similarly, you can extend other standard Error class too.

class ArithmeticRangeError extends RangeError {
  constructor(message) {
    super(message);
  }
}
try {
  const zero = 0;
  if (zero === 0) {
    throw new ArithmeticRangeError("zero cant be 0");
  }
} catch (error) {
  console.log(error instanceof RangeError); // trueconsole.error(error.toString()); // RangeError: zero cant be 0
}

Advanced Error Handling

Error handle with Loop: Keep try-catch out of the loop, if you want to break loop on error. Else put try-catch inside a loop to continue

Break on error:

try {
  const numbers = [10, 2, 0, 5];
  numbers.forEach((num) => {
    if (num === 0) {
      throw new ArithmeticRangeError("zero cant be 0");
    }
    console.log(num);
  });
} catch (error) {}

Continue on error or skip:

const numbers = [10, 2, 0, 5];
numbers.forEach((num) => {
  try {
    if (num === 0) {
      throw new ArithmeticRangeError("zero cant be 0");
    }
  } catch (error) {}
  console.log(num);
});

Without try-catch, Logical handle:

// filter zero, no need handle zero

const numbers = [10, 2, 0, 5].filter((num) => num !== 0);
numbers.forEach((num) => {
  console.log(num);
});

// Use some to break loop

const numbers = [10, 2, 0, 5];

numbers.some((num) => {
  const isZero = num === 0;
  if (isZero) return true;
  // logic here
  console.log(num);
});

As you can see, based on your need you may not need to throw error always. You can handle it logically.

Multiple errors in try-catch:

try {
  let name;
  /// some operationif (name === "") throw new RangeError("Cant be blank");
  if (name.match(/\W/)) throw new TypeError("name cant be non alph-numric");
  throw new Error("Some other error");
} catch (error) {
  if (error instanceof RangeError) console.log("RangeError");
  else if (error instanceof TypeError) console.log("TypeError");
  else console.log("Other Error");
}

Multiple errors in promise-then-catch:

new Promise((resolve) => {
  let name;
  // some logic
  resolve(name);
})
  .then((name) => {
    if (name === "") throw new RangeError("Cant be blank");
    else return name;
  })
  .then((name) => {
    if (name.match(/\W/)) throw new TypeError("name cant be non alph-numric");
    else return name;
  })
  .catch((error) => {
    if (error instanceof RangeError) console.log("RangeError");
    else if (error instanceof TypeError) console.log("TypeError");
    else console.log("Other Error");
  });

Error Handling Coding Practices

Above all code are very standard and simple use cases to handle the error. However, when you work on the project. The code maybe not this simple as it is given here. So we need to write some boilerplate codes. Below, I have listed some of the patterns that I follow in my projects.

  1. Create Enum Class or Error Constants
  2. Use localization from beginning
  3. Common util module or file to handle logic and generate an error
  4. Try to minimize try-catch uses, Instead write more unit test cases
  5. Catch and Throw a custom error on API calls
  6. Use typescript as much as possible
  7. Minimize the use of magic number/string
  8. Avoid higher level of nested object
  9. Avoid global object pollution
  10. Use Error-Boundaries as much as possible(React)
  11. Proper logging, use console.error for error logging.
  12. Log level to minimize log messages
  13. Don’t print credential in logs
  14. Use more visuals than console in the case of WebApps.

Happy Coding …

Tags: CallbacksPromise
Share127Tweet80ShareSend
Previous Post

Git : Developer’s Favourite

Next Post

How to code?

The Blogue Team

The Blogue Team

We are a team of passionate bloggers

Related Posts

How LinkedIn Powers Professional Networking: A Look Inside Its System Design
How To?

How LinkedIn Powers Professional Networking: A Look Inside Its System Design

by The Blogue Team
December 18, 2024
1.2k
A Deep Dive into Physical Storage Devices: From Floppy Disks to Modern SSDs
Storage

A Deep Dive into Physical Storage Devices: From Floppy Disks to Modern SSDs

by The Blogue Team
December 17, 2024
1.1k
Facebook: The Engine Behind the World’s Largest Social Network
Facebook

Facebook: The Engine Behind the World’s Largest Social Network

by The Blogue Team
December 17, 2024
1.1k
Load More
Next Post
How to code?

How to code?

Where Writing Happens

  • Homepage
  • About Us
  • Contact Us
  • Privacy Policy
  • Terms & Conditions
  • Sitemap

© 2025 Blogue - Designed By Najus Digital.

Welcome Back!

Sign In with Google
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Refresh
No Result
View All Result
  • Login

© 2025 Blogue - Designed By Najus Digital.

*By registering into our website, you agree to the Terms & Conditions. and Privacy Policy.
Enable Notifications OK No thanks