react-observability
Build Observable React Applications with Smart Logging
Silent failures make debugging impossible. This skill teaches you to write React code with built-in observability through structured logging, contextual error messages, and production-ready debugging patterns.
์คํฌ ZIP ๋ค์ด๋ก๋
Claude์์ ์ ๋ก๋
์ค์ โ ๊ธฐ๋ฅ โ ์คํฌ โ ์คํฌ ์ ๋ก๋๋ก ์ด๋
ํ ๊ธ์ ์ผ๊ณ ์ฌ์ฉ ์์
ํ ์คํธํด ๋ณด๊ธฐ
"react-observability" ์ฌ์ฉ ์ค์ ๋๋ค. Add logging to track why users are hitting the 'item not found' error in the cart
์์ ๊ฒฐ๊ณผ:
The skill provides a logger wrapper that logs when cart items are missing, including the item ID, current cart state, last sync time, and a hypothesis that the cache may be stale. This gives developers enough context to diagnose the issue from production logs.
"react-observability" ์ฌ์ฉ ์ค์ ๋๋ค. Help me debug this checkout flow that sometimes fails silently
์์ ๊ฒฐ๊ณผ:
The skill generates a flow tracing pattern with a unique checkout ID, logging each step of validation, payment processing, and order confirmation with timestamps and state snapshots, making it easy to identify where the flow stops in production.
"react-observability" ์ฌ์ฉ ์ค์ ๋๋ค. Create an error boundary that captures component crashes with full context
์์ ๊ฒฐ๊ณผ:
The skill provides an ErrorBoundary component that catches rendering errors, logs the error message, stack trace, and component stack, reports to error monitoring services, and displays a fallback UI to prevent full app crashes.
๋ณด์ ๊ฐ์ฌ
์์ Educational skill providing React observability best practices. All static findings are false positives from documentation examples in markdown code blocks. No executable code or security risks detected.
ํ์ง ์ ์
๋ง๋ค ์ ์๋ ๊ฒ
Debug Production Issues Without Source Maps
Add comprehensive logging to React components so production errors include enough context to diagnose issues from logs alone, even when source maps are unavailable.
Implement Observability in New React Features
Design new features with observability from the start by adding structured logging, error boundaries, and flow tracing to complex user workflows.
Audit Existing Code for Silent Failures
Review existing React components to identify and fix silent early returns, missing error context, and unhandled promise rejections that make debugging difficult.
์ด ํ๋กฌํํธ๋ฅผ ์ฌ์ฉํด ๋ณด์ธ์
Add structured logging to this React component with proper error context and state snapshots
Improve this error message to include diagnostic context, relevant state, and a hypothesis about the cause
Add flow tracing with unique identifiers to this multi-step async operation so I can track execution in logs
Create a logging utility that automatically redacts sensitive fields like passwords, tokens, and API keys from log output
๋ชจ๋ฒ ์ฌ๋ก
- Log every early return with enough context to understand why the code path was taken and what state led to it
- Include a hypothesis in error messages about what might have caused the failure to speed up debugging
- Use unique flow identifiers for multi-step operations so you can trace entire workflows in log aggregation tools
ํผํ๊ธฐ
- Logging sensitive data like passwords, tokens, or API keys without redaction can expose credentials in log files
- Generic error messages without context force developers to add logging and redeploy to diagnose production issues
- Silent catches that swallow errors without logging make it impossible to know when failures occur in production
์์ฃผ ๋ฌป๋ ์ง๋ฌธ
Does this skill work with React Native?
How do I integrate with my existing logging service?
Will adding all this logging slow down my app?
Can I use this with TypeScript?
How do I prevent logging sensitive user data?
What if I need to debug in production right now?
๊ฐ๋ฐ์ ์ธ๋ถ ์ ๋ณด
์์ฑ์
CJHarmath๋ผ์ด์ ์ค
MIT
๋ฆฌํฌ์งํ ๋ฆฌ
https://github.com/CJHarmath/claude-agents-skills/tree/main/skills/react-observability์ฐธ์กฐ
main
ํ์ผ ๊ตฌ์กฐ
๐ SKILL.md