Skip to content

Fix UI blank page on plain HTTP by replacing crypto.randomUUID with uuid library#19644

Merged
WeichenXu123 merged 5 commits intomasterfrom
copilot/fix-ui-error-http-access
Dec 26, 2025
Merged

Fix UI blank page on plain HTTP by replacing crypto.randomUUID with uuid library#19644
WeichenXu123 merged 5 commits intomasterfrom
copilot/fix-ui-error-http-access

Conversation

Copy link
Contributor

Copilot AI commented Dec 26, 2025

Plan to Fix UI on Plain HTTP

The issue is that crypto.randomUUID() only works in secure contexts (HTTPS or localhost). We need to replace it with the uuid library which works in all contexts.

Changes Required:

  • Add uuid package to dependencies in mlflow/server/js/package.json
  • Replace crypto.randomUUID() in TelemetryClient.ts (installation ID generation)
  • Replace crypto.randomUUID() in TelemetryLogger.worker.ts (session ID generation)
  • Replace crypto.randomUUID() in ExperimentPageSideNavSection.tsx (view ID generation)
  • Replace crypto.randomUUID() in MlflowSidebar.tsx (view ID generation)
  • Install dependencies with yarn
  • Add TypeScript type declaration for uuid module with all common functions
  • Test the changes (run linter and type-check)
  • Build the project
  • Fix prettier formatting
  • Address code review feedback
  • Upgrade to latest uuid version (^13.0.0)
  • All quality checks passed

Summary

All crypto.randomUUID() calls have been successfully replaced with uuidv4() from the uuid library. The UI will now work correctly on plain HTTP connections.

Original prompt

This section details on the original issue you should resolve

<issue_title>[BUG] UI not working on plain HTTP</issue_title>
<issue_description>### MLflow version

3.8.0

System information

  • OS Platform and Distribution (e.g., Linux Ubuntu 16.04): Linux Ubuntu 24.04.1
  • Python version: 3.12.3
  • yarn version, if running the dev UI: N/A

Describe the problem

We are running an MLflow tracking server & UI on an internal VPN (Tailscale) and have so far been using plain HTTP to access the UI since the server is not exposed to the internet and it's simpler than generating certificates etc.

We recently switched to 3.8.0, and the UI stopped working (blank page). The tracking is still working fine, as is the Python client. This prompted me to look into the dev console, where the following JavaScript error appears:

Uncaught TypeError: crypto.randomUUID is not a function

As far as I understand, this is due to modern browsers only providing that function on HTTPS connections (or on connections to localhost). In Chrome I can manually override this to whitelist our internal domain names, but Safari has no such option as far as I can tell.

Steps to reproduce the bug

Start version 3.8.0 of MLflow, and access the UI on an HTTP connection on a host other than localhost in Safari or Chrome (maybe other browsers as well).

Code to generate data required to reproduce the bug

No response

Is the console panel in DevTools showing errors relevant to the bug?

[Error] TypeError: crypto.randomUUID is not a function. (In 'crypto.randomUUID()', 'crypto.randomUUID' is undefined)
	getInstallationId (main.bbdf6ce4.js:2:346113)
	(anonymous function) (main.bbdf6ce4.js:2:345974)
	26595 (main.bbdf6ce4.js:2:345908)
	n (main.bbdf6ce4.js:2:2657701)
	80739 (main.bbdf6ce4.js:2:2011865)
	n (main.bbdf6ce4.js:2:2657701)
	(anonymous function) (main.bbdf6ce4.js:2:2695653)
	(anonymous function) (main.bbdf6ce4.js:2:2703789)
	Global Code (main.bbdf6ce4.js:2:2703792)

Does the network panel in DevTools contain failed requests relevant to the bug?

No network errors</issue_description>

Comments on the Issue (you are @copilot in this section)

@WeichenXu123 You are right, `crypto.randomUUID()` is part of the **Web Crypto API** , it is only available in **HTTPS** or **http://localhost**

As of now, native MLflow server uses http,

I think you can configure a Reverse proxy on the same machine (e.g., Nginx in front for HTTPS), then the request flow is like

client HTTPS -> nginx :443 -> the MLFlow server http://127.0.0.1:5000

There are many guides on web, e.g. : https://www.scaleway.com/en/docs/tutorials/nginx-reverse-proxy/</comment_new>
<comment_new>@WeichenXu123
on the other hand, configuring Reverse proxy for HTTPS is a complicated task for end-users, is it possible to add fallback code in MLflow front-end in the case of http://non-localhost-address ? @BenWilson2 @daniellok-db </comment_new>
<comment_new>@WeichenXu123
I think we can replace crypto.randomUUID with code like

import { v4 as uuidv4 } from 'uuid';
uuidv4();

it works with HTTP.

assuming we just use the uuid as session id / installation id etc, "secure random generator" is not required, the node.js uuid package is enough. </comment_new>
<comment_new>@WeichenXu123
#19573 is a good start,

but I suggest to avoid implementing uuid by ourself, but calling uuid library:

import { v4 as uuidv4 } from 'uuid';

uuidv4();

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

- Add uuid package (v10.0.0) as dependency
- Replace crypto.randomUUID() with uuidv4() in 4 files:
  - TelemetryClient.ts
  - TelemetryLogger.worker.ts
  - ExperimentPageSideNavSection.tsx
  - MlflowSidebar.tsx
- Add TypeScript declaration file for uuid module

Co-authored-by: WeichenXu123 <19235986+WeichenXu123@users.noreply.github.com>
Copy link
Collaborator

@WeichenXu123 WeichenXu123 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@WeichenXu123 WeichenXu123 marked this pull request as ready for review December 26, 2025 08:36
Copilot AI review requested due to automatic review settings December 26, 2025 08:36
Co-authored-by: WeichenXu123 <19235986+WeichenXu123@users.noreply.github.com>
Add type declarations for v1, v3, v5, validate, and parse functions
to support future usage and avoid type errors.

Co-authored-by: WeichenXu123 <19235986+WeichenXu123@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix UI not working on plain HTTP in MLflow Fix UI blank page on plain HTTP by replacing crypto.randomUUID with uuid library Dec 26, 2025
Copilot AI requested a review from WeichenXu123 December 26, 2025 08:40
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes the MLflow UI not working on plain HTTP by replacing crypto.randomUUID() with the uuid library's v4() function. The crypto.randomUUID() API is only available in secure contexts (HTTPS or localhost), causing the UI to fail with a blank page on plain HTTP connections.

Key Changes:

  • Added uuid v10.0.0 package as a dependency
  • Replaced all instances of crypto.randomUUID() with uuidv4() from the uuid library
  • Created a TypeScript type declaration file for the uuid module

Reviewed changes

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

Show a summary per file
File Description
mlflow/server/js/package.json Added uuid v10.0.0 as a project dependency
mlflow/server/js/yarn.lock Updated lock file with uuid v10.0.0 package metadata
mlflow/server/js/src/types/uuid.d.ts Added TypeScript type declaration for uuid module (unnecessary as v10 includes types)
mlflow/server/js/src/telemetry/TelemetryClient.ts Replaced crypto.randomUUID() with uuidv4() for installation ID generation
mlflow/server/js/src/telemetry/worker/TelemetryLogger.worker.ts Replaced crypto.randomUUID() with uuidv4() for session ID generation
mlflow/server/js/src/experiment-tracking/pages/experiment-page-tabs/side-nav/ExperimentPageSideNavSection.tsx Replaced crypto.randomUUID() with uuidv4() for view ID generation
mlflow/server/js/src/common/components/MlflowSidebar.tsx Replaced crypto.randomUUID() with uuidv4() for view ID generation

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

@github-actions github-actions bot added area/uiux Front-end, user experience, plotting, JavaScript, JavaScript dev server rn/bug-fix Mention under Bug Fixes in Changelogs. labels Dec 26, 2025
"use-clipboard-copy": "^0.2.0",
"use-debounce": "^10.0.4",
"use-sync-external-store": "^1.2.0",
"uuid": "^10.0.0",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not use latest version ? @copilot

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated to uuid@^13.0.0 (latest version) in commit 9faebae. All tests, linting, and build pass successfully with the latest version.

Co-authored-by: WeichenXu123 <19235986+WeichenXu123@users.noreply.github.com>
@WeichenXu123 WeichenXu123 merged commit 5abd575 into master Dec 26, 2025
52 of 58 checks passed
@WeichenXu123 WeichenXu123 deleted the copilot/fix-ui-error-http-access branch December 26, 2025 09:30
WeichenXu123 added a commit to WeichenXu123/mlflow that referenced this pull request Dec 26, 2025
…uid library (mlflow#19644)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: WeichenXu123 <19235986+WeichenXu123@users.noreply.github.com>
WeichenXu123 added a commit that referenced this pull request Dec 26, 2025
…uid library (#19644)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: WeichenXu123 <19235986+WeichenXu123@users.noreply.github.com>
omarfarhoud pushed a commit to omarfarhoud/mlflow that referenced this pull request Jan 20, 2026
…uid library (mlflow#19644)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: WeichenXu123 <19235986+WeichenXu123@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/uiux Front-end, user experience, plotting, JavaScript, JavaScript dev server rn/bug-fix Mention under Bug Fixes in Changelogs. v3.8.1

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] UI not working on plain HTTP

3 participants