Does this error only happen with the 'error' property?

No! You might see reading 'data', 'map', or 'length'. The logic is always the same: the variable before the dot is undefined. For example, reading 'map' usually means the array you are trying to loop over hasn't loaded yet.

How to Fix "Cannot read properties of undefined (reading 'error')" in JavaScript

Q: Why does console.log(err) sometimes show an empty object?

In some browsers, the Error object is not enumerable. This means if you just log 'err', you might see '{}'. You should log 'err.message' or 'err.stack' specifically, or use 'console.dir(err)' to see the internal structure.

Uncaught TypeError: Cannot read properties of undefined (reading ‘error’)

It’s 11 PM. You’ve just pushed your code to staging. You click the “Submit” button on your form, expecting a nice success message or at least a clean validation error. Instead, the screen goes white (or the spinner spins forever), and you open the console to see the most famous red text in JavaScript history:

Uncaught TypeError: Cannot read properties of undefined (reading ‘error’)

We have all been there. It is the specific flavor of pain where you are trying to handle an error, but your error handler crashes.

This isn’t just a typo. It’s usually a misunderstanding of how your API (or library) is returning data. In this post, I’m going to walk you through exactly why this happens, how to fix it in 30 seconds, and how to stop it from happening again using some proper tooling.

What Does This Error Actually Mean?

Let’s strip away the tech jargon.

JavaScript objects are like boxes. You can open a box to get what’s inside.

response is a box.
response.data is an item inside that box.
response.data.error is a label on that item.

This error means you are trying to read the label (.error), but the box (response.data or response) doesn’t exist. It’s not just empty; it is undefined. It’s like reaching for a coffee mug that isn’t on the table—your hand grabs air, and reality breaks.

The Most Common Scenario: The “Bad Catch”

90% of the time, this happens inside a catch block when using libraries like Axios or the native Fetch API.

You probably wrote code that looks like this:

try {
    const res = await axios.post('/api/login', payload);
} catch (err) {
    // BOOM! This line causes the crash
    console.log(err.response.data.error); 
    alert(err.response.data.error);
}

Here is exactly what went wrong: If your internet goes down, or the server times out, or there is a CORS issue, the err object does not have a response property.

The err object exists, but err.response is undefined. So when you type err.response.data, you are asking JavaScript to find .data inside undefined. That is illegal operation number one.

How to Fix It (The “Defensive” Way)

You need to write “defensive” code. Never trust that an API response exists until you check for it.

Fix 1: Optional Chaining (The Modern Way)

If you are using modern JavaScript (ES2020+), you can use the question mark ?.. This is the “safe” operator. It basically says, “If this exists, keep going. If not, stop and return undefined.”

console.log(err?.response?.data?.error);

If err.response is missing, this line just prints undefined instead of crashing your entire app.

Fix 2: The “Guard” Clause (The Robust Way)

Sometimes you want to show a specific message if it’s a network error vs. a validation error.

catch (err) {
    if (!err.response) {
        // This handles "Network Error" or "Server Down"
        console.log("Network error - check your internet connection");
        return;
    }

    // Now it is safe to read the response properties
    console.log(err.response.data.error);
}

The Silent Killer: Backend vs. Frontend Mismatch

Here is the second most common reason for this error, and it’s usually harder to spot.

You think the backend is sending this:

{
  "success": false,
  "error": "User email already exists"
}

But the backend developer (maybe it’s you, maybe it’s a colleague) actually changed the structure to this:

{
  "success": false,
  "errors": [ 
    { "field": "email", "message": "User email already exists" } 
  ]
}

If your frontend code tries to read response.error, you get undefined. If you then try to do response.error.toString(), your app crashes with “Cannot read properties of undefined.”

Stop Guessing Your JSON Structure

One of the biggest mistakes developers make is “eyeballing” the API response in the Network tab. It’s messy, it’s unformatted, and it’s easy to miss a nested object.

1. Validate the Structure First Don’t write the parsing logic until you see the clean data. Copy the raw JSON response from your network tab and paste it into the Toolshref JSON Formatter & Validator.

It will format the messy string into a clean, collapsible tree. You can instantly see:

“Oh, error is actually inside a payload object.”
“Wait, message is spelled msg.”

This 5-second check saves you 30 minutes of debugging “undefined” variables.

2. For Java Spring Boot Developers If you are the one building the API in Java, you are responsible for ensuring the JSON matches what the frontend expects. Manually writing Java classes (POJOs) to match a JSON structure is where typos happen. A single typo in a field name (userName vs username) causes the frontend to receive undefined.

Don’t write these classes by hand.

Take the JSON you want to return.
Paste it into the Toolshref JSON to Java POJO Converter.
It generates the exact Java Class you need, with all the correct @JsonProperty annotations.

This ensures your Java backend sends exactly the structure your frontend code is trying to read. No mismatch = no “undefined” errors.

Summary: Your Debugging Checklist

Next time you see Cannot read properties of undefined (reading 'error'), follow this checklist:

Check the Network: Did the request actually fail? If the status is “Network Error,” there is no response object.
Use Optional Chaining: Change err.response.data to err?.response?.data.
Validate the JSON: Don’t trust your eyes. Paste the response into the Toolshref JSON Formatter to see the real structure.
Sync Backend/Frontend: Use the JSON to Java POJO tool to ensure your data models match perfectly on both sides.

Coding is hard enough without your error handlers crashing your app. Write defensively, use the right tools, and keep your console clear of red text.

Frequently Asked Questions (FAQ)

Q: Why does console.log(err) sometimes show an empty object? A: In some browsers, the Error object is not enumerable. This means if you just log err, you might see {}. You should log err.message or err.stack specifically, or use console.dir(err) to see the internal structure.

Q: Does this error only happen with “error” property? A: No! You might see reading 'data', reading 'map', or reading 'length'. The logic is always the same: the thing before the dot is undefined. If you see reading 'map', it means the array you are trying to loop over hasn’t loaded yet.

Q: Can I use toolshref tools for languages other than Java? A: Yes. While the POJO converter is optimized for Java Spring Boot, the JSON Formatter and Validator works for any language (Python, Node.js, PHP, Go). JSON is universal.

Q: Is ?. (Optional Chaining) supported in all browsers? A: It is supported in all modern browsers (Chrome, Firefox, Edge, Safari). If you need to support Internet Explorer (IE11), you will need a transpiler like Babel to convert it into older JavaScript syntax.

Q: How do I handle this error in React specifically? A: In React, this often happens when you try to render data before it has arrived from the API. Always initialize your state with a default value (like null or []) and check if (!data) return <Loading /> before trying to access data.error or data.title in your JSX.

Uncaught TypeError: Cannot read properties of undefined (reading ‘error’) – A Developer’s Guide to Fix It Fast