Introduction

In this tutorial, we will learn about logging and handling errors effectively in JavaScript. The goal of this tutorial is to enhance your debugging skills and to provide you with techniques to identify and resolve issues in your code.

You will learn:

• Different techniques of error logging.
• How to handle errors effectively.
• How to utilize these logs to troubleshoot issues.

Prerequisites: Basic understanding of JavaScript and its syntax.

Step-by-Step Guide

Error Logging

When an error occurs in your JavaScript code, it's important to log that error. This can help you, or another developer, to debug the issue later. The simplest way to log an error is using console.error(). This function prints a message to the console along with a stack trace.

try {
  // Some code that may throw an error
} catch (error) {
  console.error(error);
}

Error Handling

Handling errors in JavaScript is commonly done using try/catch blocks. The try block contains the code that may throw an error, and the catch block contains the code to handle the error.

try {
  // Some code that may throw an error
} catch (error) {
  // Code to handle the error
}

Code Examples

Example 1: Basic Error Logging and Handling

try {
  let a = b; // b is not defined
} catch (error) {
  console.error(error); // Logs the error with stack trace
  // Handle the error
}

In this code, we're attempting to assign the value of variable b to a. However, b is not defined, so an error is thrown. This error is then caught and logged to the console.

Example 2: Custom Error Message

try {
  throw new Error('This is a custom error message');
} catch (error) {
  console.error(error); // Logs the error with the custom message
  // Handle the error
}

In this example, we're throwing an error with a custom message. This can be useful for providing more context about the error.

Summary

In this tutorial, we've learned about error logging and handling in JavaScript. We've covered how to log errors using console.error(), and how to handle them using try/catch blocks.

Next, you might want to learn about more advanced error handling techniques, such as promises and async/await.

Practice Exercises

1. Write a function that throws an error if its argument is not a number. Catch and log the error if one is thrown.
2. Write a function that fetches data from an API. Use try/catch to handle any potential errors and log them.

Solutions

1. Solution:

function checkNumber(num) {
  try {
    if (typeof num !== 'number') {
      throw new Error('Argument is not a number');
    }
  } catch (error) {
    console.error(error);
  }
}

checkNumber('hello'); // Logs: Error: Argument is not a number

1. Solution:

async function fetchData(url) {
  try {
    let response = await fetch(url);
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData('https://api.example.com/data');

In these exercises, you practiced throwing, catching, and logging errors. To further practice, try to handle different types of errors in different ways.