Introduction

Building robust code is like constructing a house — a strong foundation is essential. In coding, that foundation is error handling. When errors arise, and they inevitably do, a solid strategy is key to resilience. It’s what keeps our code standing firm and our users content.

This guide will explore the essentials of JavaScript error handling, from basic techniques to best practices. We’ll delve into how to catch and throw errors properly, and examine error handling within popular frameworks like React, Vue, and Node.js, ensuring your code stands the test of time.

JavaScript Error Handling Basics

Common JavaScript Errors

Sometimes you might misspell a variable, or try to use something that isn’t there. Here are a few errors you might see:

• ReferenceError: You tried to use something that doesn’t exist.
• TypeError: You used a value in the wrong way, like trying to run a number as if it were a function.
• SyntaxError: There’s a typo or mistake in your code that stops it from running.
• RangeError: Thrown when a numeric value exceeds its allowed range.
• URIError: Represents errors that occur when global URI handling functions are used inappropriately.

Try…Catch Statements

The try...catch statement is your safety net. It allows you to “try” running your code and “catch” any errors that might occur without stopping the entire script.

try {   // Code that might throw an error } catch (error) {   // Code to handle the error }

Throw Statement and Custom Errors

Sometimes, you’ll encounter situations where you need to generate your own errors. That’s when the throw statement comes in handy. You can throw a new Error object, providing a message that can help you identify what went wrong.

throw new Error('This is a custom error message.');

The Role of the finally Clause

The finally clause executes after the try and catch blocks, regardless of whether an exception was thrown or caught. It’s typically used for cleaning up resources or performing tasks that should happen after the try and catch execution, such as closing files or releasing network connections.

try {   // Code that may throw an error } catch (error) {   // Code to handle the error } finally {   // Code that runs after try/catch, regardless of the outcome }

Using Promises for Error Handling

Promises give you a way to handle errors when dealing with asynchronous operations. When a promise is rejected, you can catch the error in a .catch() method.

new Promise((resolve, reject) => {   // code that might fail }).catch(error => {   // handle the error });

Async/Await Error Handling

async/await syntax allows you to write asynchronous code that looks and behaves a bit more like synchronous code. Wrap your await calls in a try...catch block to handle errors in a clearer, more linear fashion.

async function fetchData() {   try {     let data = await getData();     // Use the data   } catch (error) {     // Handle the error   } }

Creating Custom Error Classes

By extending the built-in Error object, developers can create custom error classes that provide more context or handle specific error conditions more effectively. This is particularly useful for large applications with complex error handling needs.

class ValidationError extends Error {   constructor(message) {     super(message);     this.name = "ValidationError";   } }

Best Practices for Error Handling

After understanding the basics, let’s look at some common practices in error handling. These can help make your code more reliable and easier to maintain.

Early Return Pattern

Instead of wrapping your code in deep if statements, consider using the early return pattern. This means if an error condition is met, you return from the function early. This keeps the rest of your code less indented and more readable.

function processData(data) {   if (data.error) {     return 'Error: Something went wrong!';   }   // Continue processing data }

Structured Exception Handling

Plan how to handle exceptions (errors) in a structured way. Think about what could go wrong in your code and have specific catches for different types of errors. This way, you can provide more detailed error information and know exactly where things went wrong.

try {   // Code that might throw multiple types of errors } catch (error) {   if (error instanceof TypeError) {     // Handle TypeError specifically   } else if (error instanceof ReferenceError) {     // Handle ReferenceError specifically   } else {     // Handle all other errors   } }

Deciding When to Catch Errors

• Catch errors at the boundary of asynchronous operations or external API calls.
• Let errors propagate to a global error handler if they cannot be resolved locally.
• Use try/catch judiciously to avoid hiding programming errors.

Writing Clear, Descriptive Error Messages

• Include context-specific information in error messages to aid in debugging.
• Avoid exposing sensitive information in error messages in production environments.
• Use consistent formatting for error messages to simplify log analysis.

Categorize and Prioritize Errors

Organize your errors into categories (such as validation errors, network errors, or internal server errors) and prioritize them based on their severity. This helps in deciding the right course of action for each type of error.

Logging and Monitoring

Keep track of errors by logging them. This doesn’t fix the error, but it helps you understand what’s going wrong and can be crucial for fixing issues in production. Tools like Sentry or LogRocket can help you monitor and track errors in real-time.

User-Friendly Error Feedback

When displaying errors to users, ensure that the message is user-friendly and actionable. Avoid technical jargon and guide users with steps they can take to overcome the issue if possible.

Avoid Common Error Handling Pitfalls

Be aware of common error handling pitfalls, such as:

• Ignoring errors or swallowing exceptions without proper handling.
• Overusing try...catch blocks, which can make the code harder to read and maintain.
• Relying on generic error handling that doesn’t account for the specific context.

By following these practices, you can ensure that your JavaScript code not only handles errors gracefully but also remains clean and easy to understand. Next, we’ll take a look at how error handling is implemented in specific JavaScript frameworks like React, Vue, and Node.js.

Error Handling in React

React is a popular JavaScript library for building user interfaces. It has its own way of handling errors, especially within components.

Error Boundaries

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree. They log those errors, and display a fallback UI instead of the component tree that crashed.

class ErrorBoundary extends React.Component {   constructor(props) {     super(props);     this.state = { hasError: false };   }    static getDerivedStateFromError(error) {     // Update state so the next render will show the fallback UI.     return { hasError: true };   }    componentDidCatch(error, errorInfo) {     // You can also log the error to an error reporting service     logErrorToMyService(error, errorInfo);   }    render() {     if (this.state.hasError) {       // You can render any custom fallback UI       return 
Something went wrong.
;     }      return this.props.children;    } }

You wrap your components with an error boundary to protect them from crashing the whole app.

Higher-Order Components (HOCs) for Error Handling

Higher-order components can be used for error handling in React. They are functions that take a component and return a new component with added error handling capabilities.

function withErrorHandling(WrappedComponent) {   return class extends React.Component {     constructor(props) {       super(props);       this.state = { hasError: false };     }      static getDerivedStateFromError(error) {       // Update state so that the next render will show the fallback UI       return { hasError: true };     }      componentDidCatch(error, errorInfo) {       // You can also log the error to an error reporting service       logErrorToMyService(error, errorInfo);     }      render() {       if (this.state.hasError) {         // You can render any custom fallback UI         return 
Something went wrong.
;       }        // Normally, just render the WrappedComponent       return ;     }   }; }  function logErrorToMyService(error, errorInfo) {   // Implement the function to log errors   console.error('Error:', error);   console.error('ErrorInfo:', errorInfo); }

Error Handling in React Hooks

With the introduction of hooks, functional components can also manage errors effectively. You can use the useState and useEffect hooks to handle errors in a functional component.

function MyComponent() {   const [error, setError] = useState(null);    useEffect(() => {     try {       // Try to execute some code     } catch (err) {       setError(err);     }   }, []);    if (error) {     return 
Error: {error.message}
;   }    return 
...
; }

Event Handlers for Error Management

When dealing with user events like clicks or form submissions, you can use event handlers to manage errors. Make sure to catch any errors within these handlers to prevent unhandled exceptions.

function MyComponent() {   const handleClick = () => {     try {       // Code that might throw an error     } catch (error) {       // Handle the error appropriately     }   };    return Click me; }

Error Handling in Vue 3

Global Error Handling

In Vue 3, you can use a global error handler, which is useful for catching errors that occur during component rendering or in the setup function.

const app = Vue.createApp({});  app.config.errorHandler = (err, instance, info) => {   // Handle the error   console.error(`Error: ${err.message}nInfo: ${info}`); };

This global handler acts as a catch-all for unhandled exceptions in your application.

Using the errorCaptured Hook

Registers a hook to be called when an error propagating from a descendant component has been captured.

When the “Send Message” button is clicked, the console outputs an error:

[errorCaptured] Error: [test onErrorCaptured]     at Proxy.sendMessage (Message.vue:36:15)     at _createElementVNode.onClick._cache.._cache. (Message.vue:3:39)     at callWithErrorHandling (runtime-core.esm-bundler.js:6706:22)     at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:6715:21)     at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:350:13) Proxy {sendMessage: ƒ, …} native event handler

If the errorCaptured hook itself throws an error, both this error and the original captured error are sent to app.config.errorHandler.

An errorCaptured hook can return false to prevent the error from propagating further. This is essentially saying “this error has been handled and should be ignored.”

Error Handling in Node.js

Node.js is a server-side platform that runs JavaScript outside the browser. Error handling in Node.js is crucial since errors can affect the entire server and all connected clients. Let’s explore the best practices for handling errors in a Node.js environment.

Asynchronous Programming and Callbacks

Node.js heavily relies on asynchronous code, which can be managed using callbacks. The conventional approach in Node.js is to use error-first callbacks, where the first argument in the callback function is reserved for an error object.

fs.readFile('/path/to/file', (err, data) => {   if (err) {     // Handle the error     console.error(err);     return;   }   // Use the data });

Always check for errors first in your callbacks to ensure proper error handling.

Event Emitter for Error Events

Node.js provides the EventEmitter class, which is used to handle asynchronous events. It’s important to handle the ‘error’ event properly to prevent the Node.js process from crashing.

const EventEmitter = require('events'); const emitter = new EventEmitter();  emitter.on('error', (err) => {   // Handle the error   console.error('An error occurred:', err); });

Properly handling the ‘error’ event ensures that your Node.js application remains stable.

Logging and Error Tracking

Consistent logging is vital in a Node.js application for tracking and debugging errors. Consider using a logging library like Winston or Morgan to help with structured logging.

const winston = require('winston');  const logger = winston.createLogger({   // Configure logging settings });  // Later in your code logger.error('An error occurred:', err);

Error Handling in NestJS

NestJS has built-in exception filters that handle errors consistently across your application.

NestJS provides default exception filters that automatically handle exceptions thrown from your controllers. These exceptions are instances of the HttpException class.

import { HttpException, HttpStatus } from '@nestjs/common';  // In your controller @Get() async findAll() {   throw new HttpException('Forbidden', HttpStatus.FORBIDDEN); }

When errors occur in your services, you should handle them and, if necessary, throw exceptions that your controllers can catch.

@Injectable() export class SomeService {   async someMethod() {     try {       // Service logic...     } catch (error) {       // Handle the error or rethrow it       throw new InternalServerErrorException();     }   } }

NestJS allows you to set up global filters that will apply to every route in your application.

import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; import { HttpExceptionFilter } from './http-exception.filter';  async function bootstrap() {   const app = await NestFactory.create(AppModule);   app.useGlobalFilters(new HttpExceptionFilter());   await app.listen(3000); } bootstrap();

Conclusion

Effective error handling is a critical aspect of software development. It ensures the reliability of your application and enhances the user experience. By understanding the error handling patterns and best practices outlined in this article, and applying them across various JavaScript frameworks and environments, you’re well on your way to writing more resilient and maintainable code.

Remember, the goal isn’t to write code that never fails, but to write code that fails gracefully and is quick to recover. With the insights from this guide, you’ll be better equipped to achieve that goal in your JavaScript projects.

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: Stackademic | CoFeed | Venture | Cubed
• More content at PlainEnglish.io