[UI Telemetry] Add rudimentary logging for navbar clicks by daniellok-db · Pull Request #19480 · mlflow/mlflow

daniellok-db · 2025-12-18T04:27:31Z

🥞 Stacked PR

Use this link to review incremental changes.

stack/documentation [Files changed]
- stack/logging-for-tabs [Files changed]

Related Issues/PRs

#xxx

What changes are proposed in this pull request?

Quick PR to add some rudimentary logging for tab clicks. Currently it is not logged due to the <Link> component not being a design system component (it's from react-router-dom).

Eventually it would be nice to have some context provider that automatically injects the current tab into the observability logs, but that will be a larger more complex change.

How is this PR tested?

Existing unit/integration tests
New unit/integration tests
Manual tests

Checked that logs are indeed logged:

Screen.Recording.2025-12-18.at.1.12.50.PM.mov

Does this PR require documentation update?

Release Notes

Is this a user-facing change?

No. You can skip the rest of this section.
Yes. Give a description of this change to be included in the release notes for MLflow users.

What component(s), interfaces, languages, and integrations does this PR affect?

Components

How should the PR be classified in the release notes? Choose one:

rn/none - No description will be included. The PR will be mentioned only by the PR number in the "Small Bugfixes and Documentation Updates" section
rn/breaking-change - The PR will be mentioned in the "Breaking Changes" section
rn/feature - A new user-facing feature worth mentioning in the release notes
rn/bug-fix - A user-facing bug fix worth mentioning in the release notes
rn/documentation - A user-facing documentation change worth mentioning in the release notes

Should this PR be included in the next patch release?

Yes should be selected for bug fixes, documentation updates, and other small changes. No should be selected for new features and larger changes. If you're unsure about the release classification of this PR, leave this unchecked to let the maintainers decide.

What is a minor/patch release?

Minor release: a release that increments the second part of the version number (e.g., 1.2.0 -> 1.3.0).
Bug fixes, doc updates and new features usually go into minor releases.
Patch release: a release that increments the third part of the version number (e.g., 1.2.0 -> 1.2.1).
Bug fixes and doc updates usually go into patch releases.

Yes (this PR will be cherry-picked and included in the next patch release)
No (this PR will be included in the next minor release)

daniellok-db · 2025-12-18T04:28:07Z

mlflow/server/js/src/telemetry/hooks/useLogTelemetryEvent.tsx

+import { DesignSystemObservabilityEvent } from '../types';
+import { telemetryClient } from '../TelemetryClient';
+
+export const useLogTelemetryEvent = () => {


this will be edge blocked upstream and replaced with something that works in non-OSS

daniellok-db · 2025-12-18T04:29:43Z

...src/experiment-tracking/pages/experiment-page-tabs/side-nav/ExperimentPageSideNavSection.tsx

  const { experimentId } = useParams();
  const { search } = useLocation();
+  const logTelemetryEvent = useLogTelemetryEvent();
+  const viewId = crypto.randomUUID();


this is not strictly accurate because viewId should be tied to the component itself, while this is generated in the parent component. however practically it's not a critical field and linking to parent is still better than nothing

daniellok-db · 2025-12-18T04:30:10Z

mlflow/server/js/src/common/components/MlflowSidebar.tsx

  const { theme } = useDesignSystemTheme();
  const invalidateExperimentList = useInvalidateExperimentList();
  const navigate = useNavigate();
+  const viewId = crypto.randomUUID();


same comment as below:

https://github.com/mlflow/mlflow/pull/19480/files/dd01b3d4c1aa5625e8b7181388d13610146a888a..47a827e3aa81416a580559437da70fa95b641049#r2629505477

github-actions · 2025-12-18T04:30:56Z

@daniellok-db Thank you for the contribution! Could you fix the following issue(s)?

⚠ DCO check

The DCO check failed. Please sign off your commit(s) by following the instructions here. See https://github.com/mlflow/mlflow/blob/master/CONTRIBUTING.md#sign-your-work for more details.

Copilot

Pull request overview

This PR adds rudimentary telemetry logging for navigation clicks in the MLflow UI. As part of a broader UI telemetry effort, it implements click tracking for sidebar navigation links and experiment page side navigation tabs.

Key Changes

Adds telemetry event logging hook (useLogTelemetryEvent) for tracking UI interactions
Implements click tracking for main sidebar navigation items and experiment page side navigation tabs
Introduces a new Settings page with telemetry preferences toggle
Adds informational alert about UI telemetry on the home page
Updates documentation with details about UI interaction metadata collection

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
mlflow/server/js/src/telemetry/utils.ts	Adds version constant for telemetry alert dismissal tracking
mlflow/server/js/src/telemetry/types.ts	Adds proper TypeScript types from design system for event types
mlflow/server/js/src/telemetry/hooks/useLogTelemetryEvent.tsx	New hook for logging telemetry events with callback wrapper
mlflow/server/js/src/telemetry/TelemetryInfoAlert.tsx	New component displaying informational alert about telemetry collection
mlflow/server/js/src/settings/SettingsPage.tsx	New settings page allowing users to toggle telemetry preferences
mlflow/server/js/src/lang/default/en.json	Adds localization strings for telemetry UI elements
mlflow/server/js/src/home/HomePage.tsx	Integrates telemetry info alert on home page
mlflow/server/js/src/experiment-tracking/routes.ts	Adds routing configuration for new settings page
mlflow/server/js/src/experiment-tracking/route-defs.ts	Registers settings page route definition
mlflow/server/js/src/experiment-tracking/pages/experiment-page-tabs/side-nav/constants.tsx	Adds componentId fields to side navigation items for telemetry tracking
mlflow/server/js/src/experiment-tracking/pages/experiment-page-tabs/side-nav/ExperimentPageSideNavSection.tsx	Implements click event logging for experiment page side navigation tabs
mlflow/server/js/src/experiment-tracking/pages/experiment-page-tabs/side-nav/ExperimentPageSideNav.tsx	Imports telemetry hook (unused)
mlflow/server/js/src/common/components/MlflowSidebar.tsx	Adds click event logging for main sidebar navigation, adds Settings link
docs/docs/community/usage-tracking.mdx	Documents UI interaction metadata and telemetry opt-out options

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-18T04:35:29Z

mlflow/server/js/src/common/components/MlflowSidebar.tsx

+        <Link
+          to={ExperimentTrackingRoutes.settingsPageRoute}
+          aria-current={isSettingsActive(location) ? 'page' : undefined}
+          css={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: theme.spacing.sm,
+            color: theme.colors.textPrimary,
+            paddingInline: theme.spacing.md,
+            paddingBlock: theme.spacing.sm,
+            borderRadius: theme.borders.borderRadiusSm,
+            '&:hover': {
+              color: theme.colors.actionLinkHover,
+              backgroundColor: theme.colors.actionDefaultBackgroundHover,
+            },
+            '&[aria-current="page"]': {
+              backgroundColor: theme.colors.actionDefaultBackgroundPress,
+              color: theme.isDarkMode ? theme.colors.blue300 : theme.colors.blue700,
+              fontWeight: theme.typography.typographyBoldFontWeight,
+            },
+          }}
+        >
+          <GearIcon />
+          <FormattedMessage defaultMessage="Settings" description="Sidebar link for settings page" />
+        </Link>


The Settings link is missing telemetry event logging. All other sidebar links have onClick handlers that log telemetry events, but the Settings link (lines 219-243) does not. This creates an inconsistency in telemetry data collection.

Add an onClick handler similar to the other links to ensure consistent telemetry tracking across all navigation elements.

Copilot · 2025-12-18T04:35:29Z

mlflow/server/js/src/common/components/MlflowSidebar.tsx

  const { theme } = useDesignSystemTheme();
  const invalidateExperimentList = useInvalidateExperimentList();
  const navigate = useNavigate();
+  const viewId = crypto.randomUUID();


The viewId is generated once when the component renders and reuses the same UUID for all click events. According to the documentation (line 315 in usage-tracking.mdx), the componentViewId should be "regenerated whenever the UI element rerenders."

Currently, crypto.randomUUID() is called directly in the component body (line 45), which means it only generates once when the component mounts. This should be wrapped in a useMemo with an empty dependency array, or better yet, generate a new UUID for each interaction if that's the intended behavior based on the documentation.

Copilot · 2025-12-18T04:35:30Z

...src/experiment-tracking/pages/experiment-page-tabs/side-nav/ExperimentPageSideNavSection.tsx

  const { experimentId } = useParams();
  const { search } = useLocation();
+  const logTelemetryEvent = useLogTelemetryEvent();
+  const viewId = crypto.randomUUID();


The viewId is generated once when the component renders and reuses the same UUID for all click events. According to the documentation (line 315 in usage-tracking.mdx), the componentViewId should be "regenerated whenever the UI element rerenders."

Currently, crypto.randomUUID() is called directly in the component body (line 35), which means it only generates once when the component mounts. This should be wrapped in a useMemo with an empty dependency array, or better yet, generate a new UUID for each interaction if that's the intended behavior based on the documentation.

this is relevant too actually

Copilot · 2025-12-18T04:35:30Z

mlflow/server/js/src/home/HomePage.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Header, useDesignSystemTheme } from '@databricks/design-system';
+import { Alert, Button, Header, useDesignSystemTheme } from '@databricks/design-system';


The imports Alert and Button from @databricks/design-system are not used anywhere in this file. These should be removed to keep the code clean.

Suggested change

import { Alert, Button, Header, useDesignSystemTheme } from '@databricks/design-system';

import { Header, useDesignSystemTheme } from '@databricks/design-system';

Copilot · 2025-12-18T04:35:30Z

...ver/js/src/experiment-tracking/pages/experiment-page-tabs/side-nav/ExperimentPageSideNav.tsx

+import { useLogTelemetryEvent } from '@mlflow/mlflow/src/telemetry/hooks/useLogTelemetryEvent';



The import useLogTelemetryEvent is not used anywhere in this file. It should be removed to keep the code clean.

Suggested change

import { useLogTelemetryEvent } from '@mlflow/mlflow/src/telemetry/hooks/useLogTelemetryEvent';

@daniellok-db This comment seems to be relevant

github-actions · 2025-12-18T04:38:18Z

Documentation preview for e4e6f4c is available at:

https://pr-19480--mlflow-docs-preview.netlify.app/docs/latest/

Changed Pages (1)

community/usage-tracking (modified)

More info

Ignore this comment if this PR does not change the documentation.
The preview is updated when a new commit is pushed to this PR.
This comment was created by this workflow run.
The documentation was built by this workflow run.

B-Step62

LGTM

B-Step62 · 2025-12-18T04:53:36Z

...ver/js/src/experiment-tracking/pages/experiment-page-tabs/side-nav/ExperimentPageSideNav.tsx

+import { useLogTelemetryEvent } from '@mlflow/mlflow/src/telemetry/hooks/useLogTelemetryEvent';



@daniellok-db This comment seems to be relevant

serena-ruan

LGTM!

hubertzub-db

lg with a suggestion

hubertzub-db · 2025-12-18T08:41:35Z

...src/experiment-tracking/pages/experiment-page-tabs/side-nav/ExperimentPageSideNavSection.tsx

  const { experimentId } = useParams();
  const { search } = useLocation();
+  const logTelemetryEvent = useLogTelemetryEvent();
+  const viewId = useMemo(() => crypto.randomUUID(), []);


I wonder if we could shove this inside useLogTelemetryEvent (which will be used as default componentViewId if not provided externally). This way, it's easier to reverse-EDGE-block in the future so it won't be executed in DB

tobyxdd · 2025-12-22T23:22:48Z

This change breaks HTTP deployments. On the front end users will see a blank screen with the this error message in the console "TypeError: crypto.randomUUID is not a function".

crypto.randomUUID() is only available when the connection is over HTTPS

hubertzub-db · 2025-12-30T12:05:08Z

@tobyxdd it should be fixed by #19644

This was referenced Dec 18, 2025

[UI Telemetry] Update documentation page with details on UI telemetry #19427

Merged

[UI Telemetry] Add settings page and info banner to control user opt-out #19351

Merged

daniellok-db commented Dec 18, 2025

View reviewed changes

daniellok-db changed the title ~~rudimentary logging~~ [UI Telemetry] Add rudimentary logging for navbar clicks Dec 18, 2025

daniellok-db marked this pull request as ready for review December 18, 2025 04:30

Copilot AI review requested due to automatic review settings December 18, 2025 04:30

Copilot started reviewing on behalf of daniellok-db December 18, 2025 04:31 View session

Copilot AI reviewed Dec 18, 2025

View reviewed changes

github-actions bot added v3.8.0 area/uiux Front-end, user experience, plotting, JavaScript, JavaScript dev server rn/none List under Small Changes in Changelogs. labels Dec 18, 2025

daniellok-db requested review from B-Step62, hubertzub-db and serena-ruan December 18, 2025 04:35

daniellok-db force-pushed the stack/logging-for-tabs branch 2 times, most recently from 5c3387c to 85186cb Compare December 18, 2025 04:52

B-Step62 approved these changes Dec 18, 2025

View reviewed changes

serena-ruan approved these changes Dec 18, 2025

View reviewed changes

github-actions bot assigned B-Step62 and serena-ruan Dec 18, 2025

daniellok-db added 6 commits December 18, 2025 15:42

add docs

d2dd18c

fix

914bdd1

comments and refine

47836a4

dnt

f8b351a

comments and simplify

67ae9cd

of

43f8e0c

daniellok-db force-pushed the stack/logging-for-tabs branch from 5021f8b to af235d3 Compare December 18, 2025 06:42

daniellok-db added 5 commits December 18, 2025 16:25

remove

85a0c7a

rudimentary logging

93a9317

settings

4984a83

fix

9a17433

fix tests

e4e6f4c

daniellok-db force-pushed the stack/logging-for-tabs branch from af235d3 to e4e6f4c Compare December 18, 2025 07:25

daniellok-db added this pull request to the merge queue Dec 18, 2025

hubertzub-db approved these changes Dec 18, 2025

View reviewed changes

Merged via the queue into mlflow:master with commit fbe920a Dec 18, 2025
54 of 55 checks passed

daniellok-db deleted the stack/logging-for-tabs branch December 18, 2025 08:43

WeichenXu123 pushed a commit to WeichenXu123/mlflow that referenced this pull request Dec 19, 2025

[UI Telemetry] Add rudimentary logging for navbar clicks (mlflow#19480)

8943f66

WeichenXu123 pushed a commit that referenced this pull request Dec 19, 2025

[UI Telemetry] Add rudimentary logging for navbar clicks (#19480)

b585270

tobyxdd mentioned this pull request Dec 23, 2025

Fix crypto.randomUUID() unavailable in HTTP contexts #19573

Open

29 tasks

	import { Alert, Button, Header, useDesignSystemTheme } from '@databricks/design-system';
	import { Header, useDesignSystemTheme } from '@databricks/design-system';

		import { useLogTelemetryEvent } from '@mlflow/mlflow/src/telemetry/hooks/useLogTelemetryEvent';

Conversation

daniellok-db commented Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🥞 Stacked PR

Related Issues/PRs

What changes are proposed in this pull request?

How is this PR tested?

Does this PR require documentation update?

Release Notes

Is this a user-facing change?

What component(s), interfaces, languages, and integrations does this PR affect?

How should the PR be classified in the release notes? Choose one:

Should this PR be included in the next patch release?

Uh oh!

daniellok-db Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

daniellok-db Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

daniellok-db Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Dec 18, 2025

⚠ DCO check

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

daniellok-db Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

B-Step62 Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

B-Step62 left a comment

Choose a reason for hiding this comment

Uh oh!

B-Step62 Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

serena-ruan left a comment

Choose a reason for hiding this comment

Uh oh!

hubertzub-db left a comment

Choose a reason for hiding this comment

Uh oh!

hubertzub-db Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

tobyxdd commented Dec 22, 2025

Uh oh!

hubertzub-db commented Dec 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

daniellok-db commented Dec 18, 2025 •

edited

Loading

github-actions bot commented Dec 18, 2025 •

edited

Loading