JavaScript has been a popular programming language for over three decades. We build web, mobile, PWA, and server-side applications using JavaScript and various popular JavaScript-based libraries (like ReactJS) and frameworks (like Next.js, Remix, and so on).

Being a loosely typed language, JavaScript imposes the challenge of handling type safety correctly. TypeScript is useful for managing types, but we still need to handle runtime errors efficiently in our code.

Errors like TypeError, RangeError, ReferenceError are probably pretty familiar to you if you’ve been building with JavaScript for a while. All these errors may cause invalid data, bad page transitions, unwanted results, or even the entire application to crash – none of which will make end users happy!

In this handbook, you’ll learn everything you need to know about error handling in JavaScript. We will start with an understanding of errors, their types, and occurrences. Then you’ll learn how to deal with these errors so that they don’t cause a bad user experience. At the end, you’ll also learn to build your own custom error types and clean-up methodologies to handle your code flow better for optimizations and performance.

I hope you enjoy reading along and practising the tasks I have provided at the end of the article.

This handbook is also available as a video session as part of the 40 Days of JavaScript initiative. Please check it out.

Table of Contents

1. Errors in JavaScript

2. Handling Errors With the try and catch

   • The try Block

   • The catch Block

3. Error Handling: Real-World Use Cases

   • Handling Division by Zero

   • Handling JSON

4. Anatomy of the Error Object

   • What is the Error Object?

5. Throwing Errors and Re-throwing Errors

   • Rethrowing

6. The finally with try-catch

   • Caution with finally

7. Custom Errors

   • A Real-World Use Case of Custom Errors

8. Task Assignments for You

   • Find the Output

   • Payment Process Validation

9. 40 Days of JavaScript Challenge Initiative

10. Before We End...

Errors in JavaScript

Errors and exceptions are the events that disrupt program execution. JavaScript parses and executes code line by line. The source code gets evaluated with the grammar of the programming language to ensure it is valid and executable. If there is a mismatch, JavaScript encounters a parsing error. You’ll need to make sure you follow the right syntax and grammar of the language to stay away from parsing errors.

Take a look at the code snippet below. Here, we have made the mistake of not closing the parentheses for the console.log.

console.log("hi"

This will lead to a Syntax Error like this:

Other types of errors can happen due to wrong data input, trying to read a value or property that doesn’t exist, or acting on inaccurate data. Let’s see some examples:

console.log(x); // Uncaught ReferenceError: x is not defined

let obj = null;
console.log(obj.name); // Uncaught TypeError: Cannot read properties of null

let arr = new Array(-1) // Uncaught RangeError: Invalid array length

decodeURIComponent("%"); // Uncaught URIError: URI malformed

eval("var x = ;"); // Uncaught EvalError

Here is the list of possible runtime errors you may encounter, along with their descriptions:

• ReferenceError – Occurs when trying to access a variable that is not defined.

• TypeError – Occurs when an operation is performed on a value of the wrong type.

• RangeError – Occurs when a value is outside the allowable range.

• SyntaxError – Occurs when there is a mistake in the syntax of the JavaScript code.

• URIError – Occurs when an incorrect URI function is used in encoding and decoding URIs.

• EvalError – Occurs when there is an issue with the eval() function.

• InternalError – Occurs when the JavaScript engine runs into an internal limit (stack overflow).

• AggregateError – Introduced in ES2021, used for handling multiple errors at once.

• Custom Errors – These are user-defined errors, and we will learn how to create and use them soon.

Have you noticed that all the code examples we used above result in a message explaining what the error is about? If you look at those messages closely, you will find a word called Uncaught. It means the error occurred, but it was not caught and managed. That’s exactly what we will now go for – so you know how to handle these errors.

Handling Errors With the try and catch

JavaScript applications can break for various reasons, like invalid syntax, invalid data, missing API responses, user mistakes, and so on. Most of these reasons may lead to an application crash, and your users will see a blank white page.

Rather than letting the application crash, you can gracefully handle these situations using try…catch.

try {
    // logic or code
} catch (err) {
    // handle error
}

The try Block

The try block contains the code – the business logic – which might throw an error. Developers always want their code to be error-free. But at the same time, you should be aware that the code might throw an error for several possible reasons, like:

• Parsing JSON

• Running API logic

• Accessing nested object properties

• DOM manipulations

• … and many more

When the code inside the try block throws an error, the code execution of the remaining code in the try block will be suspended, and the control moves to the nearest catch block. If no error occurs, the catch block is skipped completely.

try {
  // Code that might throw an error
} catch (error) {
  // Handle the error here
}

The catch Block

The catch block runs only if an error was thrown in the try block. It receives the Error object as a parameter to give us more information about the error. In the example shown below, we are using something called abc without declaring it. JavaScript will throw an error like this:

try {
    console.log("execution starts here");
    abc;
    console.log("execution ends here");
} catch (err) {
    console.error("An Error has occured", err);
}

JavaScript executes code line by line. The execution sequence of the above code will be:

• First, the string "execution starts here" will be logged to the console.

• Then the control will move to the next line and find the abc there. What is it? JavaScript doesn’t find any definition of it anywhere. It’s time to raise the alarm and throw an error. The control doesn’t move to the next line (the next console log), but rather moves to the catch block.

• In the catch block, we handle the error by logging it to the console. We could do many other things like show a toast message, send the user an email, or switch off a toaster (why not if your customer needs it).

Without try...catch, the error would crash the app.

Error Handling: Real-World Use Cases

Let’s now see some of the real-world use cases of error handling with try…catch.

Handling Division by Zero

Here is a function that divides a number by another number. So, we have parameters passed to the function for both numbers. We want to make sure that the division never encounters an error for dividing a number by zero (0).

As a proactive measure, we have written a condition that if the divisor is zero, we will throw an error saying that division by zero is not allowed. In every other case, we will proceed with the division operation. In case of an error, the catch block will handle the error and do what’s needed (in this case, logging the error to the console).

function divideNumbers(a, b) {
    try {
        if (b === 0) {
            const err = new Error("Division by zero is not allowed.");
            throw err;
        }
        const result = a/b;
        console.log(`The result is ${result}`);
    } catch(error) {
        console.error("Got a Math Error:", error.message)
    }
}

Now, if we invoke the function with the following arguments, we will get a result of 5, and the second argument is a non-zero value.

divideNumbers(15, 3); // The result is 5

But if we pass the 0 value for the second argument, the program will throw an error, and it will be logged into the console.

divideNumbers(15, 0);

Output:

Handling JSON

Often, you will get JSON as a response to an API call. You need to parse this JSON in your JavaScript code to extract the values. What if the API sends you some malformed JSON by mistake? You can’t afford to let your user interface crash because of this. You need to handle it gracefully – and here comes the try…catch block again to the rescue:

function parseJSONSafely(str) {
  try {
    return JSON.parse(str);
  } catch (err) {
    console.error("Invalid JSON:", err.message);
    return null;
  }
}

const userData = parseJSONSafely('{"name": "tapaScript"}'); // Parsed
const badData = parseJSONSafely('name: tapaScript');         // Handled gracefully

Without try...catch, the second call will crash the app.

Anatomy of the Error Object

Getting errors in programming can be a scary feeling. But Errors in JavaScript aren’t just some scary, annoying messages – they are structured objects that carry a lot of helpful information about what went wrong, where, and why.

As developers, we need to understand the anatomy of the Error object to help us better with faster debugging and smarter recovery in production-level application issues.

Let’s deep dive into the Error object, its properties, and how to use it effectively with examples.

What is the Error Object?

The JavaScript engine throws an Error object when something goes wrong during runtime. This object contains helpful information like:

• An error message: This is a human-readable error message.

• The error type: TypeError, ReferenceError, SyntaxError, and so on that we discussed above.

• The stack trace: This helps you navigate to the root of the error. It is a string containing the stack trace at the point the error was thrown.

Let’s take a look at the code snippet below. The JavaScript engine will throw an error in this code, as the variable y is not defined. The error object contains the error name (type), message, and the stack trace information.

function doSomething() {
  const x = y + 1; // y is not defined
}
try {
  doSomething();
} catch (err) {
  console.log(err.name);    // ReferenceError
  console.log(err.message); // y is not defined
  console.log(err.stack); // ReferenceError: y is not defined
                          // at doSomething (<anonymous>:2:13)
                          // at <anonymous>:5:3
}

Tip: If you need any specific properties from the error object, you can use destructuring to do that. Here is an example where we are only interested in the error name and message, not the stack.

try {
  JSON.parse("{ invalid json }");
} catch ({name, message}) {
  console.log("Name:", name);       // Name: SyntaxError
  console.log("Message:", message); // Message: Expected property name or '}' in JSON at position 2 (line 1 column 3)
}

Throwing Errors and Re-throwing Errors

JavaScript provides a throw statement to trigger an error manually. It is very helpful when you want to handle an invalid condition in your code (remember the divide by zero problem?).

To throw an error, you need to create an instance of the Error object with details and then throw it.

throw new Error("Something is bad!");

When the code execution encounters a throw statement,

• It stops the execution of the current code block immediately.

• The control moves to the nearest catch block (if any).

• If the catch block is not found, the error will not be caught. The error gets bubbled up, and may end up crashing the program. You can learn more in-depth about events and event bubbling from here.

Rethrowing

At times, catching the error itself in the catch block is not enough. Sometimes, you may not know how to handle the error completely, and you might want to do additional things, like:

• Adding more context to the error.

• Logging the error into a file-based logger.

• Passing the error to someone more specialized to handle it.

This is where rethrow comes in. With rethrowing, you catch an error, do something else with it, and then throw it again.

function processData() {
  try {
    parseUserData();
  } catch (err) {
    console.error("Error in processData:", err.message);
    throw err; // Rethrow so the outer function can handle it too
  }
}

function main() {
  try {
    processData();
  } catch (err) {
    handleErrorBetter(err);
  }
}

In the code above, the processData() function catches an error, logs it, and then throws it again. The outer main() function can now catch it and do something more to handle it better.

In the real-world application development, you would want to separate the concerns for errors, like:

• API Layer – In this layer, you can detect HTTP failures

    async function fetchUser(id) {
      const res = await fetch(`/users/${id}`);
      if (!res.ok) throw new Error("User not found"); // throw it here
      return res.json();
    }
  

• Service Layer – In this layer, you handle business logic. So the error will be handled for invalid conditions.

    async function getUser(id) {
      try {
        const user = await fetchUser(id);
        return user;
      } catch (err) {
        console.error("Fetching user failed:", err.message);
        throw new Error("Unable to load user profile"); // rethrowing 
      }
    }
  

• UI Layer – Show a user-friendly error message.

    async function showUserProfile() {
      try {
        const user = await getUser(123);
        renderUser(user);
      } catch (err) {
        displayError(err.message); // A proper message show to the user
      }
    }
  

The finally with try-catch

The try…catch block gives us a way to handle errors gracefully. But you may always want to execute some code irrespective of whether an error occurred or not. For example, closing the database connection, stopping a loader, resetting some states, and so on. That’s where finally comes in.

try {
  // Code might throw an error
} catch (error) {
  // Handle the error
} finally {
  // Always runs, whether an error occured or not
}

Let’s take an example:

function performTask() {
  try {
    console.log("Doing something cool...");
    throw new Error("Oops!");
  } catch (err) {
    console.error("Caught error:", err.message);
  } finally {
    console.log("Cleanup: Task finished (success or fail).");
  }
}

performTask();

In the performTask() function, the error is thrown after the first console log. So, the control will move to the catch block and log the error. After that, the finally block will execute its console log.

Output:

Doing something cool...
Caught error: Oops!
Cleanup: Task finished (success or fail).

Let’s take a more real-world use case of making an API call and handling the loading spinner:

async function loadUserData() {
  showSpinner(); // Show the spinner here

  try {
    const res = await fetch('/api/user');
    const data = await res.json();
    displayUser(data);
  } catch (err) {
    showError("Failed to load user.");
  } finally {
    hideSpinner(); // Hide spinner for both success and fail cases.
  }
}

Usually, we show a loading spinner while making an API (asynchronous) call from the browser. Irrespective of the successful response or an error from the API call, we must stop showing the loading spinner. Instead of executing the code logic twice to stop the spinner (once inside the try block and then again inside the catch block), you can do it inside the finally block.

Caution with finally

The finally block can override return values or a thrown error. This behaviour may be confusing and can lead to bugs as well.

function test() {
  try {
    return 'from try';
  } finally {
    return 'from finally';
  }
}

console.log(test());

What do you think the above code returns?

It will return 'from finally'. The return 'from try' is completely ignored. The return from finally overrides it silently.

Let’s see one more example of the same problem:

function willThrow() {
  try {
    throw new Error("Original Error");
  } finally {
    throw new Error("Overriding Error"); // The original error is lost
  }
}

try {
  willThrow();
} catch (err) {
  console.log(err.message); // "Overriding Error"
}

Here, the original error ("Original Error”) is swallowed. The finally block overrides the actual root cause.

When using finally:

• Avoid returns and throws from finally as much as possible.

• Avoid performing logic in the finally block that may impact the actual outcome. The try block is the best place for that.

• Any critical decision-making must be avoided inside the finally block

• Use finally for cleanup activities, such as closing files, connections, and stopping loading spinners, etc.

• Ensure the finally block contains side-effect-free code.

Custom Errors

Using the generic Error and its existing types, like ReferenceError, SyntaxError, and so on, can be a bit vague in complex applications. JavaScript lets you create custom errors that are more related to your business use cases. The custom errors can provide:

• Additional contextual information about the error.

• Clarity about the error

• More readable logs

• The ability to handle multiple error cases conditionally.

A custom error in JavaScript is a user-defined error type that extends the built-in Error class. The custom error should be an ES6 Class that extends JavaScript’s Error class. We can use the super() in the constructor function to inherit the message property of the Error class. You can optionally assign a name and clean the stack trace for the custom error.

class MyCustomError extends Error {
  constructor(message) {
    super(message);         // Inherit message property
    this.name = this.constructor.name; // Optional but recommended
    Error.captureStackTrace(this, this.constructor); // Clean stack trace
  }
}

Let’s now see a real-world use case for a custom error.

A Real-World Use Case of Custom Errors

Using a form on a web page is an extremely common use case. A form may contain one or more input fields. It is recommended to validate the user inputs before we process the form data for any server actions.

Let’s create a custom validation error we can leverage for validating multiple form input data, like the user’s email, age, phone number, and more.

First, we’ll create a class called ValidationError that extends the Error class. The constructor function sets up the ValidationError class with an error message. We can also instantiate additional properties, like name, field, and so on.

class ValidationError extends Error {
  constructor(field, message) {
    super(`${field}: ${message}`);
    this.name = "ValidationError";
    this.field = field;
  }
}

Now, let's see how to use ValidationError. We can validate a user model to check its properties and throw a ValidationError whenever the expectations mismatch.

function validateUser(user) {
  if (!user.email.includes("@")) {
    throw new ValidationError("email", "Invalid email format");
  }
  if (!user.age || user.age < 18) {
    throw new ValidationError("age", "User must be 18+");
  }
}

In the code snippet above,

• We throw an invalid email format validation error if the user’s email doesn’t include the @ symbol.

• We throw another validation error if the age information of the user is missing or is below 18.

A custom error gives us the power to create domain/usage-specific error types to keep the code more manageable and less error-prone.

Task Assignments for You

If you have read the handbook this far, I hope you now have a solid understanding of JavaScript Error Handling. Let’s try out some assignments based on what we have learned so far. It’s going to be fun.

Find the Output

What will be the output of the following code snippet and why?

try {
    let r = p + 50;
    console.log(r);
} catch (error) {
    console.log("An error occurred:", error.name);
}

Options are:

• ReferenceError

• SyntaxError

• TypeError

• No error, it prints 10

Payment Process Validation

Write a function processPayment(amount) that verifies if the amount is positive and does not exceed the balance. If any condition fails, throw appropriate errors.

Hint: You can think of creating a Custom Error here.

40 Days of JavaScript Challenge Initiative

There are 101 ways of learning something. But nothing can beat structured and progressive learning methodologies. After spending more than two decades in Software Engineering, I’ve been able to gather the best of JavaScript together to create the 40 Days of JavaScript challenge initiative.

Check it out if you want to learn JavaScript with fundamental concepts, projects, and assignments for free (forever). Focusing on the fundamentals of JavaScript will prepare you well for a future in web development.

Before We End...

That’s all! I hope you found this article insightful.

Let’s connect:

• Subscribe to my YouTube Channel.

• Follow on LinkedIn if you don't want to miss the daily dose of up-skilling tips.

• Check out and follow my open-source work on GitHub.

See you soon with my next article. Until then, please take care of yourself and keep learning.

Logs keep track of what’s happening inside your code so that when things go wrong, you don’t have to guess. They’re similar to print or console.log, but more powerful.

In this tutorial, I will use Python to create and walk you through some logging code examples.

Before we talk about logs, let’s understand the different error types you might use or encounter.

Types of Errors

When you’re building a production-level application, you need to display errors based on their severity. There are several error types, and the most important ones are:

• DEBUG: Detailed information, typically useful for diagnosing problems.

• INFO: General information about the program’s progress.

• WARNING: Something unexpected happened, but it’s not critical.

• ERROR: An error occurred, but the program can still run.

• CRITICAL: A very serious error that may stop the program from running.

What is Logging?

Now, let’s get straight to the point and understand what logging is.

In simple terms, logs or logging is the act of recording information about everything your program does. The recorded information could be anything, from basic details like which functions were called to more detailed ones like tracking errors or performance issues.

Why Do We Need Logging?

You might be thinking, "If logs are printing errors, info, and so on, I can just use print statements. Why do I need logging?" Well, print works, but logging gives you more control:

↳ It can store messages in a file.
↳ It has different levels (info, warning, error, and so on).
↳ You can filter messages based on importance.
↳ It helps in debugging without cluttering your code.

These are things print statements can't do effectively.

How to Add Logs in Python

In Python, the logging module is built specifically for logging purposes.

Let’s set up some logs to see how they work.

Step 1: Import the Logging Module

To start using logging, we need to import the module:

import logging

Step 2: Log Messages

Now, you can start logging messages in your program. You can use different log levels based on the importance of the message. As a reminder, those levels are (from least to most urgent):

• DEBUG

• INFO

• WARNING

• ERROR

• CRITICAL

Let’s log a simple message at each level:

logging.debug("This is a debug message")
logging.info("This is an info message")
logging.warning("This is a warning message")
logging.error("This is an error message")
logging.critical("This is a critical message")

When you run this, you’ll see a message printed to the console, similar to this:

You might wonder why you don’t see the DEBUG and INFO messages. The default logging level prevents this.

By default, the logging level is set to WARNING. This means that only messages with a severity of WARNING or higher will be displayed (that is, WARNING, ERROR, and CRITICAL).

Step 3: Set Up the Basic Configuration

To see the debug and info messages, we need to set the logging level DEBUG before running the code.

This means we need to configure the logs. So to do this, use the method basicConfig below:

logging.basicConfig(level=logging.DEBUG)

This basic configuration allows you to log messages at the DEBUG level or higher. You can change the level depending on the type of logs you want.

Now, all logs are printing:

Step 4: Log to a File

Now, let’s save these logs in a file so we can keep track of errors, as well as when they occurred. To do this, update the configuration:

logging.basicConfig(filename='data_log.log', level=logging.DEBUG, 
                    format='%(asctime)s - %(levelname)s - %(message)s')

Here:

• asctime – The time when the event occurred.

• levelname – The type of the log (for example, DEBUG, INFO).

• message – The message we display.

Now, when you run the program, the log file will generate and save your logs, showing the exact timing, error type, and message. Like this:

How to Use Loggers for More Control

If you’re working on a large project, you might want a utility logger that you can use anywhere in the code. Let’s create this custom logger.

First, we’ll update the basicConfig to add the filename, line number, and ensure it writes everything, even special characters:

logging.basicConfig(
        filename=log_file,
        level=logging.DEBUG,
        format='%(asctime)s - %(levelname)s - %(filename)s:%(lineno)d - %(message)s', 
        filemode='w',
        encoding='utf-8' 
    )

Explanation:

• encoding='utf-8' — Ensures special characters are logged.

• %(filename)s:%(lineno)d — Logs the filename and line number where the log was generated.

Now, let’s set up a custom console logger:

  console_handler = logging.StreamHandler()
  console_handler.setLevel(logging.DEBUG)
  console_formatter = logging.Formatter('%(asctime)s - %(levelname)s - %(filename)s:%(lineno)d - %(message)s')  # Added line number
  console_handler.setFormatter(console_formatter)


   logging.getLogger().addHandler(console_handler)

This setup does the following:

• console_handler: Sends log messages to the console (stdout).

• console_formatter: Formats the log message with time, level, filename, line number, and the message.

• logging.getLogger().addHandler(console_handler): Adds the custom handler to the root logger, so the log messages are printed to the console.

Full Example Code

import logging
import os
from datetime import datetime

def setup_daily_logger():
    base_dir = os.path.dirname(os.path.abspath(__file__))
    log_dir = os.path.join(base_dir, 'logs')  
    os.makedirs(log_dir, exist_ok=True)


    current_time = datetime.now().strftime("%m_%d_%y_%I_%M_%p")
    log_file = os.path.join(log_dir, f"{current_time}.log")


    logging.basicConfig(
        filename=log_file,
        level=logging.DEBUG,
        format='%(asctime)s - %(levelname)s - %(filename)s:%(lineno)d - %(message)s', 
        filemode='w',
        encoding='utf-8' 
    )


    console_handler = logging.StreamHandler()
    console_handler.setLevel(logging.DEBUG)
    console_formatter = logging.Formatter('%(asctime)s - %(levelname)s - %(filename)s:%(lineno)d - %(message)s')  # Added line number
    console_handler.setFormatter(console_formatter)


    logging.getLogger().addHandler(console_handler)


    return logging.getLogger(__name__)

What Happens Now?

Now, whenever you run the program, a new log file will be created in the logs folder. Each time the program is executed, a new log file with a unique timestamp will be generated.

Like this:

These logs will give you a clear picture of your program’s behavior and help with debugging.

I hope this article helped you get a clearer picture of logs and their importance in programming.

Practical Real-World Examples

Now that you understand what logs are and how to set them up in Python, let’s look at real-world use cases.

1. Bot: Scraping Korea’s Largest Property Website

Here’s an example of a bot designed to scrape Korea’s biggest property website.

• The logs show every step the bot takes, making it easier to track progress.

• If an error occurs at any step, it gets recorded in the log file.

• Even if the bot crashes, I can check the logs to pinpoint where things went wrong.

One of the methods in this bot’s class uses logging to track whether the bot correctly selects the province.

Here:

• If an error or warning occurs, it’s saved in the log file.

• Later, you can review the logs and find out exactly what happened

2. Bot: Scraping Facebook Groups

Now, let’s see how logging helps in a Facebook group scraper.

Error Tracking

• At one point, the bot failed due to an error.

• Since we had logging in place, the error was saved in the log file.

• This allows you to quickly find out what went wrong.

Here, you see the exact filename and line number where the error occurs.

Once we identified and fixed the issue, the bot started working again.

It captures every detail in the log, saving hours of debugging by pinpointing where errors occur.

Debugging Made Easy

• The logs recorded every detail of the bot’s execution.

• This can save you hours of debugging because you’ll know exactly where the error occurred.

Conclusion

Logging is one of those things no one thinks about until something breaks. But when it does, logs become your best friend.

Remember:

• Logging isn’t just for error tracking—it helps you monitor your program’s flow.

• Instead of guessing what went wrong, check the logs. The answer is usually right there.

Make sure to add logging to your code. You’ll thank yourself later!

Stay Connected - @syedamahamfahim 🐬

Dictionaries are built-in data structures of key value pairs. So you can look up a value—in constant time—using the corresponding key like so: dict[key] returns value. But what if the key doesn't exist in the dictionary? Well, that’s when you get a KeyError in Python.

There are few different ways you can handle such KeyError exceptions. You can handle them explicitly or use certain dictionary methods to set default values for missing keys. And in this tutorial, we’ll look at the following methods by coding a simple example:

• Using try-except blocks
• Using the dictionary method get()
• Using defaultdict from the collections module

Let's get started.

1. How to Handle KeyError Exceptions with try-except Blocks

Let's start by reviewing when KeyErrors occur and how we can handle these exceptions using try-except blocks.

When Does a KeyError Occur?

In Python, a KeyError exception occurs when you try to access the value corresponding to a key that doesn't exist. Consider the following books dictionary:

books = {
    "1984": "George Orwell",
    "To Kill a Mockingbird": "Harper Lee",
    "The Great Gatsby": "F. Scott Fitzgerald"
}

In the books dictionary, the keys are titles of the books and the values are the names of the authors. So you can look up the author of a book using the title as the key.

Now let's try to look up the author of a book that doesn't exist in the dictionary:

print(books["Brave New World"])

You’ll run into the following KeyError exception:

Traceback (most recent call last):
  File "/home/balapriya/keyerror/main.py", line 7, in <module>
    print(books["Brave New World"])
          ~~~~~^^^^^^^^^^^^^^^^^^^
KeyError: 'Brave New World'

How to Handle KeyError Exceptions

You can explicitly handle such KeyError exceptions using try-except blocks like so:

try:
    value = dictionary[key]
except KeyError:
    value = default_value

Here:

• We wrap the block of code that might raise an exception within the try block. In this case, we attempt to access the value associated with the key.
• If a KeyError is raised, we handle it in the except block by assigning a default value.

For the books dictionary example, we have:

books = {
    "1984": "George Orwell",
    "To Kill a Mockingbird": "Harper Lee",
    "The Great Gatsby": "F. Scott Fitzgerald"
}

try:
    # Try to access the key "Brave New World"
    author = books["Brave New World"]  
    # Catch the KeyError if the key does not exist
except KeyError:  
    author = "Book not found"  

print(author)

We try to look up the author of “Brave New World'' again. But this time the KeyError triggers the except block, and we get “Book not found”.

Output >>> Book not found

2. How to Handle KeyErrors Using the get() Dictionary Method

Another way to handle missing keys without raising an exception is using the get() dictionary method.

You can use the get() method on any valid dictionary object. The get() method returns the value for a given key if it exists – otherwise, it returns a specified default value. You can use it like so:

value = dictionary.get(key, default_value)

In essence, the get() method tries to get the value for the specified key:

• If the key exists, it returns the corresponding value.
• If the key does not exist, it returns the default_value.

Let's now use the get() method on the books dictionary. We pass in "Book not found" as the default value in the method call.

books = {
    "1984": "George Orwell",
    "To Kill a Mockingbird": "Harper Lee",
    "The Great Gatsby": "F. Scott Fitzgerald"
}

# Try to get the value for "Brave New World"
author = books.get("Brave New World", "Book not found")  
print(author)

As expected, you should get the following output:

Output >>> Book not found

Note: The get() method does not modify the original dictionary. If you also want to add the missing key with a default value, you can use the setdefault() method instead with the syntax dictionary.setdefault(key,default_value).

3. How to Use defaultdict from the collections Module

A (much) cleaner way to handle KeyErrors is using defaultdict from Python’s collections module. Defaultdict extends the capabilities of Python's built-in dictionary by allowing you to provide a default value for keys that haven't been explicitly set.

The defaultdict constructor takes a default factory function as an argument. This factory function is called without arguments to provide a default value for a non-existent key.

The syntax for creating a defaultdict is as follows:

from collections import defaultdict

# Syntax
defaultdict(default_factory)

Let's create a defaultdict from the books dictionary as shown:

from collections import defaultdict

books = {
    "1984": "George Orwell",
    "To Kill a Mockingbird": "Harper Lee",
    "The Great Gatsby": "F. Scott Fitzgerald"
}

books_default = defaultdict(lambda: "Book not found",books)  
# Access the key "Brave New World"
author = books_default["Brave New World"]  
print(author)

For the default factory function, we use a simple lambda function that returns the string "Book not found". This function is called whenever you try to access a key that's not present in the dictionary.

Running the above snippet should also give you:

Output >>> Book not found

Using defaultdict can be especially helpful when you need to dynamically access many keys.

Conclusion

And that's a wrap! I hope you learned how to handle KeyError exceptions in Python. Let's review what we learned:

• To explicitly handle a KeyError, you can wrap the dictionary access code with a try block, and catch the KeyError in the except block.
• Use the get() method to access the value of a key, with the option to return a default value if the key does not exist.
• You can initialize a defaultdict from the collections module with a factory function that returns the default value.

If you'd like to learn about exception handling in Python, read Python Try and Except Statements - How to Handle Exceptions in Python.

Just recently, my manager tasked me to create an automatic report. I designed the report to be simple. It included a few numbers from a database and some basic mathematical operations. I was excited to finally be able to show off my amazing Python skills to the company.

I finished and shipped the product. Everything was great. At least, until about two weeks later. My report began failing randomly due to a divide-by-zero error. Cue the laugh track.

My short story is absent details, but it should highlight the importance of handling edge cases and errors when composing programs. This report should have been an opportunity to show off my Python prowess. Yet, it turned into a bit of an embarrassing, fall-on-my-face moment.

So, let’s take a moment to learn the basics of error handling using Python’s standard library. I’m going to highlight some of the things you need to get started.

Before you start handling exceptions, you should have a good grasp of Python fundamentals. You’ll need to know why the exceptions are being thrown to deal with them!

Here's what we'll cover:

1. Try and Except Statements in Python
2. Conditional Execution with the Else Clause
3. Built-in Exceptions
4. Custom Exceptions
5. Performance Considerations

Try and Except Statements in Python

The try and except statements are the primary method of dealing with exceptions. They look something like this:

x = 0
try:
    print(5 / x)
except ZeroDivisionError:
    print("Something went wrong")

# Something went wrong

Let’s review the above code so we are on the same page:

1. Line 1 assigns the value 0 to a variable x
2. Lines 2 and 3 open a try clause and attempt to divide 5 by the variable x
3. Lines 4 and 5 open an except clause for any ZeroDivisionError and instruct the program to print a message should we try to divide anything by 0

You likely notice the issue. My variable x has the value 0, and I am trying to divide 5 by x. The best mathematicians in the world can’t divide by 0, and neither can Python. So, what happens?

If we do not handle the error, the program will immediately terminate upon trying to divide 5 by x. Since programs do not know what to do with exceptions without explicit instructions, we created the except clause on line 4 and provided the steps for the program to take in the event of dividing something by 0.

That’s the whole idea behind handling exceptions: you need to tell the program what to do when it has an error that it cannot simply ignore. Let’s look at how the try and except clauses work.

Breaking Down the Try Statement

Try and Except statements follow a pattern that allows you to reliably handle problems in your code. Let’s go over the pattern.

The first step that happens is, the code in the try clause attempts to execute.

After that, we have three possibilities:

No Errors in the Try Clause

If the code in the try clause executes without any errors, the program will:

1. Execute the try clause
2. Skip all except clauses
3. Continue running as normal

x = 1
try:
    print(5 / x)
except ZeroDivisionError:
    print("Something went wrong")

print("I am executing after the try clause!")

# 5.0
# I am executing after the try clause!

You can see that, in this modified example, there are no issues in the try clause (Lines 3 and 4). The code will execute, the except clause will be skipped, and the program will resume execution after the try and except statements conclude.

Errors in the Try Clause and the Exception is Specified

If the code in the try clause does throw an exception and the type of exception is specified after any except keyword, the program will:

1. Skip the remaining code in the try clause
2. Execute any code in the matching except clause
3. Continue running as normal

x = 0
try:
    print(5 / x)
except:
    print("Something went wrong")

print("I am executing after the try clause!")

# Something went wrong
# I am executing after the try clause!

Back to my first example, I changed our variable x back to the value 0 and tried to divide 5 by x. This produces a ZeroDivisionError. Since my except statement specifies this type of exception, the code in that clause executes before the program resumes running as normal.

Errors in the Try Clause and the Exception is not Specified

Finally, if the program throws an exception in the try clause, but the exception is not specified in any except statements, then the program will:

1. Stop the execution of the program and throw the error

x = 0
try:
    print(5 / y)
except:
    print("Something went wrong")

print("I am executing after the try clause!")

# NameError: name 'y' is not defined

In the above example, I’m trying to divide 5 by the variable y, which does not exist. This raises a NameError. I don’t specify to the program how to handle NameErrors, so the only option is to terminate itself.

Cleaning Up

Try and except are the main tools in handling errors, but an optional clause that you can use is named finally. The finally clause will always execute, whether there is an error or not.

x = 0
try:
    print(5 / x)
except ZeroDivisionError:
    print("I am the except clause!")
finally:
    print("I am the finally clause!")

print("I am executing after the try clause!")

# I am the except clause!
# I am the finally clause!
# I am executing after the try clause!

In this example, I have created our favorite ZeroDivisionError. You can see that the order of execution is:

1. The except clause
2. The finally clause
3. Any code afterwards

Once we fix the try clause to no longer throw an error, you’ll still see a similar order of execution. Instead of the except clause running, the try clause will execute.

x = 1
try:
    print(5 / x)
except ZeroDivisionError:
    print("I am the except clause!")
finally:
    print("I am the finally clause!")

print("I am executing after the try clause!")

# 5.0
# I am the finally clause!
# I am executing after the try clause!

You’ll notice that the only difference is that try clause is successfully executed because there are no exceptions thrown. The finally clause and the code afterwards execute as you would expect.

This is useful for some cases when you want to clean up no matter the outcome of your try and except clauses. Actions such as closing connections, closing files, and logging are great candidates for the finally clause.

Conditional Execution with the Else Clause

The other optional clause is the else clause. The else clause is simple: if the code in the try clause executes without throwing an error, then the code in the else clause will also execute.

x = 1
try:
    print(5 / x)
except ZeroDivisionError:
    print("I am the except clause!")
else:
    print("I am the else clause!")
finally:
    print("I am the finally clause!")

print("I am executing after the try clause!")

# 5.0
# I am the else clause!
# I am the finally clause!
# I am executing after the try clause!

The order of execution for this example is:

1. The try clause
2. The else clause
3. The finally clause
4. Any code afterwards

If we were to experience an exception or error in the try clause, the else clause would be ignored.

x = 0
try:
    print(5 / x)
except ZeroDivisionError:
    print("I am the except clause!")
else:
    print("I am the else clause!")
finally:
    print("I am the finally clause!")

print("I am executing after the try clause!")

# I am the except clause!
# I am the finally clause!
# I am executing after the try clause!

Built-in Exceptions

You’ve seen me write about two different named exceptions so far: NameError and ZeroDivisionError. What if I needed other exceptions?

There is an entire list of Python’s exceptions that come with the standard library. These will probably suit almost every need that you have in handling any errors or exceptions.

Here are just a few that might be important:

• KeyError – A key cannot be found in a dictionary
• IndexError – The index is out-of-bounds on an iterable object
• TypeError – A function or operation was used on the wrong type of object
• OSError – General operating system errors

There are a whole lot more, which can be found in the Python documentation. I encourage to take a look. Not only will you be better at handling errors, but you will also explore what actually can go wrong with your Python programs.

Custom Exceptions

If you need extended functionality, you can also define custom exceptions.

class ForError(Exception):
    def __init__(self, message):
        self.message = message

    def foo(self):
        print("bar")

In the above example, I create a new class and extend it from the Exception class. Now, I can write custom functionality and treat this exception as any other object.

try:
    raise FooError("This is a test error")
except FooError as e:
    e.foo()

# bar

Here, I raise my new FooError on purpose. I catch the FooError and give it an alias of e. Now, I can access my foo() method that I built into the class that I created.

This opens a whole plethora of possibilities when dealing with errors. Custom logging, more in-depth tracking, or whatever else you need can all be coded and created.

Performance Considerations

Now that you understand the basics of try, except, and exception objects, you can start considering using them in your code to gracefully handle errors. Are there any considerable impacts to code performance, though?

The short answer is no. With the release of Python 3.11, there is practically no speed reduction from using try and except statements when there are no thrown exceptions.

Catching errors did cause some slowdowns. But generally, catching these errors is better than having the entire program crash and burn.

In earlier versions of Python, using try and except clauses did cause some extra execution time. Keep this in mind if you’re not up to date.

To Recap

Thank you for reading this far. Your future self and customers will thank you for your error handling.

We went over the try, except, else, and finally clauses and their execution order and under what circumstances they are executed. We also reviewed the basics of creating custom exceptions.

The most important thing to remember is that the try and except clauses are the primary ways to catch errors, and you should be using them whenever you have risky, error-prone code.

Also, keep in mind that catching errors will make your code more resilient, and make you look like a much better coder.

In this article, we'll explore practical and effective strategies for handling errors in React applications. We'll cover various types of errors, from simple runtime errors to asynchronous errors, and discuss how to communicate these errors to users in a clear and friendly manner.

Table of Contents

1. Different Types of React Errors
   – Syntax errors
   – Reference errors
   – Type errors
   – Component lifecycle errors
2. How to Implement Global Error Handling
   – Window error event
   – Unhandled promise rejections
3. How to Communicate Errors to Users
4. How to Handle Asynchronous Errors
5. How to Log Errors for Debugging
6. Conclusion

Different Types of React Errors

Syntax Errors:

Syntax errors occur when there is a mistake in the structure of your code. They are typically caused by typos, missing or misplaced characters, or incorrect usage of programming language elements. These errors prevent the code from being parsed or compiled correctly, and as a result, the program cannot run.

Here's a breakdown of some common scenarios that lead to syntax errors:

Mismatched Braces, Parentheses, or Brackets:

// Incorrect
function myFunction() {
  if (true) {
    console.log('Hello World';
  }
}

// Correct
function myFunction() {
  if (true) {
    console.log('Hello World');
  }
}

In this example, a syntax error occurs because there is a missing closing parenthesis in the console.log statement.

Missing Semicolons:

// Incorrect
const greeting = 'Hello World'
console.log(greeting)

// Correct
const greeting = 'Hello World';
console.log(greeting);

JavaScript uses semicolons to separate statements. Omitting them can lead to syntax errors.

Typos and Misspelled Keywords:

// Incorrect
funtion myFunction() {
  console.log('Hello World');
}

// Correct
function myFunction() {
  console.log('Hello World');
}

Here, a syntax error occurs because the keyword function is misspelled as funtion.

Unexpected Tokens:

// Incorrect
const numbers = [1, 2, 3]
numbers.forEach(number => console.log(number))

// Correct
const numbers = [1, 2, 3];
numbers.forEach(number => console.log(number));

This error might occur due to missing or extra characters that make the code structure unexpected.

To fix syntax errors, carefully review your code, paying close attention to the error messages provided by the development environment or browser console. These messages often indicate the line and position of the error, helping you identify and correct the mistake.

Remember that even a small syntax error can have a significant impact on your code's functionality, so it's crucial to address them promptly.

// Corrected syntax
function MyComponent() {
  return (
    <div>
      <p>Hello World</p>
    </div>
  );
}

Reference Errors:

Reference errors occur in a program when you try to use a variable or function that has not been defined. Essentially, the interpreter or compiler cannot find the reference to the variable or function in the current scope, leading to a runtime error.

Here are a few common scenarios that result in reference errors:

Undefined Variables:

// Incorrect
console.log(myVariable);

// Correct
const myVariable = 'Hello World';
console.log(myVariable);

In this example, a reference error occurs because myVariable is used before it's declared. Declaring the variable before using it resolves the issue.

Misspelled Variables or Functions:

// Incorrect
const greeting = 'Hello World';
console.log(greting);

// Correct
const greeting = 'Hello World';
console.log(greeting);

A reference error can occur if there's a typo or misspelling in the variable or function name. In this case, correcting the spelling resolves the issue.

Scoping Issues:

// Incorrect
function myFunction() {
  if (true) {
    const message = 'Hello World';
  }
  console.log(message);
}

// Correct
function myFunction() {
  let message;
  if (true) {
    message = 'Hello World';
  }
  console.log(message);
}

Here, a reference error occurs because message is defined within the scope of the if block and is not accessible outside of it. Moving the variable declaration to a broader scope fixes the issue.

Accessing Properties of Undefined Objects:

// Incorrect
const person = { name: 'John' };
console.log(person.age);

// Correct
const person = { name: 'John' };
console.log(person.age || 'Age not available');

If you try to access a property of an object that is undefined, a reference error will occur. Using conditional checks or ensuring the object is properly initialized can prevent such errors.

To resolve reference errors, carefully check your code for the correct spelling and declaration of variables and functions. Make sure that variables are declared in the appropriate scope and that objects are properly initialized before accessing their properties. Pay attention to error messages in the console, as they often provide valuable information about the location and nature of the reference error.

// Corrected reference
function MyComponent() {
  const undefinedVariable = "I am defined now!";
  return (
    <div>
      <p>{undefinedVariable}</p>
    </div>
  );
}

Type Errors:

Type errors occur in a program when an operation is performed on a value of an incorrect data type.

In JavaScript, which is a dynamically typed language, the data type of a variable is not explicitly declared, and it can change during runtime.

Type errors usually happen when an operation is attempted on a value that doesn't support that particular operation.

Here are some common scenarios that lead to type errors:

Incorrect Data Type for an Operation:

// Incorrect
const number = 42;
const result = number.toUpperCase();

// Correct
const number = 42;
const result = String(number).toUpperCase();

Here, a type error occurs because toUpperCase() is a string method, and you can't directly apply it to a number. Converting the number to a string before applying the method resolves the issue.

Mismatched Data Types in Arithmetic Operations:

// Incorrect
const result = 'Hello' * 5;

// Correct
const result = 'Hello'.repeat(5);

Attempting to perform a multiplication operation on a string and a number results in a type error. Using the appropriate string method fixes the issue.

Undefined or Null Values in Operations:

// Incorrect
const value = undefined;
const result = value.toLowerCase();

// Correct
const value = undefined;
const result = String(value).toLowerCase();

Trying to perform an operation on an undefined value can lead to a type error. Converting the value to a string before the operation resolves the error.

Incorrect Usage of Functions:

// Incorrect
const number = 42;
const result = String.toUpperCase(number);

// Correct
const number = 42;
const result = String(number).toUpperCase();

Using a function incorrectly, such as trying to call toUpperCase() on the String constructor, results in a type error. The correct usage involves creating a string instance first.

To address type errors, it's essential to understand the data types of your variables and the operations you are performing. You can use functions or methods to explicitly convert values to the desired data type before performing operations. Pay attention to error messages in the console, as they often indicate the nature and location of the type error in your code.

Component Lifecycle Errors:

Component Lifecycle Errors in React occur when there are issues related to the lifecycle methods of a React component.

React components go through various phases during their lifecycle, and each phase is associated with specific methods. If these methods are not used correctly or if there are errors within them, it can lead to unexpected behavior and errors in your React application.

The React component lifecycle consists of three main phases:

Mounting Phase:

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

Updating Phase:

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

Unmounting Phase:

• componentWillUnmount()

Here are some common scenarios that may result in Component Lifecycle Errors:

Using setState Improperly:

// Incorrect
componentDidMount() {
  this.setState({ data: fetchData() });
}

Using setState directly inside componentDidMount without considering asynchronous behavior can lead to issues. It's recommended to use a callback function to ensure that setState is called after the data is fetched.

// Correct
componentDidMount() {
  fetchData().then(data => {
    this.setState({ data });
  });
}

Not Handling Asynchronous Operations Correctly:

// Incorrect
componentDidUpdate() {
  fetchData().then(data => {
    this.setState({ data });
  });
}

Performing asynchronous operations directly inside componentDidUpdate can lead to infinite loops. It's crucial to conditionally check if an update is needed and handle asynchronous operations appropriately.

// Correct
componentDidUpdate(prevProps, prevState) {
  if (this.props.someValue !== prevProps.someValue) {
    fetchData().then(data => {
      this.setState({ data });
    });
  }
}

Not Cleaning Up Resources in componentWillUnmount:

// Incorrect
componentWillUnmount() {
  clearInterval(this.intervalId);
}

Forgetting to clean up resources, such as intervals or event listeners, in the componentWillUnmount method can lead to memory leaks. Always make sure to clear any resources to avoid unexpected behavior.

// Correct
componentWillUnmount() {
  clearInterval(this.intervalId);
}

Understanding and properly implementing React component lifecycle methods is crucial to avoid errors and ensure that your components behave as expected throughout their lifecycle. Always refer to the official React documentation for the latest guidelines on component lifecycles.

How to Implement Global Error Handling

1. Window Error Event:

The window.onerror event handler in JavaScript allows you to capture and handle unhandled errors at the global level in a web application. This event is triggered whenever an uncaught exception occurs, and it provides a way to log or handle these errors centrally. It's a powerful tool for global error handling and debugging.

Here's how you can use window.onerror to implement global error handling:

window.onerror = function (message, source, lineno, colno, error) {
  // Log the error details or send them to a logging service
  console.error('Error:', message);
  console.error('Source:', source);
  console.error('Line Number:', lineno);
  console.error('Column Number:', colno);
  console.error('Error Object:', error);

  // Return true to prevent the default browser error handling
  return true;
};

Let's break down the parameters of the window.onerror callback function:

• message: A string containing the error message.
• source: A string representing the URL of the script where the error occurred.
• lineno: An integer indicating the line number where the error occurred.
• colno: An integer indicating the column number where the error occurred.
• error: An error object containing additional information about the error (if available).

Inside the window.onerror handler, you can perform various actions, such as logging the error details to a server, displaying a user-friendly error message, or performing additional cleanup. The return true; statement is used to prevent the default browser error handling, allowing you to handle errors in a custom way.

Here's an example of using window.onerror to log errors to a remote server:

window.onerror = function (message, source, lineno, colno, error) {
  // Log the error details to a remote server
  const errorData = {
    message,
    source,
    lineno,
    colno,
    error: error ? error.stack : null,
  };

  // Send errorData to a logging service (e.g., via an HTTP request)

  // Return true to prevent the default browser error handling
  return true;
};

Keep in mind that the use of window.onerror has some limitations, and it may not capture all types of errors, such as syntax errors or errors in asynchronous code.

For a more comprehensive error handling solution, consider using tools like try...catch blocks, error boundary components in React, or specialized error tracking services.

2. Unhandled Promise Rejections:

When working with asynchronous code, particularly with promises in JavaScript, it's essential to handle errors to prevent unhandled promise rejections.

Unhandled promise rejections occur when a promise is rejected, but there is no corresponding .catch() or await to handle the rejection. This can lead to unexpected behavior and can make it challenging to debug issues in your application.

To implement global error handling for unhandled promise rejections, you can use the unhandledrejection event. This event is triggered whenever a promise is rejected, but there is no associated rejection handler.

Here's an example of how you can set up global error handling for unhandled promise rejections:

// Setup global error handling for Unhandled Promise Rejections
process.on('unhandledRejection', (reason, promise) => {
  console.error('Unhandled Rejection at:', promise, 'reason:', reason);
  // Additional logging or error handling can be added here
});

// Example of a Promise that is not handled
const unhandledPromise = new Promise((resolve, reject) => {
  reject(new Error('This Promise is not handled'));
});

// Uncomment the line below to see the global error handling in action
// unhandledPromise.then(result => console.log(result));

// Example of a Promise with proper error handling
const handledPromise = new Promise((resolve, reject) => {
  reject(new Error('This Promise is handled'));
});

handledPromise
  .then(result => console.log(result))
  .catch(error => console.error('Error:', error));

In this example:

The unhandledRejection event is registered on the process object. This event will be triggered whenever a promise is rejected without a corresponding rejection handler.

An example of an unhandled promise (unhandledPromise) is created. Uncommenting the line that uses this promise without a .catch() will trigger the unhandledRejection event.

An example of a properly handled promise (handledPromise) is created, and it includes a .catch() to handle any rejection.

When a promise is rejected without being handled, the unhandledRejection event is triggered, and it logs information about the rejected promise, such as the promise itself and the reason for rejection.

This approach allows you to catch unhandled promise rejections globally in your application, making it easier to identify and address issues related to asynchronous code. Always remember to include proper error handling for promises to ensure a robust and reliable application.

How to Communicate Errors to Users

1. User-Friendly Error Messages:

When an error occurs, it's essential to communicate the issue to the user in a way that is easy to understand. Instead of displaying technical details, provide a simple and clear message.

function ErrorComponent() {
  return <div>Oops! Something went wrong. Please try again later.</div>;
}

2. Error Boundaries:

React's error boundaries are components that catch JavaScript errors anywhere in their child component tree. They enable you to handle errors gracefully and display a fallback UI to users.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, errorInfo) {
    logErrorToService(error, errorInfo);
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      return <ErrorComponent />;
    }
    return this.props.children;
  }
}

Wrap components that might throw errors with the ErrorBoundary component to gracefully handle errors.

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

How to Handle Asynchronous Errors

1. Try-Catch with Async/Await:

When working with asynchronous code, using try and catch blocks with async/await can help handle errors more effectively.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error; // Re-throw the error to propagate it further
  }
}

2. Promise.catch():

When dealing with promises, using the .catch() method allows you to handle errors in a concise manner.

fetch('https://api.example.com/data')
  .then((response) => response.json())
  .then((data) => {
    // Process the data
  })
  .catch((error) => {
    console.error('Error fetching data:', error);
    // Display a user-friendly error message
    alert('An error occurred while fetching data.');
  });

How to Log Errors for Debugging

Logging errors is crucial for debugging and improving the stability of your React application. Use browser developer tools or external logging services to capture and analyze errors.

function logErrorToService(error, errorInfo) {
  // Send the error to a logging service (e.g., Sentry, Loggly)
  // Include additional information like errorInfo for better debugging
  // loggingService.logError(error, errorInfo);
  console.error('Logged error:', error, errorInfo);
}

Conclusion

In conclusion, effective error handling in React applications involves a combination of preventive measures, global error handling, user-friendly communication, and proper debugging practices.

By understanding different types of errors and implementing appropriate strategies, you can enhance the reliability and user experience of your React applications.

Remember, simplicity in error messages and clear communication with users go a long way in building trust and satisfaction. Always prioritize user experience when handling errors in your React projects. And make sure you stay updated with the latest React features and best practices to ensure the resilience and stability of your applications.

And even though errors and bugs are a part of life, they can stress you out and decrease your productivity. Fortunately, you can limit the number of pests in your code by taking proactive measures to prevent and fix them.

In this article, you will learn how best to utilize exception filters to limit disruptions in your code implementations.

What Are Exception Filters?

Exception filters are constructs of a programming language that help you handle exceptions or errors found in services or controller classes. Using these filters improves the efficiency of your codebase and makes errors more traceable, which helps you resolve them.

What are Exception Filters in Nest.js?

Nest.js has an inbuilt exception filter interface that you import from the @nestjs/common package. This interface gives you precise information about exceptions you may encounter so that you can know how to fix them.

Some built-in exception filters include NotFoundException, UnauthorizedException, and RequestTimeOutException, among others.

How to Create a Custom Exception Filter

To create a custom exception filter class, you define it with a @Catch decorator that takes in the type of exception the filter should catch. This class then implements the ExceptionFilter interface. This way you will have access to the catch method that the interface provides.

NestJS allows you to create your own exception filters so you can define what sort of information it should return.

@Catch(HttpException)
export class TestExceptionFilter implements ExceptionFilter {
  catch(exception: HttpException, host: ArgumentsHost) {
    const ctx = host.switchToHttp();
    const response = ctx.getResponse<Response>();
    const request = ctx.getRequest<Request>();
    const status = exception.getStatus();

    response
      .status(status)
      .json({
        statusCode: status,
        timestamp: new Date().toISOString(),
        path: request.url,
      });
  }
}

As you can see above, the catch method takes in two argument inputs: the exception:HttpException and the host:argumentsHost.

HttpException is the exception thrown when an HTTP request fails and returns the appropriate Error Message with a status code as a response to the client.

The argumentsHost parameter provides information about the current request and response cycle. Here the code extracts the Response and Request objects from the ArgumentsHost object using the switchToHttp method. It then calls the getStatus method from the HttpException object in order to retrieve the HTTP status code of the error.

A JSON object gets returned. It contains the status code, the error timestamp, and the request URL, setting the HTTP response status code to be the error status code.

Another exciting thing to note is that you can modify the status code and error message of existing exception filters like NotFoundException so that they display your own custom error message and status code. Here is an illustration below:

export class NotFoundException extends HttpException {
  constructor(message: string) {
    super(message || 'Not Found', HttpStatus.NOT_FOUND);
  }
}

The example above shows that the NotFoundException class was modified to accept a message parameter in the constructor method or give a default value of 'Not Found'.

By doing this you are now able to customize an error message for your NotFoundException class and return a 404 status code.

How to Bind Exception Filters in Nest.js

You might be wondering how you can implement the custom or modified exception you've created for your application. Well, you use something called binding.

There are several ways in which you can bind exception filters to your application. Here are three major ways you can do it:

1. Global Scope
2. Controller Scope
3. Method Scope

Binding using Global Scope

Just like the name “Global” implies, it covers the entirety of a thing – in this case the application. The custom exception filter is bonded to the entirety of your web application by using the useGlobalFilters() function. An instance of your custom exception filter gets passed in before starting up the server.

Here is an example of what that looks like:

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useGlobalFilters(new TestExceptionFilter());
  await app.listen(3000);
}
bootstrap();

If you bind the exception filter to the global scope, it means that any exceptions of type HttpException thrown from any controller or method within the application will be handled by the TestExceptionFilter.

Binding using Controller Scope

If you want to handle an exception that not only covers the specific methods in your application but also the entire controller with the methods in it, you can the @UseFilters to bind the custom exception to the controller. Check out the below is example:

@UseFilters(TestExceptionFilter)
@Controller('users')
export class UsersController {
  @Get()
  async findUsers() {
    // ...
  }
}

In this example, the custom exception filter is bonded to the controller by putting it ahead of the @Controller decorator. This way it handles any error that comes from the routes in this controller.

Binding using Method Scope

In this form of binding, you make use of the @UseFilters decorator to apply the Custom ExceptionFilter you defined to a method in your application. Here is an example:

@Controller()
export class UsersController {
  @Get()
  @UseFilters(TestExceptionFilter)
  async findUsers() {
    // ...
  }
}

In this example, you're using the @UseFilters decorator to bind the TestExceptionFilter exception filter to the findUsers method. This means that if any exception occurs within the findUsers() method, the TestExceptionFilter will catch and handle it.

Debugging Made Easier

In this tutorial, you learned about exception filters in Nest.js, and how to create custom exception filters. You also saw some different ways in which you can implement them in your applications.

All the methods discussed are good ways to handle exceptions. By implementing these techniques, you can ensure smoother application performance and provide a better user experience.

If you enjoyed reading this article, you can share and follow me on Twitter and Linkedin.

Python comes with a built-in try…except syntax with which you can handle errors and stop them from interrupting the running of your program.

In this article, you’ll learn how to use that try…except syntax to handle exceptions in your code so they don’t stop your program from running.

What We'll Cover

• What is an Exception?
• The try…except Syntax
• How to Handle Exceptions with try…except
• How to Print an Exception with try…except
• How to Print the Exception Name
• Conclusion

What is an Exception?

In Python, an exception is an error object. It is an error that occurs during the execution of your program and stops it from running – subsequently displaying an error message.

When an exception occurs, Python creates an exception object which contains the type of the error and the line it affects.

Python has many built-in exceptions such as IndexError, NameError, TypeError, ValueError, ZeroDivisionError KeyError, and many more.

The try…except Syntax

Instead of allowing these exceptions to stop your program from running, you can put the code you want to run in a try block and handle the exception in the except block.

The basic syntax of try…except looks like this:

try:
  # code to run
except:
  # handle error

How to Handle Exceptions with try…except

You can handle each of the exceptions mentioned in this article with try…except. In fact, you can handle all the exceptions in Python with try…except.

For example, if you have a large program and you don’t know whether an identifier exists or not, you can execute what you want to do with the identifier in a try block and handle a possible error in the except block:

try:
  print("Here's variable x:", x)
except:
  print("An error occured") # An error occured

You can see that the except ran because there’s no variable called x in the code.

Keep reading. Because I will show you how to make those errors look better by showing you how to handle exceptions gracefully.

How to Print an Exception with try…except

But what if you want to print the exact exception that occurred? You can do this by assigning the Exception to a variable right in front of the except keyword.

When you do this and print the Exception to the terminal, it is the value of the Exception that you get.

This is how I printed the ZeroDivisionError exception to the terminal:

try:
    res = 190 / 0
except Exception as error:
    # handle the exception
    print("An exception occurred:", error) # An exception occurred: division by zero

And this is how I printed the NameError exception too:

try:
  print("Here's variable x:", x)
except Exception as error:
  print("An error occurred:", error) # An error occurred: name 'x' is not defined

You can follow this pattern to print any exception to the terminal.

How to Print the Exception Name

What if you want to get the exact exception name and print it to the terminal? That’s possible too. All you need to do is use the type() function to get the type of the exception and then use the __name__ attribute to get the name of the exception.

This is how I modified the ZeroDivisionError example to print the exact exception:

try:
    res = 190 / 0
except Exception as error:
    # handle the exception
    print("An exception occurred:", type(error).__name__) # An exception occurred: ZeroDivisionError

And this is how I modified the other example to print the NameError example:

try:
  print("Here's variable x:", x)
except Exception as error:
  print("An error occurred:", type(error).__name__) # An error occurred: NameError

Normally, when you encounter an Exception such as NameError and ZeroDivisionError, for example, you get the error in the terminal this way:

You can combine the type() function and that error variable to make the exception look better:

try:
  print("Here's variable x:", x)
except Exception as error:
  print("An error occurred:", type(error).__name__, "–", error) # An error occurred: NameError – name 'x' is not defined

try:
    res = 190 / 0
except Exception as error:
    # handle the exception
    print("An exception occurred:", type(error).__name__, "–", error) # An exception occurred: ZeroDivisionError – division by zero

Conclusion

As shown in this article, the try…except syntax is a great way to handle errors and prevent your program from stopping during execution.

You can even print that Exception to the terminal by assigning the error to a variable, and get the exact type of the Exception with the type() function.

Happy coding!

In this tutorial, we'll cover some of the most common errors in Python and how to fix them.

Syntax Errors in Python

Syntax errors occur when you have a typo or other mistake in your code that causes it to be invalid syntax. These errors are usually caught by Python's interpreter when you try to run the code.

Here are some tips for avoiding syntax errors:

• Double-check your code for typos or other mistakes before running it.

• Use a code editor that supports syntax highlighting to help you catch syntax errors.

• Read the error message carefully to determine the location of the error.

Example:

if x = 10:
    print("x is equal to 10")

In this example, we are trying to assign the value 10 to the variable x using the assignment operator (=) inside an if statement.

But the correct syntax for comparing values in an if statement is to use the comparison operator (==).

So here's how you fix this one:

if x == 10:
    print("x is equal to 10")

Indentation Errors in Python

One of the most common errors in Python is indentation errors. Unlike many other programming languages, Python uses whitespace to indicate blocks of code, so proper indentation is critical.

Here are a few rules to keep in mind when it comes to indentation in Python:

• Use four spaces for each level of indentation.

• Don't mix tabs and spaces for indentation.

• Make sure your indentation is consistent throughout your code.

To avoid indentation errors, it's a good idea to use a code editor that supports automatic indentation, such as PyCharm or Visual Studio Code.

Example:

for i in range(10):
print(i)

In this example, the code inside the for loop is not indented correctly.

Fix:

for i in range(10):
    print(i)

Name Errors in Python

Name errors occur when you try to use a variable or function that hasn't been defined. For example, if you try to print the value of a variable that hasn't been assigned a value yet, you'll get a name error.

Here are some tips for avoiding name errors:

• Make sure you've defined all variables and functions before using them.

• Double-check the spelling and capitalization of your variable and function names.

• Use Python's built-in debugging tools, such as print statements, to help you track down name errors.

Example:

my_variable = 5
print(my_vairable)

In this example, we misspelled the variable name my_variable as my_vairable.

Fix:

my_variable = 5
print(my_variable)

Type Errors in Python

Another common error in Python is type errors. Type errors occur when you try to perform an operation on data of the wrong type. For example, you might try to add a string and a number, or you might try to access an attribute of an object that doesn't exist.

Here are some tips for avoiding type errors:

• Use type annotations in your code to make it clear what types of data you expect.

• Use Python's built-in type-checking tools, such as the typing module and the mypy tool.

• Write unit tests to ensure that your code handles different types of data correctly.

Example:

x = "5"
y = 10
result = x + y

In this example, we are trying to concatenate a string and an integer, which is not possible.

Fix:

x = "5"
y = 10
result = int(x) + y

Here, we convert the string to an integer using the int() function before performing the addition.

Index Errors in Python

Index errors occur when you try to access an item in a list or other sequence using an index that is out of range. For example, if you try to access the fifth item in a list that only has four items, you'll get an index error.

Here are some tips for avoiding index errors:

• Make sure you're using the correct index values for your sequence.

• Use Python's built-in functions, such as len, to determine the length of your sequence before trying to access items in it.

• Use exception handling, such as try and except blocks, to handle index errors gracefully.

Example:

my_list = [1, 2, 3, 4]
print(my_list[5])

In this example, we are trying to access an item at index 5, which is outside the range of the list.

Fix:

my_list = [1, 2, 3, 4]
print(my_list[3])

Here, we access the item at index 3, which is within the range of the list.

Key Errors in Python

Key errors occur when you try to access a dictionary using a key that doesn't exist. For example, if you try to access the value associated with a key that hasn't been defined in a dictionary, you'll get a key error.

Here are some tips for avoiding key errors:

• Make sure you're using the correct keys for your dictionary.

• Use Python's built-in in operator to check whether a key exists in a dictionary before trying to access it.

• Use exception handling, such as try and except blocks, to handle key errors gracefully.

Example:

my_dict = {"name": "John", "age": 25}
print(my_dict["gender"])

In this example, we are trying to access the value for the key "gender", which does not exist in the dictionary.

Fix:

my_dict = {"name": "John", "age": 25}
print(my_dict.get("gender", "Key not found"))

Here, we use the get() method to access the value for the key "gender". The second argument of the get() method specifies the default value to return if the key does not exist.

Attribute Errors in Python

Attribute errors occur when you try to access an attribute of an object that doesn't exist, or when you try to access an attribute in the wrong way.

There are several different types of attributes in Python:

• Instance attributes: These are attributes that belong to a specific instance of a class.

• Class attributes: These are attributes that belong to a class rather than an instance.

• Static attributes: These are attributes that belong to a class, but can be accessed without creating an instance of the class.

To avoid attribute errors, it's important to understand the different types of attributes and how they work. You should also make sure that you're accessing attributes in the correct way, and that you're not trying to access attributes that don't exist.

Example:

my_list = [1, 2, 3, 4]
my_list.append(5)
my_list.add(6)

In this example, we are trying to add an item to the list using the add() method, which does not exist for lists.

Fix:

my_list = [1, 2, 3, 4]
my_list.append(5)

Here, we use the append() method to add an item to the list.

General Tips

Here are a few general tips for avoiding common errors in Python:

• Use good coding practices, such as commenting your code and following the DRY (Don't Repeat Yourself) principle.

• Write unit tests to catch errors before they make it into your production code.

• Read the documentation for the modules and functions you're using to make sure you're using them correctly.

Conclusion

Python is a powerful language with many features, but like any programming language, it can be prone to errors.

In this article, we covered some of the most common errors in Python and how to fix them. By understanding these errors and how to fix them, you can become a more confident and effective Python programmer.

Let’s connect on Twitter and LinkedIn.

If you want to be an efficient programmer, you'll want to cultivate your ability to debug code. It's one of the main skills you'll need as a software developer or programmer. This means you need to learn all about errors, too. 🤷

Errors can come in many forms – from as little as an omission of a semicolon to as huge as a crashed database. They're all part of the bittersweet experience of programming.

Regardless of your stage in programming, you most likely will come across at least one type of error while coding. The error could come up during writing code, running it, or even testing it. And there's usually a specific remedy to each error. This implies that not all errors are handled or solved the same way.

Errors in programming are also referred to as bugs. These bugs prevent your program from doing what it's instructed. Once you have a grasp of common errors, you'll be able to figure out the right treatment for the error you're experiencing.

To debug errors in your source code, you'll need to understand:

• The sources of the errors in your code – What exactly is the cause of the errors displaying?
• The types of errors –Now that I have an error, what type is it? What should I do to clear these red lines off my screen?

This article will focus on how to answer these questions.

Where Do Errors Come From in Coding?

The first step in finding a solution is knowing exactly the source of the problem. This will guide you in suggesting or building a solution. When writing your code in whatever programming language you use, errors can occur due to different factors.

The main sources of error include:

Human Errors

Even though Artificial Intelligence plays a larger and larger role in many operations, the fact remains that humans still write source code.

Errors caused by omission, knowledge gaps, or the lack of proper structure come from the developer.

When a developer lacks the technical knowledge of the syntax of a particular language, there's bound to be errors in the source code. Or if they mean one thing and write another in code, the conflict in logic will always result in an error.

So, before you venture into coding in any language, make sure you understand the structure behind it and the rules that govern its programs. This will help you write fewer errors into your code that you then have to debug.

Machine Errors

For issues such as low memory, little storage space, and slow CPU processing speed, the machine also plays a role in causing errors. In fact a machine with a slow memory can cause runtime errors (errors due to slow code execution).

When getting a computer, if you're able, make sure to get one that matches up to the tasks you'll send its way. You should also use cloud storage and other cloud operations to reduce the risks of errors caused by your machine.

Procedural Errors

Solving a problem requires following certain methods. Programming has its underlying methodology which you should follow whenever possible.

This is why standard bodies exist, such as the World Wide Web consortium. It ensures that certain standards are followed when developing programs.

Errors can occur when you ignore the standard methods entirely and try to maneuver your own way. Such code may not go beyond your machine as it may not be production worthy.

Study the procedures for building and operating the solution you are coding and try to follow them.

Types of Coding Errors

Errors can occur regardless of your skill in programming. Your coding prowess is displayed when you can confidently decipher the error message and figure out what type of error occurred.

Many programming languages have similar structures, especially Object Oriented Programming languages (such as Python and JavaScript). These similarities in structure means that they also have similar error patterns.

In programming, the most common errors are:

Syntax Errors

The word "syntax" simply means arrangement. In programming, syntax is the arrangement of the code following a set of rules or patterns.

Just like in the English language where the letters are arranged from A - Z, programming languages also have their syntax you'll need to follow so the program runs seamlessly.

When you're writing in English, for example, if you don't follow the grammar and syntax rules of the language, your words won't make a lot of sense. The same is true in programming: if you don't adhere to the syntax rules of the programming language, you'll get a Syntax Error.

Therefore, a syntax error is that error caused by disobeying the rules guiding a particular language. And the error message that pops up prevents your program from running.

Syntax Errors can be caused by various factors such as incorrect spelling, omitted punctuation, wrong use of quotes (" "), incorrect declaration of variables and values, and more.

As small as these errors may seem, they can break your source code if not properly solved. When any of these syntax errors occur, your compiler responds in two ways:

• It highlights the code line where the error has occurred: This will help you know the exact spot to check for your mistake.
• It gives at least a one sentence explanation of the error type.

In most cases, the compiler will indicate that it is a "Syntax Error" and sometimes point to what was omitted, included, or misplaced. Here's an example:

// importing the required dependencies and components
import { BrowserRouter as Router, Route, Switch,Redirect } from 'react-router-dom';
import './App.css';
import Home from './components/Home';
import About from './components/About';
import Projects from './components/Projects';
import Contact from './components/Contact';
import Nav from './components/Nav';


function App() {
  return (
    <div className='App'>
      <Router>
        {/* <Nav /> */}
        <Switch>
          <Route exact path='/'  component={Home}/>
          <Route  path='/About'  component={About} />
          <Route path='/Projects' component={Projects} />
          <Route path='/Contact'  component={Contact} />
          <Redirect to ="/" />

        </Switch>
      </Router>  
    </div>

The above snippet is from a React.js project. According to React syntax, if you declare a component you must use it, otherwise it'll throw a syntax error as seen in the screenshot below:

Syntax error

In the example, the Nav component was declared in the set of import statements but it wasn't called in the routing statement. Because of this, it displays an error message in the terminal.

Beginners in programming often encounter syntax errors as they're learning – especially if you're juggling between two different languages at the same time. With consistent practice, you can get better at writing your source code that complies with the syntax rules of the language you're using.

Logic or Semantic Errors

Another word for logic is reasoning. Writing source code for any program requires a lot of reasoning. Remember that coding is a means of providing solutions to problems. So your solution must follow the logic that guides it.

Also referred to as a semantic error, a logic error is an error that occurs when a program outputs something different from what was intended. Whenever your program behaves in a way that's different from what you outlined it to do, you have encountered a logical error.

import pandas as pd
import numpy as np
a = 5
b ="10"
print(c=a+b)

In the above example, it is clear that the compiler couldn't add a string and a number because the number in the string was not implicitly converted to the int datatype.

You can also see that there is a syntax error in this program as well when you look at the print() statement. You can debug the logic error by converting the string to an integer datatype as show below:

import pandas as pd
import numpy as np
a = 5
b = Int("10")
print(c=a+b)

Unlike a syntax error, a logic error may not prevent your program from running. Instead, it will run but display an incorrect output.

What Causes Logic Errors?

Wrong Declaration of Data Type: Using the example above, the second variable is a string because of the quotes surrounding it. So, the compiler assumes that you want to place both variables side by side. So always make sure you're meticulous with your data type declaration and conversion.

Incorrect sequence: Say you were to write, "Code love I to". Well, this sentence makes no logical sense because the words are not placed in the proper order.

The same goes for programming languages. When the code is not sequential, the compiler again assumes a meaning for your code and then gives you an output different from your expectations.

For instance, a function (in JavaScript) that is declared locally will be available globally due to the semantics of JavaScript function scope. So, if you'd need that particular function all through your source code, it is better to declare it in a global scope.

Scope in JS simply means the location of a declared variable and how it can be accessed. A variable has a global scope if it can be accessed anywhere along the entire source code. A local variable is one limited to only the block within which it is declared. The difference between a global variable and a local variable is the accessibility.

var age =prompt("Enter your age")

 if (age<18){
 console.log("you are a minor")
 }
 else{
 console.log("You are" + age + "years old")
 }

In the above code snippet, the variable "age" is globally declared that is why it can be called anywhere in the entire source code.

Incorrect Sequence is a logical error because variables must be rightly declared if they are to be used repeatedly.

Misplaced Conditional Statement, Boolean or Logical Expressions: Logical expressions such as if-else, do-while, and the rest are the major causes of logical errors. When they're not properly placed, there's every tendency to get an incorrect output. Most programs rely a lot on logical expressions, so you need to know how to use them.

Logical errors can happen to anyone, regardless of skill level – just like all errors. So spend some time getting your logic right before you start coding. Some programmers go as far as drawing a schematic diagram to emphasize the logic they want for their program.

Runtime Error

Every program has a certain amount of time it takes to execute. As a programmer, it is your duty to ensure that your program loads in the shortest possible time.

Remember, a slow program won't do well in the marketplace. Nobody wants an application that "wastes" their time, right?

Runtime, in simple terms, is the time taken for a program to execute or run. You can have your code syntax well written following a specified logic and still encounter errors as or when your program executes. This problem is caused by a runtime error.

A PC Screen showing error alert

As seen in the above picture, Runtime errors can occur while your program is being executed – the time between interpreting your codes and showing the required output.

These errors can be caused by a non-declared variable, a slow internet connection or many other reasons during the course of code execution.

const country = "Nigeria"
let indp = 1960
    function Election(){
    if ( country == "Nigeria"){
    console.log ( country + "had her "+ "independence in " + indp)
    }
    }
election()

The above code will throw a runtime error because the function being called is different from the one declared.

How to solve runtime errors

The best way to resolve runtime errors is to address them based on their cause. For a non-declared variable, ensure that the variable is properly declared using the right syntax and that the declared variable is the same as that which is called, as illustrated in the code block below:

let name = "Ayomide"
console.log (name + " " +" was my colleague")

In the case of low memory, clear your cache and refresh your browser or restart your computer.

For poor internet connection, switch your internet service provider or close some opened tabs on your browser.

In severe cases, back up your source code and solve the hardware problem that your computer may be experiencing.

Conclusion

Errors can occur in any program, no matter the skill of the programmer. What sets you apart is your ability to find and debug these errors.

The more errors you debug, the better you become at writing clean and performant code. Look out for the next error line and swing into action!

Have you ever tried reading about the error type specified by the interpreter before solving these errors? If not, you should, since knowing about these errors can help you solve your problems.

For example, when you encounter an error, you probably Google it. You copy and paste the whole error and try to find out the solution, by visiting various websites and forums. It's a trial and error method of finding and solving bugs.

But what if you already knew why the error generally occurs? This would save you time you'd otherwise spend searching for solutions online. Instead, you could start looking for solutions on your own just by looking at the error type.

In this guide, you will learn about the two mostly encountered error types, which are type error and reference error. You'll learn why they occur, the difference between them, and how to avoid getting these errors.

Note: There are other types of errors in JavaScript like syntax errors, internal errors, range errors, and eval errors. But the scope of this article is limited to the two most commonly occurring errors.

What is a Type Error?

Type errors occur when you use something that is not intended to be used in that particular way. For example, using a screwdriver to hammer in a nail, instead of using a hammer.

Let's understand this using an example:

let a = 1
console.log(a()) 

//output
Uncaught TypeError: a is not a function

Here a is a variable initialized with a value. You encountered an error because you tried to call a function with the variable name. A variable cannot be called as a function. Functions and variables work differently. So in this case, you got a type error. You used the let variable differently from its type.

This gives us a type error.

Solution: To resolve this error, you must refer to the variable in the console, as it is intended to be used. In this case, you pass a as a variable instead of a function.

let a = 1
console.log(a)

//output
1

Let's take another example:

const a = 1
a = 2 // you reassign a const type variable again

//output
TypeError: Assignment to constant variable.

Here, we reassigned the const type variable a to a new value. But you can't change const variables like this, so in this case you get a type error

Solution: never reassign a const type variable once you've defined it.

const a = 1
const b = 2
console.log(a, b)

//output
1 2

Here's another example using an array:

const myArray = [1,2,3,4]
myArray = myArray.push(5) // reassign array

//output
TypeError: Assignment to constant variable.

In this case, we reassigned the const type myArray. This gives us a type error because again, this kind of reassignment is against the properties of const.

Solution:

const myArray = [1,2,3,4]
myArray.push(5) // you can push new values

//output
[1,2,3,4,5]

You can easily push new values to the array without reassigning it. This will not give you any error. Pushing values into an array is allowed. This way you can avoid getting the error.

How to avoid getting a type error

The easiest way to prevent type errors is to avoid using the same names for different variables and functions.

If you use different names, you will not get confused or replace one with another, and you can easily avoid getting this error.

Another way is to make sure you use variables as they're intended to be used. Instead of using const when you need to reassign a value, use let (which allows this kind of change).

What is a Reference Error?

Reference errors occur when you are trying to refer to or use something that does not exist. For example, looking for a screwdriver in your toolbox, but it's not there.

Let's understand this using an example:

let a = 1
console.log(b) // undefined variable used

//output
Uncaught ReferenceError: b is not defined

Here, a is a variable initialized with a value. We encountered an error because we tried to console log the variable b that does not exist. We hadn't yet declared any such variable, so we got a reference error here.

Solution: only use a variable that you've declared to avoid getting an error.

let a = 1
console.log(a) // used defined variable

//output
1

Here's another example:

if(true){
    let a = 1
}

console.log(a)

//output
ReferenceError: a is not defined

In this example, we're trying to access the a variable of type let outside its block. The interpreter cannot find it outside the block. This gives us an error.

Solution:

if(true){
    let a = 1
    console.log(a)
}


//output
1

Using the variable inside its block or scope will not give you any error.

Let's take one more example, but this one can be difficult to understand.

if(true){
    console.log(a)
    let a = 1
}


//output
ReferenceError: Cannot access 'a' before initialization

a is still inside its scope. But we get an error. Why? Because we're trying to use the variable before we've defined it. This is not allowed and goes against the properties of the let variable.

Solution: use the let variable only after defining it.

if(true){
    let a = 1
    console.log(a)

}

//output
1

How to avoid getting a reference error

The easiest way to avoid getting reference errors is to refer to or access only defined variables. Only use variables that exist.

You can also use conditional statements and error handling to avoid running code if a variable or a function does not exist.

Conclusion

You can easily debug your code when you already know how to resolve your errors. It's good to know commonly occurring errors and how to avoid them. This will save you time searching for solutions online and wasting hours trying to find a solution when a little bit of knowledge and awareness about these things can help.

Even more specifically, one amazing thing about the Internet is its ability to handle errors.

What do I mean by errors? When a packet or a frame is received by a machine, we say it contains an error if the data that had been sent is not the data that was received. For instance, a single 1 was mistakenly received as a 0 after its transmission.

This can happen due to many different reasons. Perhaps there was some disturbance in the wire where the data was transmitted – say, a child rode her bicycle over the wire. Perhaps there was some collision in the air as many people transmitted at once. Maybe it was a device's error.

Regardless of the specific reason, you still get valid data on the Internet. Without handling errors, you may read the last sentence and instead of errors read errbbb. Weird, isn't it? So how does the Internet handle errors?

There are two main approaches for handling errors – detection, and correction. We shall start by describing detection, and then talk about correction.

What is Error Detection?

When dealing with error detection, we are looking for a boolean result – True, or False. Is the frame/packet valid, or not. That is all. We don’t want to know where the error occurred. If the frame is invalid, we will simply drop it.

So when the receiver receives a frame, they will determine whether an error has occurred. If the frame is valid, they will read it. If the frame contains errors - the receiver will drop it.

_Error Detection: we only want to know if the frame/packet is valid or not. (Source: Brief)_

One method for error detection is using a checksum. A common implementation of a checksum is called CRC – Cyclic Redundancy Check.

In this post we will not trouble ourselves with the mathematical implementation of CRCs in the real world (if you're interested, check out Wikipedia). Rather, we'll simply try to understand the concept. To do so, let’s implement a very simple checksum mechanism ourselves.

Consider a protocol for transmitting 10-digit phone numbers between endpoints. This protocol is extremely simple: each packet includes exactly 10 bytes, each one representing a digit. For example, a packet might include the following digits:

5551234567

_A packet with a payload of 10 digits (Source: Brief)_

For simplicity's sake, we will omit the headers of the packet and focus solely on the payload.

Now, we will add a checksum. Say that we add all the digits. So in this example, we would calculate 5 + 5 +5 +1+… all the way through 7. We would get 43. This would be our checksum value.

Now, the sender won’t only send the phone number, but also the checksum value right after it. In this example, the sender would send:

_The packet's data is followed by a checksum. (Source: Brief)_

Now, as the receiver, you can do the same thing. You will read the phone number, and calculate the checksum. You will add the digits, and get 43.

Since you've received the correct result (that is, your calculation based on the data matches the checksum value sent in the packet), you can assume that the frame is valid.

_The sender compares their calculated checksum value and the checksum in the packet. If the values match, the packet is assumed to be valid (Source: Brief)_

What happens in case of an error? 🤔

Let’s say, for instance, that the digit 2 was replaced by an 8. Now, even though the sender sent the same stream as before ( 555123456743 ), you, as the receiver, see something a bit different:

_A packet containing an error (Source: Brief)_

Now, you are calculating the checksum, adding all the digits. You get 49. Since this value is different from the checksum value specified in the original frame, 43, the frame is considered to be invalid and you drop it.

_The sender compares their calculated checksum value and the checksum in the packet. If the values don't match, the packet is assumed to be invalid (Source: Brief)_

Are there problems with this method? 🤔

Yes, there are. Consider, for example, what happens if there are two errors – and instead of the original stream ( 555123456743 ), you receive the following:

_A packet received with two errors, resulting in the stream 456123456743 (Source: Brief)_

What happens when you add the digits?

Even though the digits are not the same as the original packet, the checksum will remain correct, and the frame will be regarded as valid.

_Despite the errors, the checksum value happens to be correct, resulting in a false assumption that the packet is valid (Source: Brief)_

Real checksum functions, such as CRCs, are of course much better implemented than the one in our example – but in extremely rare cases, such problems may occur.

Notice that using this kind of method, error detection, we don’t know where the problem occurred, but only whether the frame is valid or not. If the checksum value is invalid, we assume that the frame is invalid and drop it.

What is Error Correction?

As mentioned earlier, detection is not the only way to handle errors. Another approach might be to find the error and correct it. How can we do that?

An extremely simple way would be to transmit the data many times – let’s say, three times. For example, the stream 5551234567 would be transmitted as follows:

_Sending the same data multiple times (Source: Brief)_

So we basically sent the data three times.

Now, in case of an error in one digit, the receiver can look at the other two digits, and choose the one that appears two times out of three.

So, for instance, if we had a problem and 2 was replaced with an 8, the receiver would get this stream:

_An error in one of the occurrences of the data (Source: Brief)_

Now, as a receiver, you can say: “I have 2, 8, 2… so it was probably 2 in the original message”.

Is this problematic? Well, in some rare cases, we might get the same error twice. So it is possible, even though unlikely, that two of the original twos have been received as eights.

So while the sender sent this stream:

_Sending the same data multiple times (Source: Brief)_

The first 2 was mistakenly read as an 8, and also the second 2 was received as an 8:

_Two identical errors; Rare, but possible (Source: Brief)_

Now, it looks as if the original message included an 8, and not a 2.

What can you do in order to lower the probability of such scenario?

The most simple solution would be to simply send the data even more times. Let’s say, five times. So now we duplicate all the data, and send it 5 times in total…

_Sending the data five(!) times (Source: Brief)_

Now, say that two errors occurred, and again two of the 2 digits were replaced with 8s.

_Two identical errors; Rare, but possible (Source: Brief)_

Clearly, it is very unlikely to get the same error twice, but even in this case, we still get 2 three times, so as the receiver you can tell, with a high probability, that the original message contained a 2, rather than an 8.

What's the Overhead?

Now would be a good time to introduce the term overhead. When we say overhead, we basically mean data or time needed to convey the actual message. Let’s first understand what this term means in general, and then consider it in the context of handling errors.

Let’s say that I have a lesson to teach in my university. My goal is to teach the lesson itself, which is also called the payload in that context – that is, the actual data or message I would like to convey.

In order to teach the lesson, or to convey the payload, I first have to physically get to the university – so I get out of my home, walk to the bus station, wait for the bus, take the bus, get off the bus, walk to the building, wait for the lesson to start – and only then do I actually get to teach the lesson.

This entire process is overhead that I have to pay in order to deliver the payload, in this case – to teach the lesson.

_Overhead and Payload are two extremely important terms in Computer Networks (Source: Brief)_

The same applies in computer networks. Our payload is the data, and there is always some overhead associated with sending it.

Back to Handling Errors

In the context here – sending the data three times, as suggested earlier, means that for every byte of payload we have two bytes of overhead. If we send the data five times, then for every byte of payload, we have four bytes of overhead. That’s a LOT!

Consider error detection, on the other hand. In our example protocol for sending phone numbers, how much overhead did we have?

Recall that for every ten-digit phone number, that is ten bytes, we included a two-digit checksum value. In other words, we had two bytes of overhead for ten bytes of payload. It is clear that in our example, error detection yields much smaller overhead in comparison to error correction.

_In the sample protocol, for every ten-digit phone number (ten bytes of payload), we included a two-digit checksum value (two bytes of overhead) (Source: Brief)_

There are better ways to achieve error correction with high accuracy than to simply send the data so many times, but they are more complicated and out of scope for this post. Even with very complicated error correction techniques, they still require lots of overhead when compared to error detection.

Also, notice that except for the bytes sent as overhead in case of error correction, error detection is much simpler.

Error Correction vs Error Detection – Which is Better?

We already concluded that error detection is simpler, and with a smaller payload compared to error correction.

So, when would we prefer error correction?

One case might be when we have a one-way link. That is, a network where we can only transfer data in one direction.

For example, say you have a secret agent that you need to send a message to. The agent knows that they need to look up to the sky at exactly midnight, and they will see a series of flashes indicating the secret message.

The secret agent cannot reply, or their location and identity will be revealed. In addition, you don’t want to send the message over and over again, as not to draw much attention, and to make it harder for someone to intercept the message.

In this case, you definitely want your agent to receive the exact message that you’ve sent. Consider a case where you want to send them the message “do not place the bomb”.

_A sensitive message for a secret agent (Source: Brief)_

Of course, you don’t want to risk the unfortunate scenario of the agent reading the message as “do now place the bomb”, due to an error.

_An error may change the meaning of the message substantially (Source: Brief)_

If you use error detection, the agent might be aware that the message they received is invalid in case of an error, but they won’t be able to tell you that they need you to send the message again. As you want the agent to be able to read your message correctly and without sending any data back to us, error correction is preferred.

So, one-way link is one case where we prefer error correction. What about other cases?

Sometimes you just can’t send the data again, perhaps because it has been erased from the memory of your machine. That is, the data is deleted right after it has been sent. In this case, you'd clearly prefer error correction, as sending the data again, as we would do with error detection, is just impossible.

Also, if sending the data again is possible, but extremely expensive, error correction may be preferable.

For example, if you send a message to the moon, say, with a spaceship – it might be really expensive to send it over again in case of an error. Using error correction, you send the data only once and the receiver should be able to deal with it, even if an error occurred.

_Cases where correction is preferred (Source: Brief)_

In general, we prefer error correction when retransmitting the data is costly or impossible.

When would we prefer error detection?

Well, in case we can retransmit the data, we usually prefer error detection since it comes with very little overhead compared to error correction. Especially, when sending the data is relatively cheap.

For example, on the Internet, if an error occurs when you send a frame, no problem – you can simply send it again!

For example, when I covered the Ethernet protocol in a previous post, I mentioned that Ethernet protocol uses change detection, namely CRC32 – that is, 32 bits (or 4 bytes) of a checksum for every frame.

Note that it doesn’t mean that error detection is simply better. It just better fits the Internet than error correction. As mentioned before, error correction is preferable in other cases.

Wrapping Up

In this tutorial, we discussed various methods for handling errors. We looked at error detection, where we only know whether a frame is valid or not. We also considered error correction, where the receiver can restore the correct value of an erroneous frame. We also introduced the term overhead.

We then understood why we use error detection on the Internet, rather than error correction. Stay tuned for more posts in this series about Computer Networks 💪🏻

About the Author

Omer Rosenbaum is Swimm’s Chief Technology Officer. He's the author of the Brief YouTube Channel. He's also a cyber training expert and founder of Checkpoint Security Academy. He's the author of Computer Networks (in Hebrew). You can find him on Twitter.

Additional Resources

• Computer Networks Playlist - on my Brief channel
• CRC - Wikipedia
• The Complete Guide to Ethernet Protocol

In this article, you'll learn how to use the IFERROR function to evaluate and handle errors in Excel. You can use the IFERROR function to handle #N/A, #VALUE!, #REF!, #DIV/0!, #NUM!, #NAME?, or #NULL! errors.

IFERROR Function Syntax in Excel

Here's what the syntax for the the IFERROR function looks like:

IFERROR(value, value_if_error)

As you can see above, the IFERROR function has two parameters: value and value_if_error.

• value denotes the value to be checked for an error.
• value_if_error is returned if the value checked throws an error.

The parameters above will make more sense with the examples that follow.

How to Use the IFERROR Function in Excel

In this section, you'll see a practical application of the the IFERROR function.

Here's the table we'll be working with:

In the table above, we have three columns: Data 1, Data 2, and Quotient.

The idea here is to fill the third column (Quotient) with the result gotten from dividing Data 1 by Data 2.

That is:

For row one: 80/192
For row two: 75/180. And so on.

But if you look closely, some rows have values that will lead to mathematical errors — row 4 and row 6.

We cannot divide 60 by 0 on row 4, nor can we divide 65 by NIL on row 6.

Here's what the table will look like after the divisions:

The quotient for column 4 and 6 are #DIV/0! and #VALUE!, respectively. This is because the operation being performed leads to a math error.

We cannot fix this mathematically, but we can catch errors like these and return a custom value for them. Here's how using the IFERROR function:

I've removed every value in the Quotient column. Next, we'll use the IFERROR function. That is:

In the first Quotient row, we wrote the IFERROR function: =IFERROR(A2/B2, 0). The two parameters are A2/B2 and 0.

The first parameter A2/B2 denotes A2 (80) divided by row B2 (192). If the division is possible, the quotient will be returned.

If the division is not possible, the second parameter (0) will be returned.

So our table will look like this after the IFERROR function is applied in each row:

Now row 4 and 6 have 0 as their quotient instead of #DIV/0! and #VALUE!, respectively.

Note that you can use a custom message as well instead of 0. That is: =IFERROR(A2/B2, "Division not possible"). You have to nest the text in quotation marks. We'll have a table like this:

So it's up to you to customize what will be returned if there is an error.

Summary

In this article, we talked about the IFERROR function in Excel. It can be used to handle #N/A, #VALUE!, #REF!, #DIV/0!, #NUM!, #NAME?, or #NULL! errors.

We saw the syntax for using the IFERROR function and the meaning of its parameters.

We also saw some examples that showed how to use the IFERROR function in an Excel table.

Thank you for reading!

The Python error, "TypeError: can't multiply sequence by non-int of type float" is no exception to that.

I have prepared this article to show you why this error occurs and how you can fix it. Read on.

Why the "TypeError: can't multiply sequence by non-int of type float" Error Occurs

To understand why you get the error "TypeError: can't multiply sequence by non-int of type float", let's look at the keywords in the error: Typeerror, multiply, sequence, and type float.

• Typeerror is an exception thrown when you put together inappropriate data types in an operation
• multiply in the error means you're trying to perform a multiplication
• sequence is an ordered set in Python. It could be strings, lists, or tuples.
• type float means there's a decimal number in the operation you're trying to perform, for example, 2.4 or 5.40

So, if you're getting this error, it means you're multiplying any of those sequences (usually a string and a tuple) with a floating point number (decimal number).

Indeed, you can multiply a sequence with a number and Python will do the work properly:

site_name = 'freeCodeCamp '

print(site_name * 2)
# freeCodeCamp freeCodeCamp 

print(site_name * 3)
# freeCodeCamp freeCodeCamp freeCodeCamp

stringfied_num = '10 '

print(stringfied_num * 3)
# 10 10 10

Same thing also works for tuples:

myTuple = (4, 3, 4)
print(myTuple * 2)

# (4, 3, 4, 4, 3, 4)

But if you try to do the multiplication with a decimal point number, you get the error "TypeError: can't multiply sequence by non-int of type float":

site_name = 'freeCodeCamp '

print(site_name * 2.5)
# Traceback (most recent call last):  
#   File "seq.py", line 3, in <module>
#     print(site_name * 2.5)
# TypeError: can't multiply sequence by non-int of type 'float'

myTuple = (4, 3, 4)
print(myTuple * 2.2)

# Traceback (most recent call last):   
#   File "seq.py", line 11, in <module>
#     print(myTuple * 2.2)
# TypeError: can't multiply sequence by non-int of type 'float'

How to Fix the "TypeError: can't multiply sequence by non-int of type 'float'" Error

To fix the error "TypeError: can't multiply sequence by non-int of type 'float'", make sure you're not multiplying the string or tuple with a decimal point number.

So instead of multiplying the string or tuple with a floating point number, use an integer. For instance "freeCodeCamp" * 5 instead of "freeCodeCamp" * 5.6:

site_name = 'freeCodeCamp '
print(site_name * 5)

# freeCodeCamp freeCodeCamp freeCodeCamp freeCodeCamp freeCodeCamp

If you're dealing with a number in strings, for example, "10", you can convert the string to an integer with the int() method and to float with the float() method:

stringfied_num = '10 '

print(int(stringfied_num) * 3)
# 30

stringfied_num = '10 '

print(float(stringfied_num) * 3)
# 30

If you're dealing with a user input, you can also find a way to convert the floating-point number to an integer. In fact, you should handle the possibility of the user entering a decimal point number instead of a straight integer:

# declare a string variable
site_name = 'freeCodeCamp '

# Get the user input and convert it to a decimal number
user_input = float(input("Enter a number: "))

# Round the number entered by the user to the nearest whole number
rounded_input = round(user_input)

# Multiply the site_name variable by the user input
result = rounded_input * site_name

# Print the result to the console
print(result)

# I entered 3.6 and the result was: freeCodeCamp freeCodeCamp freeCodeCamp freeCodeCamp

Conclusion

You cannot multiply a sequence by a floating point number. What you get if you do that is the error, TypeError: can't multiply sequence by non-int of type 'float'. That's why this article was dedicated to letting you know how to fix the error.

The takeaway from this article is that if you're using any string as a number, you should make sure they are converted with the float() method – especially if they are used in a calculation.

This error might be raised when using either JavaScript or TypeScript in the back-end. So you could be working on the client side with React, Vue, and so on, and still run into this error.

You can also encounter this error when working with JavaScript on the client side.

In this article, you'll learn how to fix the SyntaxError: Cannot use import statement outside a module error when using TypeScript or JavaScript with Node.

You'll also learn how to fix the error when working with JavaScript on the client side.

How to Fix the TypeScript SyntaxError: Cannot use import statement outside a module Error

In this section, we'll work with a basic Node server using Express.

Note that if you're using the latest version of TypeScript for your Node app, the tsconfig.json file has default rules that prevent the SyntaxError: Cannot use import statement outside a module error from being raised.

So you're most likely not going to encounter the SyntaxError: Cannot use import statement outside a module error if you:

• Install the latest version of TypeScript, and are using the default tsconfig.json file that is generated when you run tsc init with the latest version.
• Setup TypeScript correctly for Node and install the necessary packages.

But let's assume you're not using the latest tsconfig.json file configurations.

Here's an Express server that listens on port 3000 and logs "Hello World!" to the console:

import express from "express"

const app = express()

app.listen("3000", (): void => {
    console.log("Hello World!")
    // SyntaxError: Cannot use import statement outside a module
})

The code above looks as though it should run perfectly but the SyntaxError: Cannot use import statement outside a module is raised.

This is happening because we used the import keyword to import a module: import express from "express".

To fix this, head over to the tsconfig.json file and scroll to the modules section.

You should see a particular rule like this under the modules section:

/* Modules */
"module": "esnext"

To fix the problem, change the value "esnext" to "commonjs".

That is:

/* Modules */
"module": "commonjs"

How to Fix the JavaScript SyntaxError: Cannot use import statement outside a module Error

Fixing the SyntaxError: Cannot use import statement outside a module error when using vanilla JS is a bit different from TypeScript.

Here's our server:

import express from "express";

const app = express();

app.listen(3000, () => {
    console.log("Hello World!");
    // SyntaxError: Cannot use import statement outside a module
});

We're getting the SyntaxError: Cannot use import statement outside a module error for the same reason — we used the import keyword to import a module.

To fix this, go to the package.json file and add "type": "module",. That is:

{
  "name": "js",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  }
}

Now you can use the import keyword without getting an error.

To fix this error when working with JavaScript on the client side (without any frameworks), simply add the attribute type="module" to the script tag of the file you want to import as a module. That is:

<script type="module" src="./add.js"></script>

Summary

In this article, we talked about the SyntaxError: Cannot use import statement outside a module error in TypeScript and JavaScript.

This error mainly occurs when you use the import keyword to import a module in Node.js. Or when you omit the type="module" attribute in a script tag.

We saw code examples that raised the error and how to fix them when working with TypeScript and JavaScript.

Happy coding!

You’re not alone, because I’m currently getting it too:

The React app indeed failed to start:

In this article, you’ll learn how to fix this error in 3 ways. But first, let’s discuss what causes the error.

What Causes the "0308010c:digital envelope routines::unsupported" Error?

You are likely getting this error because of 2 main reasons:

• you’re not using the LTS (long term support) version of Node JS. You can see I’m using Node 17.0.0, which is not an LTS version of Node.
• you’re using react-script with a version less than 5

The error can also occur because you’re using Node 17.

How to Fix the "0308010c:digital envelope routines::unsupported" Error

There are at least 3 ways by which you can fix this error. We are going to look at them one by one. Any of them should work for you.

Pass --openssl-legacy-provider to Webpack or the CLI Tool

In a React app, for instance, you can pass --openssl-legacy-provider to the start script like this "react-scripts --openssl-legacy-provider start".

That should do it. But if this fails to fix the error, then proceed to the next fix. On many occasions, it works.

Use an LTS Version of Node JS

Consider downgrading your Node version to 16.16.0 or other LTS versions.

Currently, 18.12.1 is the latest LTS version of Node. You can download it from the Node JS official website or use NVM to install it.

Upgrade React Script to Version 5+

If you’re working with React and this still fails to fix the error for you, then it’s likely an issue with your React script.

If you’re using a React script version less than 5, then you should upgrade it to version 5+.

In my case, I’m currently using react-scripts 3.4.3:

To upgrade react-scripts to 5+, you can do it in two ways:

• Uninstall and reinstall react-scripts

  • open the terminal and run npm uninstall react-scripts
  • run npm install react-scripts

• Manually change the react script version

  • go to your package.json and change the react-script version to 5.0.2
  • delete the node_modules folder by running rm –rf node_modules
  • delete the package.lock.json file by running rm –rf package.lock.json
  • run npm install or yarn add, depending on the package manager you’re using

After upgrading the version of react-scripts to 5+, my React app is now working fine:

Conclusion

As already pointed out in this article, if you are getting the "0308010c:digital envelope routines::unsupported" error, then it could happen you’re not using an LTS version of Node JS, or you’re using react-scripts version <5.

Hopefully the fixes we discussed in this tutorial help you fix this error. If any of the fixes fail to work for you, then you should try the others. In my case, upgrading react-scripts to 5+ was what worked for me.

Thank you for reading.