Can I extend a JavaScript error? What is the best way to do so?

JavascriptWeb DevelopmentObject Oriented Programming

JavaScript error can be extended by extending the error class. The best way to do this is to create a new custom error class that extends the built in JavaScript error class.

Following is the code for extending errors in JavaScript −

Example

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 18px;
      font-weight: 500;
      color: rebeccapurple;
   }
</style>
</head>
<body>
<h1>Extend JavaScript Error</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to create a new error by extending the error class
</h3>
<script>
   let resEle = document.querySelector(".result");
   let sampleEle = document.querySelector(".sample");
   let BtnEle = document.querySelector(".Btn");
   class CustomError extends Error {
      constructor(message) {
         super(message);
         this.name = "Custom Error";
      }
   }
   function test() {
      throw new CustomError("New Error thrown");
   }
   BtnEle.addEventListener("click", () => {
      try {
         test();
      }
      catch (err) {
         resEle.innerHTML += "err.name = " + err.name + "<br>";
         resEle.innerHTML += "err.message = " + err.message + "<br>";
      }
   });
</script>
</body>
</html>

Output

The above code will produce the following output −

On clicking the ‘CLICK HERE’ button −

raja
Published on 17-Jul-2020 08:34:44
Advertisements