DEVPROD-22466 Add analytics indicating how long a user looked at a page. by khelif96 · Pull Request #1205 · evergreen-ci/ui

khelif96 · 2025-11-25T22:00:18Z

Description

In an effort to measure how long people spend performing investigations this pr add some new analytics events which track how long a user spends on an individual page.

Sign in to view

+        });
+      }
+    };
+  }, [enabled, sendEvent, trackSession, minDuration]);


Sign in to view

+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+
+      // Track session end
+      if (trackSession && stateChangeCount.current > 0) {


sophstad · 2025-12-01T21:09:47Z

+ * });
+ * ```
+ */
+export const usePageVisibilityAnalytics = ({


I think it would be preferable if we could use this hook without instantiating it on every page; it seems like it would be easy to forget to add this in the future. Do you think there's any way of doing that?

Also, leveraging the route_name param instead of the analytics object may be more helpful from a usability perspective. Is there any reason we must use identifier? At the very least, maybe omitting it would allow instantiating tracking in one parent component.

I removed it and its now based on route names and only instantiated at the root. We do however lose page specific metadata by only instantiating once. Since we can't inject things like project identifier.

…ross multiple components for consistency and improved tracking.

Sign in to view

+      stateChangeCount.current = 0;
+      lastVisibilityState.current = null;
+    };
+  }, [enabled, sendEvent, trackSession, minDuration, pathname]);


Sign in to view

+      if (duration < minDuration) {
+        visibilityStartTime.current = currentTime;
+        return;
+      }


sophstad · 2026-01-27T22:23:55Z

+      "visibility.timestamp": string;
+    };
+
+interface UsePageVisibilityAnalyticsOptions {


[nit] Preference to omit use from the typename

Suggested change

interface UsePageVisibilityAnalyticsOptions {

interface PageVisibilityAnalyticsOptions {

Could you also remove the field comments?

sophstad · 2026-01-27T22:24:45Z

+   * Helps avoid tracking rapid tab switches
+   * @default 1000
+   */
+  minDuration?: number;


[nit] Prefer minDurationMs

sophstad · 2026-01-27T22:34:25Z

+      "visibility.total_visible_ms": number;
+      "visibility.total_hidden_ms": number;
+      "visibility.state_changes": number;
+      "visibility.timestamp": string;


I don't think we should include timestamp on any of these since Honeycomb already attaches that data to a trace

sophstad · 2026-01-27T22:35:02Z

+
+type PageVisibilityAction =
+  | {
+      name: "System Event page became visible";


Naming nit... what's the idea behind "System Event" prefixing these?

sophstad · 2026-01-27T22:39:08Z

+      lastVisibilityState.current = null;
+    };
+  }, [enabled, sendEvent, trackSession, minDuration, pathname]);
+


I imagine the intent by using pathname as the dependency along with minDuration is to avoid query param tracking, but that doesn't seem to be working. Here are some duplicate events from a task's page automatically appended query params, I think we should only aim to log one:

(trace 1, trace 2)

The query param issue is gone, but I'm seeing double logging now because of things like a redirect from root -> user patches -> my user patches. Here's a good timeline. I imagine that could be kind of tricky to solve, but I do think it decreases the usefulness

sophstad · 2026-01-27T22:45:15Z

+  /**
+   * Whether to track the visibility changes
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Whether to track session start/end events
+   * @default true
+   */
+  trackSession?: boolean;


What are the use cases for these?

Removed track session

sophstad · 2026-01-27T22:47:20Z

+      name: "System Event page visibility session ended";
+      "visibility.total_visible_ms": number;
+      "visibility.total_hidden_ms": number;
+      "visibility.state_changes": number;


I might prefer to call this visibility_changes to clarify it's not referring to page navigation

sophstad · 2026-01-27T22:48:11Z

+      "visibility.timestamp": string;
+    }
+  | {
+      name: "System Event page visibility session started";


[nit] Could call this "Session started" since it's in the PageVisibility analytics object, your call

sophstad · 2026-01-27T22:48:19Z

+      "visibility.timestamp": string;
+    }
+  | {
+      name: "System Event page visibility session ended";


sophstad · 2026-01-27T22:49:46Z

+        }
+
+        try {
+          sendEvent({


Would it be possible to send all of these as spans within a trace 😳 I think that would be wayyyy more useful

Theoretically its possible but we would end up with a ginormous trace which may be less useful. (Thinking potential multi hour traces.)

Good point—I just found this timeline view (linked by session ID) which totally paints the same picture I was hoping for https://ui.honeycomb.io/mongodb-4b/environments/staging/session-timeline-experiment/f3c2231532c0bb2ed5492a608151770e 👍

sophstad · 2026-02-10T22:35:40Z

+      lastVisibilityState.current = null;
+    };
+  }, [enabled, sendEvent, trackSession, minDuration, pathname]);
+


The query param issue is gone, but I'm seeing double logging now because of things like a redirect from root -> user patches -> my user patches. Here's a good timeline. I imagine that could be kind of tricky to solve, but I do think it decreases the usefulness

sophstad · 2026-02-10T22:36:15Z

+      "visibility.duration_ms": number;
+    }
+  | {
+      name: "System Event page hidden";


Just to be clear, navigating to a new page should fire a page hidden event and then a new page visible event, right? That's what I'm observing

Good catch fixed, It should have also fixed the other issue

sophstad · 2026-02-27T00:16:16Z

+
+      try {
+        sendEvent({
+          name: "System Event session ended",


I fear I haven't been able to produce this event during this iteration, but I was on the previous review 🙁 honeycomb

Apparently this isn't super reliable and browsers don't consistently allow enough time for the component to unmount do you have any thoughts on how we should handle this?

I think removing pathname from the useEffect is the reason this no longer works (but that's still the right move imo). Claude had these two suggestions:

Use visibilitychange + navigator.sendBeacon() (most reliable)
The visibilitychange event with state "hidden" fires reliably on page unload in all modern browsers (it's part of the Page Lifecycle API). Combine it with navigator.sendBeacon(), which is specifically designed to guarantee delivery during page teardown. This would mean sending the session-ended telemetry outside of the OTel span pipeline, directly as a beacon to the Honeycomb endpoint.

Use pagehide event as a session-end signal
Register a pagehide listener (in the effect setup, not in cleanup) that sends the session summary. pagehide fires more reliably than relying on React unmount.

Sign in to view

+  const { sendEvent } = useAnalyticsRoot<PageVisibilityAction, string>(
+    "PageVisibility",
+    stableAttributes,
+  );


The default parameter `attributes = {}` created a new object on every render, causing useCallback to return a new sendEvent each cycle. This triggered spurious session-ended/session-started analytics events in usePageVisibilityAnalytics. Use a module-level constant instead. Co-Authored-By: Claude Code <noreply@anthropic.com>

khelif96 · 2026-03-24T18:26:06Z

evergreen retry

sophstad · 2026-04-06T14:25:53Z

+
+      try {
+        sendEvent({
+          name: "System Event session ended",


I think removing pathname from the useEffect is the reason this no longer works (but that's still the right move imo). Claude had these two suggestions:

Use visibilitychange + navigator.sendBeacon() (most reliable)
The visibilitychange event with state "hidden" fires reliably on page unload in all modern browsers (it's part of the Page Lifecycle API). Combine it with navigator.sendBeacon(), which is specifically designed to guarantee delivery during page teardown. This would mean sending the session-ended telemetry outside of the OTel span pipeline, directly as a beacon to the Honeycomb endpoint.

Use pagehide event as a session-end signal
Register a pagehide listener (in the effect setup, not in cleanup) that sends the session summary. pagehide fires more reliably than relying on React unmount.

khelif96 · 2026-04-14T16:58:10Z

@sophstad I think this should do it.

This canvas shows some of the insights I was hoping we can demonstrate with this change

sophstad

at last!! 🥳

khelif96 added 6 commits November 21, 2025 12:12

Export use page visibility analytics

c4233b7

Merge branch 'main' into DEVPROD-22466-2

d390b80

Add usePageVisibility analytics to parsley

ecfd76a

Add usePageVisibility Analytics to spruce

cb89606

Merge branch 'main' into DEVPROD-22466-2

5be039e

Fix ts errors

4041392

khelif96 requested a review from a team as a code owner November 25, 2025 22:00

khelif96 added spruce parsley lib Updates to the @evg-ui/lib package labels Nov 25, 2025

sentry bot reviewed Nov 25, 2025

View reviewed changes

sophstad reviewed Dec 1, 2025

View reviewed changes

khelif96 added 6 commits December 14, 2025 22:46

Merge branch 'main' into DEVPROD-22466-2

16a6fed

Refactor usePageVisibilityAnalytics to remove identifier parameter ac…

4dc5154

…ross multiple components for consistency and improved tracking.

Bump types

a949f3b

Merge branch 'main' into DEVPROD-22466-2

40b4412

app level visibility tracking

8ce6250

track page view on route changes

af7d0c8

khelif96 requested a review from sophstad December 31, 2025 22:07

Merge branch 'main' into DEVPROD-22466-2

0312bd5

sentry bot reviewed Jan 5, 2026

View reviewed changes

Comment thread packages/lib/src/analytics/hooks/usePageVisibilityAnalytics.ts Outdated

stateChangeCount.current = 0;

lastVisibilityState.current = null;

};

}, [enabled, sendEvent, trackSession, minDuration, pathname]);

This comment was marked as outdated.

Sign in to view

khelif96 added 4 commits January 5, 2026 14:38

Fix eslint

c8c2a85

bump types

b0064aa

Wrap in memoryrouter

27854d7

Merge branch 'main' into DEVPROD-22466-2

37ef080

sentry bot reviewed Jan 8, 2026

View reviewed changes

Comment thread packages/lib/src/analytics/hooks/usePageVisibilityAnalytics.ts Outdated

Comment on lines +112 to +115

if (duration < minDuration) {

visibilityStartTime.current = currentTime;

return;

}

This comment was marked as outdated.

Sign in to view

khelif96 added 3 commits January 13, 2026 21:13

Merge branch 'main' into DEVPROD-22466-2

dc9f85b

Merge branch 'main' into DEVPROD-22466-2

a75da00

Address claude comments

f035ba7

sophstad requested changes Jan 27, 2026

View reviewed changes

Merge branch 'main' into DEVPROD-22466-2

124613f

khelif96 requested a review from sophstad February 5, 2026 22:58

khelif96 added 3 commits February 5, 2026 18:02

CR

71d9283

codegen

657822e

Merge branch 'main' into DEVPROD-22466-2

2634e96

sophstad reviewed Feb 10, 2026

View reviewed changes

khelif96 added 2 commits February 25, 2026 22:09

Merge branch 'main' into DEVPROD-22466-2

168995f

Fix double events from page navigation changes

543bb4c

khelif96 requested a review from sophstad February 26, 2026 15:23

khelif96 added 2 commits February 26, 2026 18:46

Merge branch 'main' into DEVPROD-22466-2

77213de

Add commetns

6df9808

sophstad reviewed Feb 27, 2026

View reviewed changes

Merge branch 'main' into DEVPROD-22466-2

e1df67f

sentry bot reviewed Mar 19, 2026

View reviewed changes

Comment thread packages/lib/src/analytics/hooks/usePageVisibilityAnalytics.ts

Comment on lines +53 to +56

const { sendEvent } = useAnalyticsRoot<PageVisibilityAction, string>(

"PageVisibility",

stableAttributes,

);

This comment was marked as outdated.

Sign in to view

khelif96 requested a review from sophstad March 24, 2026 18:26

Merge branch 'main' into DEVPROD-22466-2

f004d72

sophstad requested changes Apr 6, 2026

View reviewed changes

khelif96 added 2 commits April 14, 2026 00:41

Merge branch 'main' into DEVPROD-22466-2

b6a0d41

Support session ended

47f4d06

khelif96 requested a review from sophstad April 14, 2026 16:58

sentry bot reviewed Apr 14, 2026

View reviewed changes

Comment thread packages/lib/src/analytics/hooks/usePageVisibilityAnalytics.ts

sophstad approved these changes Apr 14, 2026

View reviewed changes

Fix tests

3b1e7a9

khelif96 enabled auto-merge (squash) April 14, 2026 20:14

khelif96 merged commit 49bfda9 into evergreen-ci:main Apr 14, 2026
19 checks passed

khelif96 deleted the DEVPROD-22466-2 branch April 14, 2026 21:01

	interface UsePageVisibilityAnalyticsOptions {
	interface PageVisibilityAnalyticsOptions {

Conversation

khelif96 commented Nov 25, 2025

Description

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

sophstad Dec 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

khelif96 Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as outdated.

Uh oh!

khelif96 commented Mar 24, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

khelif96 commented Apr 14, 2026

Uh oh!

Uh oh!

sophstad left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

sophstad Dec 1, 2025 •

edited

Loading

khelif96 Feb 26, 2026 •

edited

Loading