fullstory-component-wellbeing

What problem does it solve?

Cross-framework frontend wellbeing monitoring is difficult due to inconsistent observability signals across React, Vue, Angular, Svelte, and React Native. This skill provides a unified approach to surface component health, rendering stability, and performance issues to Fullstory, enabling faster diagnosis and healthier user experiences.

Core Features & Use Cases

• Universal semantic attributes (data-component, data-state, data-testid) to anchor components in dashboards and searches across all frameworks.
• Framework-specific error boundary patterns: capture and report errors with component context via FS('setVars') and FS('event').
• Hydration and render health monitoring: detect hydration failures and long renders to triage performance regressions.
• Compatibility with multiple ecosystems: React, Vue, Angular, Svelte, React Native recipes and examples.

Quick Start

1. Add data-component attributes to key UI components and toggle data-state between loading, ready, and error.
2. Implement framework-specific error boundaries and log health events using FS('setVars') and FS('event').
3. Reference the Examples in SKILL.md to extend to hydration checks and long-run performance monitoring.