Beginner5 min readShare
Was this chapter helpful?
Share
Try these free tools
Every app hits errors. The difference between getting stuck and getting unstuck isn't knowing how to code — it's knowing how to describe the problem to your AI tool. This guide teaches you how. You can also paste errors into our Error Decoder tool for a plain-English explanation.
Seeing a big red error message can feel scary, but here's the truth: errors are helpful. They tell you exactly what went wrong and often exactly where. A program that fails silently is far worse than one that throws a clear error.
Professional developers encounter errors every single day. The skill isn't writing perfect code — it's reading error messages carefully and knowing where to look. That's what this guide will teach you.
The #1 debugging superpower: actually reading the error message. Most beginners skip right past it. Don't be most beginners.
Every error message has the same basic parts. Once you know how to read one, you can read them all.
TypeErrortells you the category. Common types: TypeError (wrong type), ReferenceError (variable doesn't exist), SyntaxError (code written wrong).
Cannot read properties of undefined is the actual explanation. This is the most important part — it tells you what went wrong in plain English.
UserCard.tsx:12:24 tells you the exact file and line number. The first line is where the error happened. Lines below show how you got there.
Press F12 (or Cmd+Option+I on Mac) to open DevTools. These 4 tabs are all you need to know about.
You don't need to use these yourself, but knowing they exist helps you talk to your AI tool about problems. For example, you can say "I opened the Console tab and saw this red error" or "The Network tab shows a 500 error on this request."
See errors and log messages
Red messages are errors, yellow are warnings. If you see a red message, copy the whole thing and paste it to your AI tool — that's often all it needs to help you.
See the structure and styling of your page
Right-click anything on your page and choose 'Inspect' to see its code. Useful when you want to tell your AI tool "the button with class 'submit-btn' isn't styled right."
See if data requests are working or failing
Look for red entries — those are failed requests. You can tell your AI tool: "The request to /api/users is returning a 500 error" and it'll know exactly what to investigate.
See saved data like login tokens and settings
If you're having login problems, check here for stored tokens. You can tell your AI tool: "I checked the Application tab and there's no auth token stored" to help it diagnose the issue.
The better you describe a problem, the faster your AI tool can fix it. Here are ready-to-use templates for the most common situations. Just fill in the blanks and paste them into Claude Code, Cursor, or whatever tool you use.
Template
Example
Template
Example
Template
Example
Template
Example
You will see these errors. Bookmark this page so you can look them up fast. For broader troubleshooting strategies, see our When Things Break guide.
Text content does not match server-rendered HTML
What this means: Your app is showing different content when it first loads vs after it finishes loading — like a page that changes its text right after appearing.
Tell your AI tool: "I'm getting a hydration mismatch error. The server-rendered HTML doesn't match what the browser produces. Can you find what's different between server and client rendering in this component and fix it?"
Module not found: Can't resolve './Compnent'
What this means: Your project is trying to use a file that it can't find — usually because of a typo in the file name or the wrong folder path. Think of it like sending a letter to the wrong address.
Tell your AI tool: "I'm getting a 'Module not found' error for this import: [paste the import line]. Can you check if the file name and path are correct?"
You're importing a component that needs useState. It only works in a Client Component.
What this means: Some code only works in the browser (like buttons you can click or forms you can type into), but your file is set up to run on the server. It's like trying to use a TV remote on a radio — wrong device.
Tell your AI tool: "I'm getting an error that says I need 'use client'. Here's my component: [paste code]. Can you add 'use client' in the right place?"
TypeError: Cannot read properties of undefined (reading 'name')
What this means: Your code is trying to get information from something that doesn't exist yet. Imagine opening an empty box and trying to read a letter inside — there's nothing there.
Tell your AI tool: "I'm getting 'Cannot read properties of undefined' on this line: [paste the line]. The variable might not have data yet. Can you add a safety check?"
This page could not be found
What this means: Your website can't find the page you're trying to visit. It's like looking for a book on a shelf, but it's filed under the wrong letter — the file is either missing or in the wrong folder.
Tell your AI tool: "I'm getting a 404 error when I go to [the URL]. Can you check that my page file is in the right folder? In Next.js, the URL path needs to match the folder structure."
Environment variable is undefined in the browser
What this means: You saved a secret value (like an API key) in your settings, but your website can't see it. In Next.js, values that need to work in the browser must have a special name that starts with NEXT_PUBLIC_.
Tell your AI tool: "My environment variable isn't working in the browser. Here's what I have in my .env file: [paste the variable name]. Can you make sure it's named correctly for Next.js?" Then restart your dev server.
TypeError: Failed to fetch / NetworkError
What this means: Your app tried to talk to another server (like getting data from a database or API) and the connection failed. It's like making a phone call and getting no answer — the other end didn't respond.
Tell your AI tool: "I'm getting a 'Failed to fetch' error when my app tries to call this API: [paste the URL or API route]. Can you help me figure out why the request is failing?"
Error: Too many re-renders. React limits the number of renders.
What this means: Your app got stuck in an endless loop — like a dog chasing its own tail. Something in your code keeps telling the page to update, which triggers another update, which triggers another, forever.
Tell your AI tool: "I'm getting 'Too many re-renders' in this component: [paste the component code]. Something is causing an infinite loop. Can you find and fix it?"
Objects are not valid as a React child (found: object with keys...)
What this means: You're trying to display a whole bundle of data on the page, but React can only show simple things like text and numbers — not a whole bundle at once. It's like trying to display an entire filing cabinet instead of one document.
Tell your AI tool: "I'm getting 'Objects are not valid as a React child' when I try to display this data: [paste the JSX line]. Can you fix it so it shows the right property instead of the whole object?"
Asking for help is smart, not weak. But you'll get much better answers (from AI or humans) if you try these steps first.
The answer is often right there. Read the whole thing, not just the first line.
Copy the error message (without your file paths) and paste it into Google. Add your framework name.
Next.js, React, and most libraries have great docs with common error explanations.
Log variables at different points to find where things go wrong.
Comment out code until the error stops. The last thing you uncommented is the problem.
Paste the FULL error message, the relevant code, and what you expected to happen. The more context, the better the answer.
When asking AI for help: paste the full error message, the relevant code (not your whole project), and explain what you expected to happen vs. what actually happened. Context is everything.
