SigNoz

Compare Storybook screenshots before and after a code change in both dark and light themes. Check rendering noise, annotate meaningful differences, and export a shareable visual report that helps reviewers see what changed and what stayed identical.

• Compare screens before and after a code change
• Check visual regressions in dark and light themes
• Share annotated screenshot comparisons in a PR

Generate page and component folder structures with a command, keeping related files together by feature. Create tabbed page shells, starter tests, and README files, and register page routes within the supplied frontend structure.

• Starting a page with a consistent folder structure
• Creating a page shell with multiple tabs
• Adding components within a feature

Build Storybook page stories for SigNoz by mapping API requests, display states, and URL parameters. Use msw mock responses, which simulate API replies, and controls to inspect loading, errors, permissions, and other page states.

• Creating Storybook stories for SigNoz pages
• Switching between loading, empty, and error states
• Checking how permissions affect buttons and controls

Refactor state held in Redux or React Context by separating API data, URL settings, shared interface state, and local component state. Move each part to React Query, nuqs, Zustand, or React’s local state hooks.

• Migrating away from Redux or React Context
• Removing duplicate storage of API responses
• Sharing filters and pagination through URLs