DEV Community

Cover image for Javascript Error Handling
Emin Altan
Emin Altan

Posted on • Edited on

1

Javascript Error Handling

JavaScript Error Handling

In this part of the series, we will explore the Error Handling concept in JavaScript, focusing on the try, catch, throw, and finally keywords.

In this article, we'll cover:

I hope you enjoy reading.

Yazının Türkçe versiyonu için linke tıklayabilirsiniz.

The term "error handling" in JavaScript refers to the process of identifying, handling, and managing errors that occur during the execution of a program. Errors arise when an application encounters unexpected situations, including user input errors, network connection issues, or file not found scenarios.

Error handling enables meaningful error messages to be displayed to users, aiding them in better understanding the encountered issues.

In JavaScript, error handling is typically implemented using the try, catch, finally, and throw keywords.

Now, let's delve into these keywords.

The try and catch keywords are used together friends. If we want to execute or control to code we write the code in try block. As long as the program doesn't encounter any issues, the code within the try block will run.

The catch block, on the other hand, contains the code to be executed in case of an error. Typically, the content of this block provides information to the user about the error message.

Example

try {
  let num = 0;
  num = num + 1;
  console.log(`Result: ${num}`);
} catch (error) {
  console.log(error);
}
Result: 1

Above, we see an example of a try-catch block. If there is no error, the code inside the try block will be executed.

If an error occurs within the code in the try block, the execution of the try block will be halted, and the code inside the catch block will be initiated. At the end of the process, an error message will be presented to the user.

Örnek

try {
  let num = 0;

  // Since we didn't define the x variable, we will receive the "ReferenceError: x is not defined" error message.
  num = num + x;
  console.log(`Result: ${num}`);
} catch (error) {
  console.log(error);
}

As seen above, the variable x was not defined in the program, yet we still used the x variable within the num = num + x expression. In this case, JavaScript will terminate the execution of the code inside the try block, initiate the code inside the catch block, and log the "ReferenceError: x is not defined" message to the console.

In JavaScript, predefined error messages are defined within the Error object. In the previous example, the predefined error message ReferenceError was used to create an error. Alongside ReferenceError, JavaScript has 6 more predefined error values.

Let's list them:

Error Name Description
EvalError Represents an error regarding a function.
RangeError Indicates that a numeric value is outside the valid range.
ReferenceError Represents an error when a non-existent variable is referenced.
SyntaxError Indicates a syntax error in the code.
TypeError Represents an error when a value is not of the expected type.
URIError Used to indicate that a URI is malformed.

EvalError is deprecated and not commonly used in modern JavaScript. Therefore, I'm skipping the explanation of EvalError.

RangeError indicates that a numeric value is outside the valid range.

Example

let num = 1;

try {
  // Attempting to format the num variable with a precision of 500 digits will result in a RangeError.
  num.toPrecision(500);
} catch (error) {
  console.log(error.name);
}
RangeError

ReferenceError indicates situations where a variable reference is not valid.

Example

try {
  let num = 0;

  // Since we didn't define the x variable, we will receive the ReferenceError message.
  num = num + x;
  console.log(`Result: ${num}`);
} catch (error) {
  console.log(error.name);
}
ReferenceError

SyntaxError occurs when there is a syntax error in the code.

Example

try {
  // Using an invalid argument inside the eval method will result in a SyntaxError.
  let invalidCode = eval("2 +");
} catch (error) {
  console.log(error.name);
}
SyntaxError

TypeError occurs when an expression used for a variable is not of the expected type.

Example

let num = 1;

try {
  // Using the toUpperCase() method on the num variable will result in a TypeError.
  num.toUpperCase();
} catch (error) {
  console.log(error.name);
}
TypeError

URIError occurs when there are illegal characters in a URL.

Example

try {
  // Using invalid characters in the URL will result in a URIError.
  decodeURI("%%%");
} catch (error) {
  console.log(error.name);
}
URIError

Above the Error object, there are some properties determined by Mozilla and Microsoft.

These are:

  • fileName (Mozilla)

  • lineNumber (Mozilla)

  • columnNumber (Mozilla)

  • stack (Mozilla)

  • description (Microsoft)

  • number (Microsoft)

❗ It is not recommended to use these properties because they lack cross-browser support and may not work in every browser.

So far, we have examined the properties of the predefined Error object in JavaScript. To make error messages more meaningful, developers may want to create custom error messages using the throw keyword.

Example

let x;

try {
  // Using the throw keyword to create a developer-defined error message.
  if (x === undefined) throw "The value of x is not defined.";
} catch (error) {
  console.log(error);
}
The value of x is not defined.

In the above example, we defined a variable x with the data type undefined using the let x statement. In the try block, we used an if statement to check the data type of the x variable. If the data type of the x variable is undefined, we used the throw keyword to create a developer-defined error message. We passed the created error message to the catch block's error parameter and printed the result to the console.

Technically, this process is called throwing an error or throwing an exception.

The finally keyword allows our program to return an additional result independent of the try-catch block. Typically, operations like releasing or cleaning up resources are performed in this block.

For example, using the try-catch block, we can provide the user with an error message if a form is incorrectly filled out. The finally keyword can then be used to clean up and make the content of the relevant form element ready for reuse.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <link
      rel="stylesheet"
      href="test.css"
    />
    <title>try-catch-finally keywords of JavaScript Kitchen</title>

    <style>
      body {
        font-family: Arial, sans-serif;
      }

      form {
        width: 300px;
        margin: 20px;
      }

      label {
        display: block;
        margin-bottom: 5px;
      }

      input {
        width: 100%;
        padding: 5px;
        margin-bottom: 10px;
      }

      button {
        padding: 8px;
        background-color: #4caf50;
        color: #fff;
        border: none;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <label for="inputField">Enter Your Text:</label>
    <input
      type="text"
      id="js-inputField"
      name="js-inputField"
      required
    />

    <button id="js-button">Send</button>

    <p id="js-message"></p>
    <script>
      const jsInputField = document.getElementById("js-inputField");
      const jsButton = document.getElementById("js-button");
      const jsMessage = document.getElementById("js-message");

      jsButton.addEventListener("click", () => {
        try {
          if (jsInputField.value.includes("pen")) {
            jsMessage.innerHTML = "'pen' string found in entered text.";
          } else {
            throw "Can't find a 'pen' string in the entered text.";
          }
        } catch (error) {
          jsMessage.innerHTML = error;
        } finally {
          // Delete the finally block and observe the state of the text field in the form.
          jsInputField.value = "";
        }
      });
    </script>
  </body>
</html>

Copy the above code into an empty HTML page. Fill out the form separately for text containing and not containing the "pen" expression, then click the "Send" button to observe the form content.

Perform the same action by removing the finally block and observe the difference.

🖱️ You can access the working example by clicking here.

In JavaScript, error handling is an important concept for controlling and providing meaningful feedback to users about possible errors that may occur during the program's execution. The process involves using the try, catch, finally, and throw keywords.

  • Code within the try block runs normally regardless of whether an error occurs.

  • The catch block executes when an error occurs within the try block, handling the error. Operations are performed here to display a meaningful error message to the user.

  • The finally block runs independently of the try-catch block in all situations. Typically, operations like releasing or cleaning up resources occur in this block.

Developers also have the ability to create their custom error messages using the throw keyword. This is useful, especially for controlling the flow of the program and customizing error messages under specific conditions.

Commonly encountered error types in JavaScript include RangeError, ReferenceError, SyntaxError, TypeError, and URIError. Each represents different situations and provides developers with the ability to perform specific actions based on the type of error.

In conclusion, error handling is a crucial practice to enhance the reliability of a JavaScript application and improve the user experience. A robust error handling strategy minimizes the impact of errors and provides users with meaningful feedback.

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay