How to Read a Stack Trace (Python, JavaScript, and Node.js)

What a Stack Trace Actually Is#

A stack trace is a snapshot of the call stack at the moment an error was thrown. It shows every function that was executing, in order, from the outermost call down to the line that crashed.

It is not random noise. Once you know how to read it, it is the fastest way to find any bug.

Python Stack Traces: Read Bottom-Up#

Traceback (most recent call last):
  File "main.py", line 42, in handle_request
    result = process_order(order_id)
  File "orders.py", line 18, in process_order
    user = get_user(order.user_id)
  File "users.py", line 7, in get_user
    return db.query(User).filter_by(id=uid).first().serialize()
AttributeError: 'NoneType' object has no attribute 'serialize'

Start at the bottom with the error message, then look at the frame directly above it. That is where your code crashed. The frames above that are the call chain, showing how execution got there.

In this example:

• The crash is in users.py line 7. .first() returned None.
• The call came from orders.py line 18.
• Which was called from main.py line 42.

The fix is in users.py. Add a None check after .first(). The other two frames are just context.

JavaScript and Node.js Stack Traces: Find Your Code#

TypeError: Cannot read properties of undefined (reading 'email')
    at formatUser (utils/format.js:23:18)
    at processResponse (api/users.js:45:12)
    at Layer.handle [as handle_request] (express/lib/router/layer.js:95:5)
    at next (express/lib/router/route.js:137:13)
    at Route.dispatch (express/lib/router/route.js:112:3)

Ignore all the framework frames from Express, React internals, and Node core. Find the first frame that points to your files. That is where the crash is.

Here, utils/format.js:23 is the crash, called from api/users.js:45. The Express frames are irrelevant. They only show how the request was routed.

React Stack Traces: The Component Tree#

React adds a component tree below the error:

TypeError: Cannot read properties of undefined (reading 'name')
    at UserProfile (components/UserProfile.jsx:34:18)
    at renderWithHooks (react-dom.development.js:...)
    ...
The above error occurred in the <UserProfile> component:
    at UserProfile
    at Dashboard
    at App

The component tree shows which component threw, inside which parent. Go to UserProfile.jsx:34. That is your crash. The parent tree tells you which prop might have been passed as undefined from Dashboard.

The 3-Second Rule#

When you see a stack trace, the 3-second process is:

1. Read the error type and message at the bottom. This tells you what broke.
2. Find the first frame pointing to your code. This tells you where it crashed.
3. Look one frame up. This tells you what called the crashing code.

Everything else in the trace is context you only need if those three steps do not give you enough information.

When the Stack Trace Is Not Enough#

The trace shows the call path. It does not show you why a variable was undefined three function calls ago. That requires reading across files.

DebugAI takes the stack trace and does exactly that: traverses the call chain through your local codebase, finds where the bad state originated, and gives you the fix.

Press Ctrl+Shift+D and it reads the trace from your terminal automatically. or recommended, Press Ctrl+Shift+P and search debugai to see all the commands and you can use as required

Install DebugAI free from the VS Code marketplace. First 5 debug sessions daily are free, no credit card needed.