{"course":{"slug":"building-apps-with-ai","title":"Building Apps with AI","url":"https://addaly.com/learn/building-apps-with-ai","level":"beginner","track":"build"},"lesson":{"slug":"anatomy-of-an-error-message","title":"The anatomy of an error message","url":"https://addaly.com/learn/building-apps-with-ai/anatomy-of-an-error-message","position":29,"of":87,"minutes":8,"answer":"Read the error type, the message, and the first stack line naming your own file; the frame below the crash usually holds the mistake that produced the bad value.","keyIdea":"Read the error type, the message, and the first stack line naming your own file; the frame below the crash usually holds the mistake that produced the bad value."},"body":{"format":"markdown","text":"## Errors are structured, not noise\n\nAn error looks like a wall of text because nobody showed you which parts to read. There are only four, and they are in the same places every time.\n\n```\nTypeError: Cannot read properties of undefined (reading 'name')\n    at BookingCard (/app/components/BookingCard.tsx:23:31)\n    at renderWithHooks (/node_modules/react-dom/cjs/react-dom.js:14985:18)\n    at mountIndeterminateComponent (/node_modules/react-dom/cjs/react-dom.js:17811:13)\n```\n\n**The type.** `TypeError`. A small vocabulary covers most of them and each points somewhere specific.\n\n**The message.** What went wrong in words. Here: something was undefined and the code asked it for `.name`.\n\n**The stack.** Where it happened, innermost first. The first line naming **your** file is the one that matters. Lines mentioning `node_modules` are the library's internals, and reading them is nearly always a waste.\n\n**The position.** `23:31` is line 23, character 31.\n\nFour pieces, and the third is the one people miss because they stop reading at the first line.\n\n## The error types worth recognising\n\n**`TypeError: Cannot read properties of undefined`**: you have something you thought was an object and it is not there. Usually data that did not load, or a field with a different name than you expected. The most common runtime error in JavaScript by a wide margin.\n\n**`ReferenceError: x is not defined`**: a name that does not exist in scope. A missing import, or a typo, or code using a browser API on the server.\n\n> Figure: The four parts of an error, always in the same places. Layers, top to bottom: The type: TypeError (a small vocabulary, each pointing somewhere specific); The message: cannot read properties of undefined (what went wrong, in words); The stack: the first line naming your own file (app/components/BookingCard.tsx); The position: 23:31 (line 23, character 31). People stop reading at the first line. The third part is the one that tells you where to go, and the lines mentioning node_modules are the library's internals.\n\n**`SyntaxError`**: the file cannot be parsed at all. Usually a missing bracket, and the reported line is often just after the real problem.\n\n**`ECONNREFUSED`**: nothing is listening at the address something tried to reach. Your database is not running, or the URL is wrong, or the port is.\n\n**`Module not found`**: an import that does not resolve. A missing dependency, a typo in the path, or wrong capitalisation, which works on your Mac and fails on Linux.\n\n**`Hydration failed`** in React: the HTML the server produced and the HTML the browser produced disagree. Almost always something non-deterministic in a component: `Date.now()`, `Math.random()`, or a value read from the browser during a server render.\n\n**`EADDRINUSE`**: the port is already taken by a server you started earlier and forgot.\n\n## Read from the bottom of your own frames\n\nWhen several of your own files appear in the stack, the top one is where it crashed and the lower ones are how it got there. Both matter. The crash location tells you what broke; the caller tells you what fed it the bad value, and that is usually where the actual mistake lives.\n\nA null booking crashing in `BookingCard` was probably created by a query in `page.tsx` that returned nothing. Fixing `BookingCard` to tolerate the null is sometimes right and sometimes hides the real problem, which is that the query is wrong.\n\n## Server errors versus browser errors\n\nSame vocabulary, different places to look.\n\nA **browser** error appears in the devtools console. The user sees a broken screen and you see red text.\n\nA **server** error appears in your terminal locally, and in your host's log viewer in production. The user sees a 500 page with no detail, deliberately: the message is hidden because error messages leak information about your system. So a user reporting \"it says something went wrong\" has given you all they have, and the actual error is in your logs.\n\nThis is why the deployment lesson insists you find your host's log page before you need it.\n\n## What to include when you pass it on\n\nA good error report to a model or a human has five parts, and takes thirty seconds:\n\n1. The full error, first three lines minimum, uncut.\n2. The first line of the stack that names your own file.\n3. What you did immediately before it.\n4. Whether it happens every time.\n5. What you already tried.\n\nThe fifth stops you receiving the same suggestion twice, which is otherwise the most common way these conversations go in circles.\n\n## The errors that lie\n\nTwo cases where the message points at the wrong place.\n\n**A missing bracket** reports a line well after the real one, because the parser only notices something is wrong when it reaches something impossible.\n\n**A crash inside a library** reports the library's file. The cause is almost always the value you passed in, one or two frames down the stack in your own code. Look there first, and resist the urge to conclude that a widely used library is broken."},"check":{"question":"A crash reports a line inside a library in node_modules. Where should you look?","options":[{"text":"At the library's source, since that is where execution stopped.","correct":false,"tempting":"Follows the report literally to code you did not write and cannot change, which is where the symptom appeared rather than where the cause is."},{"text":"At the library's issue tracker, in case this is a known bug.","correct":false,"tempting":"Reasonable eventually and premature now; widely used libraries mostly fail because of what was passed in."},{"text":"At the nearest frame in your own code, which supplied the value the library could not handle.","correct":true},{"text":"At your package versions, since a mismatch is the usual cause.","correct":false,"tempting":"Names a real category of failure that produces different errors, typically at import time rather than deep inside a call."}]},"prev":{"slug":"when-the-model-breaks-your-app","title":"When the model breaks your app","url":"https://addaly.com/learn/building-apps-with-ai/when-the-model-breaks-your-app"},"next":{"slug":"classifying-the-failure","title":"Classifying the failure before you fix it","url":"https://addaly.com/learn/building-apps-with-ai/classifying-the-failure"},"authorship":"Founder and series editor: Dr Mustafa Mun. Written by AI models to a written standard. Exam keys checked blind by a second model: 3,665 of 3,666 agreed. Academic review invited.","review":{"status":"Draft, open for academic review"},"cite":"Addaly (2026) 'The anatomy of an error message', in Building Apps with AI. Edited by M. Mun. Addaly. Available at: https://addaly.com/learn/building-apps-with-ai/anatomy-of-an-error-message (Accessed: 13 October 2026).","licence":{"name":"CC BY-NC-SA 4.0","url":"https://creativecommons.org/licenses/by-nc-sa/4.0/"},"reader":{"schema":1,"title":"The anatomy of an error message","courseTitle":"Building Apps with AI","module":{"index":4,"slug":"when-it-breaks","title":"When it breaks, and getting back"},"answer":null,"keyIdea":"Read the error type, the message, and the first stack line naming your own file; the frame below the crash usually holds the mistake that produced the bad value.","hero":{"kind":"figure","figure":{"t":"figure","label":"Figure","figure":{"type":"stack","title":"The four parts of an error, always in the same places","layers":[{"label":"The type: TypeError","detail":"a small vocabulary, each pointing somewhere specific"},{"label":"The message: cannot read properties of undefined","detail":"what went wrong, in words"},{"label":"The stack: the first line naming your own file","detail":"app/components/BookingCard.tsx"},{"label":"The position: 23:31","detail":"line 23, character 31"}],"caption":"People stop reading at the first line. The third part is the one that tells you where to go, and the lines mentioning node_modules are the library’s internals."},"alt":"Figure: The four parts of an error, always in the same places. Layers, top to bottom: The type: TypeError (a small vocabulary, each pointing somewhere specific); The message: cannot read properties of undefined (what went wrong, in words); The stack: the first line naming your own file (app/components/BookingCard.tsx); The position: 23:31 (line 23, character 31). People stop reading at the first line. The third part is the one that tells you where to go, and the lines mentioning node_modules are the library’s internals."}},"blocks":[{"t":"h2","id":"errors-are-structured-not-noise","runs":[{"text":"Errors are structured, not noise"}]},{"t":"p","runs":[{"text":"An error looks like a wall of text because nobody showed you which parts to read. There are only four, and they are in the same places every time."}]},{"t":"code","lang":"","label":"Text","text":"TypeError: Cannot read properties of undefined (reading 'name')\n    at BookingCard (/app/components/BookingCard.tsx:23:31)\n    at renderWithHooks (/node_modules/react-dom/cjs/react-dom.js:14985:18)\n    at mountIndeterminateComponent (/node_modules/react-dom/cjs/react-dom.js:17811:13)"},{"t":"p","runs":[{"text":"The type.","b":true},{"text":" "},{"text":"TypeError","code":true},{"text":". A small vocabulary covers most of them and each points somewhere specific."}]},{"t":"p","runs":[{"text":"The message.","b":true},{"text":" What went wrong in words. Here: something was undefined and the code asked it for "},{"text":".name","code":true},{"text":"."}]},{"t":"p","runs":[{"text":"The stack.","b":true},{"text":" Where it happened, innermost first. The first line naming "},{"text":"your","b":true},{"text":" file is the one that matters. Lines mentioning "},{"text":"node_modules","code":true},{"text":" are the library’s internals, and reading them is nearly always a waste."}]},{"t":"p","runs":[{"text":"The position.","b":true},{"text":" "},{"text":"23:31","code":true},{"text":" is line 23, character 31."}]},{"t":"p","runs":[{"text":"Four pieces, and the third is the one people miss because they stop reading at the first line."}]},{"t":"h2","id":"the-error-types-worth-recognising","runs":[{"text":"The error types worth recognising"}]},{"t":"p","runs":[{"text":"TypeError: Cannot read properties of undefined","b":true,"code":true},{"text":": you have something you thought was an object and it is not there. Usually data that did not load, or a field with a different name than you expected. The most common runtime error in JavaScript by a wide margin."}]},{"t":"p","runs":[{"text":"ReferenceError: x is not defined","b":true,"code":true},{"text":": a name that does not exist in scope. A missing import, or a typo, or code using a browser API on the server."}]},{"t":"p","runs":[{"text":"SyntaxError","b":true,"code":true},{"text":": the file cannot be parsed at all. Usually a missing bracket, and the reported line is often just after the real problem."}]},{"t":"p","runs":[{"text":"ECONNREFUSED","b":true,"code":true},{"text":": nothing is listening at the address something tried to reach. Your database is not running, or the URL is wrong, or the port is."}]},{"t":"p","runs":[{"text":"Module not found","b":true,"code":true},{"text":": an import that does not resolve. A missing dependency, a typo in the path, or wrong capitalisation, which works on your Mac and fails on Linux."}]},{"t":"p","runs":[{"text":"Hydration failed","b":true,"code":true},{"text":" in React: the HTML the server produced and the HTML the browser produced disagree. Almost always something non-deterministic in a component: "},{"text":"Date.now()","code":true},{"text":", "},{"text":"Math.random()","code":true},{"text":", or a value read from the browser during a server render."}]},{"t":"p","runs":[{"text":"EADDRINUSE","b":true,"code":true},{"text":": the port is already taken by a server you started earlier and forgot."}]},{"t":"h2","id":"read-from-the-bottom-of-your-own-frames","runs":[{"text":"Read from the bottom of your own frames"}]},{"t":"p","runs":[{"text":"When several of your own files appear in the stack, the top one is where it crashed and the lower ones are how it got there. Both matter. The crash location tells you what broke; the caller tells you what fed it the bad value, and that is usually where the actual mistake lives."}]},{"t":"p","runs":[{"text":"A null booking crashing in "},{"text":"BookingCard","code":true},{"text":" was probably created by a query in "},{"text":"page.tsx","code":true},{"text":" that returned nothing. Fixing "},{"text":"BookingCard","code":true},{"text":" to tolerate the null is sometimes right and sometimes hides the real problem, which is that the query is wrong."}]},{"t":"h2","id":"server-errors-versus-browser-errors","runs":[{"text":"Server errors versus browser errors"}]},{"t":"p","runs":[{"text":"Same vocabulary, different places to look."}]},{"t":"p","runs":[{"text":"A "},{"text":"browser","b":true},{"text":" error appears in the devtools console. The user sees a broken screen and you see red text."}]},{"t":"p","runs":[{"text":"A "},{"text":"server","b":true},{"text":" error appears in your terminal locally, and in your host’s log viewer in production. The user sees a 500 page with no detail, deliberately: the message is hidden because error messages leak information about your system. So a user reporting “it says something went wrong” has given you all they have, and the actual error is in your logs."}]},{"t":"p","runs":[{"text":"This is why the deployment lesson insists you find your host’s log page before you need it."}]},{"t":"h2","id":"what-to-include-when-you-pass-it-on","runs":[{"text":"What to include when you pass it on"}]},{"t":"p","runs":[{"text":"A good error report to a model or a human has five parts, and takes thirty seconds:"}]},{"t":"ol","start":1,"items":[[{"text":"The full error, first three lines minimum, uncut."}],[{"text":"The first line of the stack that names your own file."}],[{"text":"What you did immediately before it."}],[{"text":"Whether it happens every time."}],[{"text":"What you already tried."}]]},{"t":"p","runs":[{"text":"The fifth stops you receiving the same suggestion twice, which is otherwise the most common way these conversations go in circles."}]},{"t":"h2","id":"the-errors-that-lie","runs":[{"text":"The errors that lie"}]},{"t":"p","runs":[{"text":"Two cases where the message points at the wrong place."}]},{"t":"p","runs":[{"text":"A missing bracket","b":true},{"text":" reports a line well after the real one, because the parser only notices something is wrong when it reaches something impossible."}]},{"t":"p","runs":[{"text":"A crash inside a library","b":true},{"text":" reports the library’s file. The cause is almost always the value you passed in, one or two frames down the stack in your own code. Look there first, and resist the urge to conclude that a widely used library is broken."}]}],"check":{"question":[{"text":"A crash reports a line inside a library in node_modules. Where should you look?"}],"options":[{"text":[{"text":"At the library’s source, since that is where execution stopped."}],"correct":false,"tempting":[{"text":"Follows the report literally to code you did not write and cannot change, which is where the symptom appeared rather than where the cause is."}]},{"text":[{"text":"At the library’s issue tracker, in case this is a known bug."}],"correct":false,"tempting":[{"text":"Reasonable eventually and premature now; widely used libraries mostly fail because of what was passed in."}]},{"text":[{"text":"At the nearest frame in your own code, which supplied the value the library could not handle."}],"correct":true,"tempting":null},{"text":[{"text":"At your package versions, since a mismatch is the usual cause."}],"correct":false,"tempting":[{"text":"Names a real category of failure that produces different errors, typically at import time rather than deep inside a call."}]}],"order":[0,1,2,3],"why":null},"prev":{"slug":"when-the-model-breaks-your-app","title":"When the model breaks your app","minutes":8},"next":{"slug":"classifying-the-failure","title":"Classifying the failure before you fix it","minutes":8}}}