What problem does it solve? Troubleshooting complex React applications—slow renders, silent errors, memory leaks, and unexplained re-renders—is difficult without structured tooling. This Skill provides ready-to-use patterns for instrumenting React apps with error boundaries, profilers, custom debug hooks, and API monitoring. ## Core Features & Use Cases - Error Boundaries & Logging: Catch render errors with a full-featured ErrorBoundary component that logs stack traces and component stacks to external services. - Performance Profiling: Wrap components in React Profiler to detect slow renders exceeding one 60fps frame, plus Redux DevTools configuration with action and state sanitizers. - Custom Debug Hooks: Track render counts, prop changes (why-did-you-update), memory usage, and cleanup leaks with reusable hooks. - Use Case: A production React app intermittently freezes. Use this Skill to add Profiler wrappers, memory monitoring hooks, and axios interceptors to pinpoint the slow component and leaking timer. ## Quick Start Use the react-debugging-advanced skill to add error boundaries and performance profiling to my React app so I can find the slow component.
