🚀 Developer Error Message Translator

Turn cryptic error messages into plain English.
Instantly understand what went wrong, why it happened, and exactly how to fix it.

🧐 The Problem

We've all been there. You run your code, and the console spits out: TypeError: Cannot read properties of undefined (reading 'map') Error: Objects are not valid as a React child ReferenceError: Cannot access 'count' before initialization

These messages are accurate but not helpful. They tell you what broke, but rarely why or how to fix it.

✨ The Solution

Developer Error Message Translator takes these raw error strings and returns a structured, human-readable explanation with actionable fixes.

It supports:

• ⚛️ React: Hook rules, unique keys, re-renders, object rendering.
• 🟢 Node.js: Module errors, ESM vs CommonJS conflicts.
• 🌐 Network/API: Axios errors, Fetch failures, 404/500 codes.
• ⚡ Core JS: TypeErrors, ReferenceErrors, SyntaxErrors (including TDZ).
• 📦 NPM: Dependency conflicts (ERESOLVE), missing files (ENOENT).

📦 Installation

npm install developer-error-message-translator

🛠️ Usage

As a Function

Use it in your error boundaries, logging services, or CLI tools.

import translateError from 'developer-error-message-translator';

try {
  // Your buggy code
  const user = null;
  console.log(user.name);
} catch (error) {
  const helpful = translateError(error.message);
  
  console.log("🔍 Exploration:", helpful.explanation);
  console.log("❓ Possible Causes:", helpful.causes);
  console.log("✅ How to Fix:", helpful.fixes);
}

Output:

🔍 Exploration: You are trying to access the property 'name' on a variable that is currently 'null'.
❓ Possible Causes:
  - The variable hasn't been assigned a value yet.
  - You might be trying to access data from an API call before it has finished loading.
✅ How to Fix:
  - Use optional chaining: variable?.name
  - Check if the variable exists before accessing 'name'.
  - Initialize the variable with a default value.

CLI Tool

You can also valid errors directly from your terminal!

npx dev-translate "Error: Objects are not valid as a React child"

🏆 Supported Errors (30+ Scenarios)

React

• Objects are not valid as a React child
• Too many re-renders
• Each child in a list should have a unique "key" prop
• Invalid hook call
• Cannot update a component while rendering a different component

Node.js & NPM

• Cannot find module 'x'
• ReferenceError: require is not defined (ESM)
• SyntaxError: Unexpected token 'export' (CommonJS)
• ENOENT: no such file or directory
• npm ERR! ERESOLVE unable to resolve dependency tree

API & Network

• TypeError: Failed to fetch
• AxiosError: Network Error
• Request failed with status code 404 / 500
• EADDRINUSE: address already in use

Core JavaScript

• Cannot read property of undefined / null
• X is not a function
• Cannot destructure property
• Assignment to constant variable
• Cannot access 'X' before initialization (TDZ)
• Do not know how to serialize a BigInt
• Converting circular structure to JSON
• Unexpected token '<' (JSX in JS file)

🤝 Contributing

We love contributions! If you encounter an error that isn't translated well, please open an issue or submit a PR with a new pattern in src/patterns.

1. Fork the repo
2. Create your feature branch (git checkout -b feature/new-error)
3. Add your pattern and tests
4. Commit your changes
5. Push to the branch
6. Open a Pull Request

📄 License

ISC