[WEB-4603] feat: add missing event trackers#7513
Conversation
|
Caution Review failedThe pull request is closed. WalkthroughThis change introduces and standardizes event tracking across multiple UI components and flows, particularly for project view actions, onboarding, authentication, and product updates. It adds new event and element constants, updates component props to support tracking, and injects tracking calls and data attributes to capture user interactions throughout the application. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI_Component
participant EventTracker
User->>UI_Component: Interacts (e.g., clicks button)
UI_Component->>EventTracker: captureClick/captureView/captureSuccess/captureError(event, data)
EventTracker-->>UI_Component: (Event recorded)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Pull Request Linked with Plane Work Items Comment Automatically Generated by Plane |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (19)
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx(2 hunks)apps/web/app/(all)/accounts/set-password/page.tsx(4 hunks)apps/web/ce/helpers/command-palette.ts(2 hunks)apps/web/core/components/command-palette/actions/project-actions.tsx(2 hunks)apps/web/core/components/global/product-updates/footer.tsx(2 hunks)apps/web/core/components/global/product-updates/modal.tsx(3 hunks)apps/web/core/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx(2 hunks)apps/web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx(2 hunks)apps/web/core/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx(2 hunks)apps/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx(2 hunks)apps/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx(2 hunks)apps/web/core/components/issues/issue-layouts/save-filter-view.tsx(2 hunks)apps/web/core/components/onboarding/profile-setup.tsx(3 hunks)apps/web/core/components/views/delete-view-modal.tsx(2 hunks)apps/web/core/components/views/modal.tsx(2 hunks)apps/web/core/components/views/quick-actions.tsx(4 hunks)apps/web/core/components/views/update-view-component.tsx(3 hunks)apps/web/core/components/views/views-list.tsx(3 hunks)packages/constants/src/event-tracker/core.ts(5 hunks)
🧰 Additional context used
🧠 Learnings (11)
apps/web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx (1)
Learnt from: mathalav55
PR: #6452
File: web/helpers/issue.helper.ts:6-6
Timestamp: 2025-01-24T09:37:19.339Z
Learning: In the Plane codebase, ISSUE_DISPLAY_FILTERS_BY_LAYOUT and ISSUE_DISPLAY_FILTERS_BY_PAGE are two distinct constants serving different purposes - one for layout-level filters and another for page-level filters. They are not interchangeable and should coexist.
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx (2)
Learnt from: prateekshourya29
PR: #7188
File: web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx:40-45
Timestamp: 2025-06-18T09:46:08.566Z
Learning: When reviewing breadcrumb components that accept projectId or similar props, check if empty strings are being passed during loading states, which can result in invalid URLs. The preferred approach is to handle these loading states internally within the component rather than requiring each consumer to manage the loading logic.
Learnt from: vamsikrishnamathala
PR: #7061
File: web/core/components/workspace-notifications/root.tsx:18-18
Timestamp: 2025-05-14T13:16:23.323Z
Learning: In the Plane project codebase, the path alias @/plane-web resolves to the ce directory, making imports like @/plane-web/hooks/use-notification-preview correctly resolve to files in web/ce/hooks/.
apps/web/core/components/views/delete-view-modal.tsx (1)
Learnt from: vamsikrishnamathala
PR: #7061
File: web/core/components/workspace-notifications/root.tsx:18-18
Timestamp: 2025-05-14T13:16:23.323Z
Learning: In the Plane project codebase, the path alias @/plane-web resolves to the ce directory, making imports like @/plane-web/hooks/use-notification-preview correctly resolve to files in web/ce/hooks/.
apps/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx (2)
Learnt from: mathalav55
PR: #6452
File: web/helpers/issue.helper.ts:6-6
Timestamp: 2025-01-24T09:37:19.339Z
Learning: In the Plane codebase, ISSUE_DISPLAY_FILTERS_BY_LAYOUT and ISSUE_DISPLAY_FILTERS_BY_PAGE are two distinct constants serving different purposes - one for layout-level filters and another for page-level filters. They are not interchangeable and should coexist.
Learnt from: vamsikrishnamathala
PR: #7214
File: web/core/store/issue/helpers/base-issues.store.ts:117-117
Timestamp: 2025-06-16T07:23:39.497Z
Learning: In the updateIssueDates method of BaseIssuesStore (web/core/store/issue/helpers/base-issues.store.ts), the projectId parameter is intentionally made optional to support override implementations in subclasses. The base implementation requires projectId and includes an early return check, but making it optional allows derived classes to override the method with different parameter requirements.
apps/web/core/components/views/views-list.tsx (1)
Learnt from: vamsikrishnamathala
PR: #7061
File: web/core/components/workspace-notifications/root.tsx:18-18
Timestamp: 2025-05-14T13:16:23.323Z
Learning: In the Plane project codebase, the path alias @/plane-web resolves to the ce directory, making imports like @/plane-web/hooks/use-notification-preview correctly resolve to files in web/ce/hooks/.
apps/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx (2)
Learnt from: mathalav55
PR: #6452
File: web/helpers/issue.helper.ts:6-6
Timestamp: 2025-01-24T09:37:19.339Z
Learning: In the Plane codebase, ISSUE_DISPLAY_FILTERS_BY_LAYOUT and ISSUE_DISPLAY_FILTERS_BY_PAGE are two distinct constants serving different purposes - one for layout-level filters and another for page-level filters. They are not interchangeable and should coexist.
Learnt from: vamsikrishnamathala
PR: #7214
File: web/core/store/issue/helpers/base-issues.store.ts:117-117
Timestamp: 2025-06-16T07:23:39.497Z
Learning: In the updateIssueDates method of BaseIssuesStore (web/core/store/issue/helpers/base-issues.store.ts), the projectId parameter is intentionally made optional to support override implementations in subclasses. The base implementation requires projectId and includes an early return check, but making it optional allows derived classes to override the method with different parameter requirements.
apps/web/ce/helpers/command-palette.ts (1)
Learnt from: vamsikrishnamathala
PR: #7061
File: web/core/components/workspace-notifications/root.tsx:18-18
Timestamp: 2025-05-14T13:16:23.323Z
Learning: In the Plane project codebase, the path alias @/plane-web resolves to the ce directory, making imports like @/plane-web/hooks/use-notification-preview correctly resolve to files in web/ce/hooks/.
apps/web/core/components/global/product-updates/modal.tsx (1)
Learnt from: vamsikrishnamathala
PR: #7061
File: web/core/components/workspace-notifications/root.tsx:18-18
Timestamp: 2025-05-14T13:16:23.323Z
Learning: In the Plane project codebase, the path alias @/plane-web resolves to the ce directory, making imports like @/plane-web/hooks/use-notification-preview correctly resolve to files in web/ce/hooks/.
apps/web/core/components/views/quick-actions.tsx (1)
Learnt from: vamsikrishnamathala
PR: #7061
File: web/core/components/workspace-notifications/root.tsx:18-18
Timestamp: 2025-05-14T13:16:23.323Z
Learning: In the Plane project codebase, the path alias @/plane-web resolves to the ce directory, making imports like @/plane-web/hooks/use-notification-preview correctly resolve to files in web/ce/hooks/.
apps/web/core/components/onboarding/profile-setup.tsx (1)
Learnt from: lifeiscontent
PR: #7004
File: tests/integration-tests/tests/auth.setup.ts:11-14
Timestamp: 2025-06-06T19:03:04.891Z
Learning: When setting up Playwright authentication for integration tests, use multiple authentication setups (admin.setup.ts, user.setup.ts, logged-out.setup.ts) with separate projects in playwright.config.ts rather than a single shared authentication state. This prevents architectural debt and makes it easier to test different user roles and logged-out scenarios.
apps/web/core/components/command-palette/actions/project-actions.tsx (1)
Learnt from: vamsikrishnamathala
PR: #7061
File: web/core/components/workspace-notifications/root.tsx:18-18
Timestamp: 2025-05-14T13:16:23.323Z
Learning: In the Plane project codebase, the path alias @/plane-web resolves to the ce directory, making imports like @/plane-web/hooks/use-notification-preview correctly resolve to files in web/ce/hooks/.
🔇 Additional comments (46)
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx (2)
6-6: LGTM! Proper import of tracking constants.The import correctly includes
PROJECT_VIEW_TRACKER_ELEMENTSfor event tracking functionality.
37-44: LGTM! Tracking attribute correctly applied.The
data-ph-elementattribute is properly added to the "Add view" button using the appropriate tracker constant. The button's functionality remains unchanged while enabling analytics tracking.apps/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx (2)
4-9: LGTM! Tracking constants import added correctly.The import properly includes
PROJECT_VIEW_TRACKER_ELEMENTSalongside existing constants for consistent tracking implementation.
102-102: LGTM! Tracking element prop correctly passed.The
trackerElementprop is properly passed to theSaveFilterViewcomponent using the appropriate constant for project header save button tracking.apps/web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx (2)
14-14: LGTM! Global view tracking constants imported correctly.The import properly includes
GLOBAL_VIEW_TRACKER_ELEMENTSwhich is the appropriate constant set for global view tracking, distinct from project view tracking.
193-193: LGTM! Tracking element prop correctly applied.The
trackerElementprop is properly passed to theUpdateViewComponentusing the appropriate global view tracker constant for the save view button.apps/web/core/components/global/product-updates/footer.tsx (1)
2-2: LGTM! User tracking constants imported correctly.The import properly includes
USER_TRACKER_EVENTSfor tracking user interactions with product update elements.apps/web/core/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx (2)
3-3: LGTM! Tracking constants import added correctly.The import properly includes
PROJECT_VIEW_TRACKER_ELEMENTSfor consistent project view tracking implementation across filter roots.
97-97: LGTM! Module-specific tracking element properly applied.The
trackerElementprop is correctly passed to theSaveFilterViewcomponent using the module-specific tracker constant, maintaining consistency with other filter root implementations.apps/web/core/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx (2)
3-3: LGTM! Import statement correctly updated.The addition of
PROJECT_VIEW_TRACKER_ELEMENTSto the import statement is consistent with the event tracking enhancement.
98-98: LGTM! Tracker element properly integrated.The
trackerElementprop is correctly passed to theSaveFilterViewcomponent with the appropriate constant for cycle header tracking.apps/web/core/components/command-palette/actions/project-actions.tsx (2)
6-11: LGTM! Tracker constants properly imported.The import statement correctly includes all necessary tracker element constants for comprehensive command palette tracking.
63-63: LGTM! Event tracking attribute added.The
data-ph-elementattribute is properly added to the "Create new view" command item for consistent tracking across command palette actions.apps/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx (2)
9-14: LGTM! Import statement properly updated.The addition of
PROJECT_VIEW_TRACKER_ELEMENTSto the existing import statement is correctly formatted and maintains good organization.
153-153: LGTM! Tracker element correctly integrated.The
trackerElementprop is properly passed to theUpdateViewComponentwith the appropriate constant for header save view button tracking.apps/web/core/components/views/delete-view-modal.tsx (3)
7-7: LGTM! Event tracking imports properly added.The necessary constants and helper functions for event tracking are correctly imported.
Also applies to: 12-12
51-56: LGTM! Success tracking properly implemented.The
captureSuccesscall is correctly placed after the success toast and includes appropriate payload data with the view ID.
64-70: LGTM! Error tracking properly implemented.The
captureErrorcall is correctly placed in the catch block and maintains consistency with the success tracking payload structure.apps/web/core/components/views/update-view-component.tsx (2)
13-13: LGTM! Tracker element prop properly added.The addition of the required
trackerElementprop makes the component more flexible and ensures consistent event tracking across different usage contexts.
25-25: LGTM! Dynamic tracker element properly implemented.The prop is correctly destructured and used in the
data-ph-elementattribute, enabling flexible tracking based on the component's usage context.Also applies to: 67-67
apps/web/ce/helpers/command-palette.ts (2)
7-7: LGTM: Consistent import additionThe import of
PROJECT_VIEW_TRACKER_ELEMENTSfollows the existing pattern and is properly used in the code.
82-85: LGTM: Proper event tracking implementationThe tracking implementation correctly follows the established pattern in this file. The
captureClickcall is properly placed after the modal toggle action, consistent with other shortcuts in the same function.apps/web/core/components/views/views-list.tsx (2)
4-4: LGTM: Proper imports for event trackingThe imports for
PROJECT_VIEW_TRACKER_ELEMENTSandcaptureClickare correctly added to support the new tracking functionality.Also applies to: 13-13
75-78: LGTM: Consistent event tracking implementationThe tracking implementation is well done:
captureClickis called after the modal toggle action- Uses the appropriate
EMPTY_STATE_CREATE_BUTTONelement identifier- Maintains the existing functionality while adding proper tracking
apps/web/core/components/issues/issue-layouts/save-filter-view.tsx (2)
17-17: LGTM: Proper interface extensionThe addition of
trackerElementas a required string property correctly extends the interface to support event tracking.
21-21: LGTM: Clean tracking implementationThe implementation properly:
- Destructures the new
trackerElementprop- Applies it as a
data-ph-elementattribute on the Button- Maintains component flexibility by accepting the tracking identifier from parent components
Also applies to: 35-35
apps/web/core/components/global/product-updates/modal.tsx (3)
1-1: LGTM: Proper imports for tracking functionalityThe imports are correctly added to support the new event tracking features:
useEffectfor view tracking on modal open- Tracking constants for element and event identifiers
captureViewhelper functionAlso applies to: 3-3, 10-10
26-30: LGTM: Proper view tracking implementationThe
useEffectcorrectly captures a view event when the modal opens. The dependency array[isOpen]ensures the tracking only fires when the modal state changes.
44-44: LGTM: Consistent link trackingThe
data-ph-elementattribute properly tracks clicks on the changelog link using the appropriate event constant.apps/web/app/(all)/accounts/set-password/page.tsx (4)
12-12: LGTM: Comprehensive tracking importsThe imports properly include all necessary tracking constants and helper functions for authentication event tracking.
Also applies to: 20-20
71-75: LGTM: Proper view tracking on component mountThe
useEffectcorrectly captures a view event when the set password form is displayed. The empty dependency array ensures it only runs once on mount.
103-105: LGTM: Complete success and error trackingThe tracking implementation properly captures both success and error scenarios:
captureSuccessis called after successful password creationcaptureErroris called when an error occurs- Both use the same event name for consistency
- Tracking doesn't interfere with existing error handling logic
Also applies to: 113-115
131-131: LGTM: Appropriate pageType updateThe change from
NON_AUTHENTICATEDtoSET_PASSWORDprovides more specific context for this authentication flow.apps/web/core/components/views/modal.tsx (3)
6-6: LGTM: Clean import additions for event trackingThe imports for tracking constants and helper functions are well-organized and follow the existing import structure.
Also applies to: 13-13
48-64: LGTM: Comprehensive tracking for view creationThe event tracking implementation correctly captures both success and error scenarios for view creation. The success event includes the view ID as payload, which is valuable for analytics.
71-90: LGTM: Consistent tracking implementation for view updatesThe tracking for view updates follows the same pattern as creation, maintaining consistency. Both success and error paths are properly instrumented with appropriate payloads.
apps/web/core/components/onboarding/profile-setup.tsx (3)
9-14: LGTM: Well-organized tracking importsThe import additions for tracking constants are properly structured and include all necessary elements for auth and onboarding tracking.
131-142: LGTM: Proper error handling with trackingThe password creation tracking correctly captures both success and error scenarios, providing valuable telemetry for the authentication flow.
199-210: LGTM: Smart conditional tracking for user choicesThe implementation intelligently tracks whether users chose to create a password or skip the step, providing useful insights into onboarding patterns. The tracking is properly placed after the promise resolution.
apps/web/core/components/views/quick-actions.tsx (3)
7-7: LGTM: Clean tracking importsThe imports for tracking elements and helper functions are properly placed and follow the existing import structure.
Also applies to: 15-15
87-93: LGTM: Elegant tracking wrapper for context menuThe approach of mapping menu items to include tracking calls is clean and maintainable. It preserves the original functionality while adding telemetry.
106-106: LGTM: Consistent tracking across menu interactionsThe tracking implementation covers both context menu and quick action clicks with appropriate element identifiers, ensuring comprehensive coverage of user interactions.
Also applies to: 116-116
packages/constants/src/event-tracker/core.ts (4)
271-271: LGTM: Appropriate auth tracking constantsThe additions for password creation tracking events and elements follow the existing naming conventions and are well-placed within the auth section.
Also applies to: 282-282
304-325: LGTM: Comprehensive project view tracking constantsThe new PROJECT_VIEW_TRACKER_EVENTS and PROJECT_VIEW_TRACKER_ELEMENTS sections are well-structured and provide comprehensive coverage for project view interactions. The naming is consistent with existing patterns.
369-374: LGTM: User tracking constants for changelogThe additions for changelog tracking are appropriately placed and follow the established naming conventions.
383-384: LGTM: Onboarding password tracking elementsThe new onboarding tracker elements for password creation scenarios are well-named and provide valuable insights into user onboarding choices.
* feat: add event trackers for password creation * feat: add event trackers for project views * feat: add event trackers for product updates and changelogs * chore: use element name instead of event name for changelog redirect link
2 participants
Description
Type of Change
Summary by CodeRabbit
New Features
Refactor
Chores
Bug Fixes