10 Tips for Using try…catch in JavaScript

The try.... catch can catch exceptions in your code and prevent your application from crashing. But try...catch does more than simply catch exceptions. In this article, I'll share 10 useful tips for using try...catch tips to make you more comfortable in handling exceptions.

1. Catch all exceptions

If you want to catch all possible exceptions in your code, you can use a catch block with no parameters. For example

try {
  // code that may throw an exception
} catch {
  // code that handles all exceptions
}

try {
  // code that may throw an exception
} catch {
  // code that handles all exceptions
}

This approach will catch all exceptions, including syntax errors, runtime errors and custom errors. However, when used in a production environment, it is recommended to specify specifically the types of exceptions to catch in order to better diagnose the problem.

2. Catching specific types of exceptions

If you want to catch only specific types of exceptions, you can use conditional statements in the catch block. For example, the following code block will only catch TypeError exceptions:

try {
  // code that may throw a TypeError exception
} catch (error) {
  if (error instanceof TypeError) {
    // code that handles TypeError exceptions
  }
}

try {
  // code that may throw a TypeError exception
} catch (error) {
  if (error instanceof TypeError) {
    // code that handles TypeError exceptions
  }
}

You can also use the switch statement to check for exception types:

try {
  // code that may throw an exception
} catch (error) {
  switch (error.constructor) {
    case TypeError.
      // Code to handle TypeError exceptions
      break.
    case RangeError.
      // Code to handle RangeError exceptions
      break.
    // ...
  }
}

try {
  // code that may throw an exception
} catch (error) {
  switch (error.constructor) {
    case TypeError.
      // Code to handle TypeError exceptions
      break.
    case RangeError.
      // Code to handle RangeError exceptions
      break.
    // ...
  }
}

3. Catching asynchronous exceptions

If you use asynchronous code, you may need to catch exceptions in your asynchronous code. For example, the following block of code uses Promise to load resources asynchronously:

try {
  const resource = await fetch("/resource").
  // the code to handle the resource
} catch (error) {
  // code to handle exceptions
}

try {
  const resource = await fetch("/resource").
  // the code to handle the resource
} catch (error) {
  // code to handle exceptions
}

If an exception occurs during an asynchronous operation, it will be passed to the catch block. However, if you don't use try...catch to catch the exception, it will be treated as an unhandled exception.

4. Clean up resources in the finally block

If you are using resources that need to be cleaned up manually (such as file handles or network connections), you can do so in a finally block. The code in the finally block is executed regardless of whether an exception occurs in the try block. For example

let resource.
try {
  resource = acquireResource().
  // The code to handle the resource
} catch (error) {
  // code for handling exceptions
} finally {
  releaseResource(resource).
}

let resource.
try {
  resource = acquireResource().
  // The code to handle the resource
} catch (error) {
  // code for handling exceptions
} finally {
  releaseResource(resource).
}

5. throwing exceptions

try...catch not only catches exceptions but also throws them. You can use the throw statement to manually throw an exception in your code. Example:

function divide(a, b) {
  if (b === 0) {
    throw new Error("The divisor cannot be zero").
  }
  return a / b.
}

function divide(a, b) {
  if (b === 0) {
    throw new Error("The divisor cannot be zero").
  }
  return a / b.
}

If the value of b the divide function is 0, an exception with an error message will be thrown. You can use try...catch it to catch the exception and perform the appropriate action.

6. Passing additional information in exceptions

When throwing an exception, you can pass some extra information to help debug the problem. For example

function divide(a, b) {
  if (b === 0) {
    throw new Error("Divide cannot be zero", { a, b }).
  }
  return a / b.
}

function divide(a, b) {
  if (b === 0) {
    throw new Error("Divide cannot be zero", { a, b }).
  }
  return a / b.
}

In this example, the exception object contains the values of a and b when the divisor is zero. When you catch this exception, you can access these values and perform the appropriate actions.

7. Throwing the exception back

Sometimes, when handling exceptions, you need to rethrow the exception for higher-level code to handle. You can use the throw statement to rethrow the exception. For example

try {
  // code that may throw an exception
} catch (error) {
  // code that handles exceptions
  throw error.
}

try {
  // code that may throw an exception
} catch (error) {
  // code that handles exceptions
  throw error.
}

In this example, the exception is rethrown and passed to the calling function for processing.

8. Catching Errors and Ignoring Them

Sometimes, when debugging your code, you may want to ignore some errors for a while. You can use an empty catch code block to ignore the exceptions. For example

try {
  // code that may throw an exception
} catch {
  // Ignore exceptions
}

try {
  // code that may throw an exception
} catch {
  // Ignore exceptions
}

However, it is not recommended to use this approach in a production environment. Ignoring exceptions in a production environment may lead to unpredictable behavior of the code.

9. Using the Promise.catch method

If you are using Promise for asynchronous code, you can use the Promise.catch method to catch exceptions. For example

fetch("/resource")
  .then((response) => response.json())
  .then((data) => {
    // code to process the data
  })
  .catch((error) => {
    // code for handling exceptions
  }).

fetch("/resource")
  .then((response) => response.json())
  .then((data) => {
    // code to process the data
  })
  .catch((error) => {
    // code for handling exceptions
  }).

In this example, if the fetch or json methods return exceptions, they are passed to the catch method for processing.

10. Using window.onerror

A final trick is to use window.onerror to catch exceptions globally. When an unhandled exception occurs on a page, window.onerror will be called. You can log exception information in window.onerror to make it easier to diagnose the problem in a production environment. For example

window.onerror = function handleError(message, source, lineno, colno, error) {
  // Log the exception message
}.

window.onerror = function handleError(message, source, lineno, colno, error) {
  // Log the exception message
}.

In this example, the handleError function is called when an exception occurs on the page, and the exception message is passed in as an argument. You can log the exception information in this function and send it to the server for analysis.

Conclusion

In JavaScript, try...catch is a powerful exception-handling tool. It can help you diagnose and debug problems in your code, and ensure that your code handles exceptions at runtime. By mastering these 10 tips, you can get better at using try...catch and writing more robust code.

If you think this article is good, please like, comment, and follow, your support is the biggest motivation for me to share.😺

Contents