# Improve React Observability

React failures often hide behind silent returns and weak error messages. This skill gives Claude, Codex, and Claude Code practical patterns for logs, tracing, and safer diagnostics.

## Install

```bash
npx skillstore add cjharmath/react-observability
```

## Metadata

- Status: approved
- Slug: cjharmath-react-observability
- Skillstore revision: r1
- Version status: missing
- Tree hash: 3e7b2eb22ca119db8c1bdd528fc6fdbad829523caac01f1c669c29426f72f99c
- Author: CJHarmath
- GitHub username: CJHarmath
- License: MIT
- Repository: https://github.com/CJHarmath/claude-agents-skills/tree/main/skills/react-observability
- Ref: 02f077c174c5335e2f5d02ca15e77b70d9543e58
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, env\_access
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/cjharmath-react-observability
- Manifest: https://skillstore.pages.dev/api/skills/cjharmath-react-observability/manifest

## Capabilities

- Explains how to replace silent early returns with contextual warning logs.
- Shows how to write diagnostic error messages with function, state, and likely cause details.
- Defines structured logging levels and a small logger wrapper for React code.
- Demonstrates redaction of sensitive keys before logging application context.
- Covers flow tracing, state snapshots, assertion helpers, Sentry reporting, and React error boundaries.

## Use Cases

- Add Debuggable React Flows: Use the skill to add clear logs around async flows, state changes, and early returns.
- Improve Production Incident Context: Use the patterns to capture useful error details while avoiding sensitive data in reports.
- Standardize Team Logging Practices: Use the checklist and examples to align React and React Native contributors on observable code.

## Prompt Templates

### Review Logging Basics

```
Use the react-observability skill to review this React code. Identify silent returns, weak error messages, and missing context logs.
```

### Add Structured Logs

```
Use the react-observability skill to add structured logging to this React flow. Include log levels, context objects, and sensitive-data redaction guidance.
```

### Design Error Handling

```
Use the react-observability skill to design error handling for this feature. Include assertion helpers, error boundaries, and production reporting points.
```

### Audit Incident Observability

```
Use the react-observability skill to analyze this production incident path. Recommend logs, state snapshots, flow identifiers, and redaction rules.
```

## Limitations

- It is guidance only and does not install a logging library or monitoring backend.
- Examples need adaptation for each project logging policy and privacy rules.
- It does not provide dashboards, alert rules, or distributed tracing infrastructure.
- It cannot verify production telemetry quality without access to real logs and incidents.

## Best Practices

- Log why code exits early, and include only the context needed to diagnose the branch.
- Redact sensitive fields before sending context to consoles or error reporting services.
- Use consistent flow identifiers so one user action can be traced across multiple steps.

## Anti Patterns

- Do not add broad state dumps to production logs without privacy review.
- Do not swallow caught errors after logging unless the behavior is intentional and documented.
- Do not leave temporary debug logging enabled without a flag or clear removal plan.

## Security Audit

- Audited at: 2026-07-05T06:19:12.955\+00:00
- Summary: All static findings were adjudicated as false positives from Markdown formatting or TypeScript examples. I found no executable skill code, prompt injection attempt, credential access, shell execution, or malicious intent in SKILL.md.

## Stats

- Views: 200
- Downloads: 11
- Favorites: 0
- Popularity score: 0