react-observabilitylisted
Install: claude install-skill aiskillstore/marketplace
# React Observability
## Problem Statement
Silent failures are debugging nightmares. Code that returns early without logging, error messages that lack context, and missing observability make production issues impossible to diagnose. Write code as if you'll debug it at 3am with only logs.
---
## Pattern: No Silent Early Returns
**Problem:** Early returns without logging create invisible failure paths.
```typescript
// WRONG - silent death
const saveData = (id: string, value: number) => {
if (!validIds.has(id)) {
return; // ❌ Why did we return? No one knows.
}
// ... save logic
};
// CORRECT - observable
const saveData = (id: string, value: number) => {
if (!validIds.has(id)) {
logger.warn('[saveData] Dropping save - invalid ID', {
id,
value,
validIds: Array.from(validIds),
});
return;
}
// ... save logic
};
```
**Rule:** Every early return should log why it's returning, with enough context to diagnose.
---
## Pattern: Error Message Design
**Problem:** Error messages that don't help diagnose the issue.
```typescript
// BAD - no context
throw new Error('Data not found');
// BAD - slightly better but still useless at 3am
throw new Error('Data not found. Please try again.');
// GOOD - diagnostic context included
throw new Error(
`Data not found. ID: ${id}, ` +
`Available: ${Object.keys(data).length} items, ` +
`Last fetch: ${lastFetchTime}. This may indicate a caching issue.`
);
```
**Error message template:**
``