How to read an error message without panicking

Most debugging time is lost before the first edit. The first line often names the file and line; the next lines explain what the runtime expected and what it got. Read the whole report before touching the code.

TypeError: Cannot read properties of undefined (reading 'title')
    at LessonCard (LessonCard.jsx:8:17)
    at renderWithHooks (react-dom.development.js:15486:18)

A calm debugging sequence

1. 01
   Locate the boundary

   Which line produced the error, and which value was undefined there?

2. 02
   Trace the source

   Where should that value have come from? Add a log or a breakpoint at the boundary, not in ten places.

3. 03
   Fix the cause

   Guard the absence only if absence is valid. Otherwise fix the data flow that promised a value.

Do not silence the error with optional chaining before deciding whether the value is allowed to be missing. A hidden error is still a broken contract.