error-rosetta（错误罗塞塔）

Error Rosetta

"The Rosetta Stone let scholars read Egyptian hieroglyphics by providing the same text in three languages. Your compiler already speaks three languages — the error code, the stack trace, and the actual problem. It just refuses to use the third one."

What It Does

You see this:

TypeError: Cannot read properties of undefined (reading 'map')
    at UserList (webpack-internal:///./src/components/UserList.tsx:14:23)
    at renderWithHooks (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:14985:18)
    at mountIndeterminateComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17811:13)

Error Rosetta gives you this:

PLAIN ENGLISH: Your UserList component is trying to call .map() on
something that doesn't exist yet. On line 14, you're accessing a
property that is undefined — probably because the data hasn't loaded
from the API when the component first renders.

ROOT CAUSE: src/components/UserList.tsx:14 accesses `users.map()`
but `users` is undefined on first render. Your useEffect that fetches
users hasn't completed yet.

FIX: Add a guard before mapping:
  {users?.map(...)}  or  {users && users.map(...)}

  Better: Initialize your state with an empty array:
  const [users, setUsers] = useState([]);

The Translation Layers

Layer 1: Error Identification

Every error message, no matter how cryptic, contains these decodable components:

Layer 2: Context Enrichment

Raw error → enriched with your codebase context:

ENRICHMENT PROCESS:
├── Read the file + line referenced in the error
├── Understand what the code is TRYING to do (not just what failed)
├── Check the data flow: where does the undefined/null/wrong-type value come from?
├── Check recent changes: did a recent commit introduce this?
├── Check patterns: does this error match a known pattern for this framework/language?
└── Check siblings: are similar errors happening elsewhere?

Layer 3: Plain Language Translation

The enriched error is translated into three outputs:

1. WHAT HAPPENED (one sentence, no jargon)
   "Your code tried to use a list of users before the list was loaded."

2. WHY IT HAPPENED (root cause, in your codebase)
   "useState(undefined) + useEffect(async fetch) = undefined on first render."

3. HOW TO FIX IT (specific to your code, not generic advice)
   "Line 8: Change useState() to useState([])"

Error Pattern Library

JavaScript/TypeScript

Python

Rust

Go

System/OS Errors

HTTP Errors

The Translation Process

INPUT: Error message, stack trace, or log output (paste the whole thing)

Phase 1: PARSE
├── Identify error type, code, message, and location
├── Extract stack trace frames
├── Identify the framework/language/tool that produced the error
└── Separate signal from noise (framework internals vs. your code)

Phase 2: LOCATE
├── Find YOUR code in the stack trace (skip framework frames)
├── Read the file and line where the error originated
├── Read the surrounding context (function, class, module)
└── Trace the data flow to the error point

Phase 3: DIAGNOSE
├── Match against known error patterns for this language/framework
├── Analyze the specific code context (not generic advice)
├── Identify the root cause (not the symptom)
├── Check: is this a new bug or a recurring pattern?
└── Check: did a recent change introduce this?

Phase 4: PRESCRIBE
├── Plain English explanation (one sentence)
├── Root cause in your code (specific file, line, variable)
├── Exact fix (code change, not concept)
├── Prevention (how to avoid this class of error in the future)
└── Confidence level (how certain is this diagnosis)

Output Format

╔══════════════════════════════════════════════════════════════╗
║                    ERROR ROSETTA                            ║
╠══════════════════════════════════════════════════════════════╣
║                                                              ║
║  ERROR: TypeError: Cannot read properties of undefined       ║
║         (reading 'map')                                      ║
║                                                              ║
║  TRANSLATION:                                                ║
║  Your UserList component renders before the API response     ║
║  arrives. On the first render, `users` is undefined, and     ║
║  you're calling .map() on undefined.                         ║
║                                                              ║
║  ROOT CAUSE:                                                 ║
║  src/components/UserList.tsx:8                                ║
║    const [users, setUsers] = useState();  ← initialized as  ║
║    undefined, not as empty array                             ║
║                                                              ║
║  FIX:                                                        ║
║  Line 8: useState()  →  useState([])                         ║
║                                                              ║
║  PREVENTION:                                                 ║
║  Always initialize state with the correct empty type:        ║
║    Arrays: useState([])                                      ║
║    Objects: useState(null) with explicit null check           ║
║    Strings: useState('')                                     ║
║                                                              ║
║  CONFIDENCE: 95% (matches React uninitialized-state pattern) ║
╚══════════════════════════════════════════════════════════════╝

When to Invoke

• Every time you see an error you don't immediately understand. That's the whole point.
• When onboarding in a new language or framework (the error messages are a new dialect)
• When the error is in a dependency's code and you need to understand what YOU did wrong
• When debugging a CI failure with a wall of log output
• When a user reports an error and you need to decode it fast

Why It Matters

Developers spend 35-50% of their time debugging. A significant portion of that time is spent understanding what the error message is telling them — not fixing the actual bug. The faster you decode the message, the faster you fix the problem.

Error Rosetta doesn't fix bugs. It removes the translation step between seeing the error and understanding the error. Everything after that is just typing.

Zero external dependencies. Zero API calls. Pure pattern matching and code analysis.