JavaScript Debugging With Call Stack Traces
Stack traces show the path to an error. Here is how to read them and use them to find bugs fast.
JavaScript Debugging With Call Stack Traces
A stack trace is a snapshot of the call stack at the moment an error is thrown. It is one of the most useful debugging tools in JavaScript.
What a Stack Trace Shows
Error: Cannot read property 'name' of undefined
at formatUser (app.js:12)
at renderProfile (app.js:25)
at handleClick (app.js:40)
at HTMLButtonElement.<anonymous> (app.js:55)
Read it top-to-bottom as: the error happened in formatUser at line 12, which was called by renderProfile at line 25, which was called by handleClick at line 40, and so on.
The top entry is where the error occurred. The bottom entry is the outermost caller.
How to Read It
- Start at the top: the file and line that actually threw.
- Walk down: each entry shows the caller of the previous one.
- The bottom is usually the entry point (event handler, module load, test runner).
Common Patterns
at Object.<anonymous>: the error happened at module load time, not inside a function call.at async function: the error is inside an async function. The trace may includePromise.thenframes.- Anonymous functions: arrow callbacks show as
<anonymous>. Use named functions for clearer traces.
Tips for Better Traces
- Name your functions:
function handleClick()not() => ...in critical paths. - Avoid try/catch that swallows: rethrow with
throw errto keep the trace intact. - Use source maps in production: minified code produces unreadable traces without them.
- Capture full traces: in Node.js, set
Error.stackTraceLimit = Infinityfor deeper traces.
Browser DevTools
Chrome DevTools' Sources tab shows the live call stack when paused at a breakpoint. You can inspect variables in each frame, which is more powerful than the text trace.
The Takeaway
A stack trace is the call stack at the moment of an error. Read it top-down: top is the error site, bottom is the entry point. Name functions, preserve rethrows, and use source maps to get readable traces in production.
A snapshot of the call stack at the moment an error is thrown. It lists the active frames from the error site down to the entry point, with file names and line numbers.
Start at the top, which is where the error occurred. Walk down to see the chain of callers. The bottom entry is usually the entry point like an event handler or module load.
Because the function is anonymous, often an arrow function callback. Naming your functions produces clearer, more debuggable stack traces.
Because the code is minified. Enable source maps in your build so the engine can map minified positions back to the original source files and lines.
Catching an error preserves its stack property. If you swallow the error or throw a new one without chaining, the original trace can be lost. Rethrow with throw err or use Error cause to preserve it.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.