Error messages are structured, not random

Every JavaScript error follows the same anatomy. Here's a real one you might see after AI generates a component:

Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at ProductList (ProductList.jsx:12:24)
    at renderWithHooks (react-dom.development.js:14985:18)
    at mountIndeterminateComponent (react-dom.development.js:17811:13)

This looks intimidating, but it breaks down into three clear pieces:

The error type and message together are usually enough to understand the bug. The stack traceWhat is stack trace?A list of function calls recorded at the moment an error occurs, showing exactly which functions were active and in what order. Ask AI for more tells you where to look.

How to read a stack traceWhat is stack trace?A list of function calls recorded at the moment an error occurs, showing exactly which functions were active and in what order. Ask AI for more

A stack trace is a breadcrumb trail of function calls. In JavaScript, read it top-to-bottom: the top line is where the error actually happened, and each line below is the function that called it.

at ProductList (ProductList.jsx:12:24)       ← crash happened here
at renderWithHooks (react-dom.development.js:14985:18)  ← React called your component
at mountIndeterminateComponent (react-dom.development.js:17811:13)  ← React mounting system

The format ProductList.jsx:12:24 means file ProductList.jsx, line 12, column 24. In your browser devtools, you can click this link to jump directly to that line.

Filtering out framework noise

Most of the stack trace is framework internals, React, Next.js, Webpack. You can safely ignore any line referencing files you didn't write. Focus on the lines that reference your own files.

at ProductList (ProductList.jsx:12:24)       ← YOUR CODE - start here
at App (App.jsx:28:5)                        ← YOUR CODE - called from here
at renderWithHooks (react-dom.development.js:14985:18)  ← ignore
at mountIndeterminateComponent (react-dom.development.js:17811:13)  ← ignore

Common errors in AI-generated code

AI generates certain errors far more often than others. Learning these patterns means you can often diagnose the bug just from reading the error type.

TypeError: Cannot read properties of undefined

This is the single most common error in AI-generated code. It happens when AI assumes data exists that hasn't loaded yet:

// AI generates this:
function UserProfile({ user }) {
  return <h1>{user.name}</h1>;
}

// But user is undefined on first render because the API
// hasn't responded yet. Crash.

The fix is almost always adding a guard:

function UserProfile({ user }) {
  if (!user) return <p>Loading...</p>;
  return <h1>{user.name}</h1>;
}

ReferenceError: X is not defined

AI used a variable or function that doesn't exist in scopeWhat is scope?The area of your code where a variable is accessible; variables declared inside a function or block are invisible outside it. Ask AI for more. This often happens when AI generates code that references a utility function it forgot to define, or imports from a package you haven't installed:

ReferenceError: formatDate is not defined

Check: did the AI define formatDate somewhere? Did it forget an import? Is it a function from a library you don't have?

SyntaxError

The code itself is malformed. AI occasionally generates incomplete code, missing closing brackets, dangling commas, or mixing up JSXWhat is jsx?A syntax that lets you write HTML-like markup inside JavaScript, which React converts into actual DOM elements. Ask AI for more and regular JavaScript:

SyntaxError: Unexpected token '<'

This usually means JSX is appearing in a file that isn't configured to handle it, or the AI truncated its output mid-line.

TypeError: X is not a function

AI called something as a function that isn't one. This often happens with APIWhat is api?A set of rules that lets one program talk to another, usually over the internet, by sending requests and getting responses. Ask AI for more mismatches, the AI thinks a library exports a function, but the version you have doesn't include it:

// AI writes:
import { useSearchParams } from 'react-router-dom';
const [params, setParams] = useSearchParams();

// But your version of react-router-dom doesn't export useSearchParams
// TypeError: useSearchParams is not a function

Compile-time vs runtimeWhat is runtime?The environment that runs your code after it's written. Some languages need a runtime installed on the machine; others (like Go) bake it into the binary. Ask AI for more errors

This distinction matters because it changes when and where you'll see the error.

Compile-time errors appear in your terminalWhat is terminal?A text-based interface where you type commands to interact with your computer. Also called the command line or shell. Ask AI for more or editor before the code runs. TypeScript errors, ESLint errors, and build-tool errors are all compile-time. They prevent your code from even starting:

error TS2339: Property 'naem' does not exist on type 'User'.
  Did you mean 'name'?

Runtime errors happen while your app is running, when a user clicks a button, when data loads from an APIWhat is api?A set of rules that lets one program talk to another, usually over the internet, by sending requests and getting responses. Ask AI for more, when a specific code path executes. You see these in the browser console:

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

A practical debugging sequence

When AI-generated code throws an error, follow this sequence instead of immediately asking AI to fix it:

1. Read the error type and message: what category of bug is this?
2. Look at the first stack traceWhat is stack trace?A list of function calls recorded at the moment an error occurs, showing exactly which functions were active and in what order. Ask AI for more line referencing your code: which file and line?
3. Open that file and look at that exact line: what's happening there?
4. Check if it matches a common AI pattern: undefined data? Missing import? Wrong APIWhat is api?A set of rules that lets one program talk to another, usually over the internet, by sending requests and getting responses. Ask AI for more?
5. If you can see the fix, make it. If not, now ask AI, but include the specific line, the error, and what you observed.

This takes 30 seconds and saves you from the "AI fix loop" where AI makes the problem worse because it doesn't understand the context.