feat: Add performance monitoring and analytics#9
Merged
Conversation
- Add web-vitals package for Core Web Vitals tracking (CLS, FCP, INP, LCP, TTFB) - Create analytics utility with support for multiple providers (GA4, Plausible, custom) - Track game events: game_won, game_lost, guess submissions, UI interactions - Integrate performance monitoring in application entry point - Add analytics tracking to key user interactions: - Game lifecycle events (won/lost with metadata) - Guess submissions and outcomes - UI interactions (shuffle, deselect, view results, share, info modal) - Update README with comprehensive analytics configuration guide - Maintain zero security vulnerabilities The analytics system is provider-agnostic and logs to console in development mode. In production, it automatically sends data to configured analytics providers without requiring code changes.
Resolves MODULE_TYPELESS_PACKAGE_JSON warning when running tests. This warning appeared because .storybook/main.js uses ES modules syntax without package.json explicitly declaring type: module.
- Added name: react-connections-game - Added version: 1.0.0 - Added description - Added license: MIT - Added repository, bugs, homepage URLs - Added keywords for better discoverability Resolves missing package.json metadata from modernization checklist.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
This PR adds comprehensive performance monitoring and analytics support to the React Connections Game.
Changes Made
1. Performance Monitoring (Core Web Vitals)
web-vitalspackage (v5.1.0)src/lib/performance.jsutility for tracking:2. Game Analytics
src/lib/analytics.jswith provider-agnostic trackinggame_won,game_lost(with metadata)guess_submitted,guess_correct,guess_incorrectshuffle_clicked,deselect_clicked,view_results_clicked,share_score_clicked,info_modal_opened3. Analytics Integration Points
4. Multi-Provider Support
The analytics system supports multiple providers without code changes:
Configuration is done via simple HTML script tags or window object setup.
5. Documentation
Testing
npm run buildnpm auditBenefits
Files Changed
package.json&package-lock.json: Added web-vitals dependencysrc/lib/analytics.js: New analytics utility (NEW)src/lib/performance.js: New performance monitoring utility (NEW)src/index.js: Integrated performance monitoringsrc/providers/GameStatusProvider/GameStatusProvider.jsx: Added game event trackingsrc/components/GameControlButtonsPanel/GameControlButtonsPanel.jsx: Added action trackingsrc/components/ShareScoreButton/ShareScoreButton.jsx: Added share trackingsrc/components/modals/ViewResultsModal/ViewResultsModal.jsx: Added modal trackingsrc/components/modals/InfoModal/InfoModal.jsx: Added modal trackingREADME.md: Added comprehensive analytics documentationMigration Notes
No breaking changes. Analytics is opt-in - works immediately in development (console logs), requires simple configuration for production analytics.
Closes the final item (and-computers#10) from the modernization improvement list.