Skip to content

fix(ui): avoid crypto.randomUUID crash on LAN HTTP showcase (#332)#384

Merged
w7-mgfcode merged 2 commits into
devfrom
fix/ui-safe-uuid-non-secure-context
Jun 11, 2026
Merged

fix(ui): avoid crypto.randomUUID crash on LAN HTTP showcase (#332)#384
w7-mgfcode merged 2 commits into
devfrom
fix/ui-safe-uuid-non-secure-context

Conversation

@w7-mgfcode

@w7-mgfcode w7-mgfcode commented Jun 11, 2026

Copy link
Copy Markdown
Owner

Summary

Closes #332 — Reliability E3 of umbrella #380.

crypto.randomUUID() is only defined in secure contexts (HTTPS or localhost). On a plain-HTTP LAN origin (http://<lan-ip>:5173/showcase) it is undefined, and the direct call at RunHistoryStrip.tsx:75 threw TypeError: crypto.randomUUID is not a function during render at pipeline_complete — React unmounted the whole tree and the showcase white-screened while the backend pipeline finished fine.

Changes

  • frontend/src/lib/uuid-utils.ts (new) — safeRandomUUID(): native crypto.randomUUID() when available → RFC-4122-v4 via crypto.getRandomValues() (not secure-context-gated, crypto-strong) → Math.random() last resort when Web Crypto is absent entirely.
  • frontend/src/lib/uuid-utils.test.ts (new) — 3 cases covering all three paths (v4 regex + uniqueness).
  • RunHistoryStrip.tsx — one-line swap to safeRandomUUID() (the render-phase append pattern is deliberate and untouched).
  • RunHistoryStrip.test.tsx — regression case stubbing the LAN-HTTP crypto shape (getRandomValues only); proven to fail with the original TypeError when the fix is reverted.
  • eslint.config.js — repo-wide no-restricted-properties guard banning direct crypto.randomUUID access (message points at the helper); the only sanctioned call site carries inline disables. Verified the rule bites: the unfixed call site fails pnpm lint with the new message.

No new npm dependency (uuid/nanoid rejected — ~25-line util for one call site, per product-vision dependency-light footprint). Zero backend changes.

Validation

  • pnpm lint — clean (0 errors; 1 pre-existing react-hooks/incompatible-library warning in untouched data-table.tsx)
  • pnpm test --run — 323/323 across 58 files (+4 new cases)
  • npx tsc -b — zero errors in touched files
  • ✅ Backend gates untouched: ruff / mypy / pyright clean, 1920 unit tests pass
  • LAN-HTTP dogfood (umbrella fix(repo): platform reliability hardening — agents, config, ui, forecast #380 risk row) — headless Chromium at http://10.0.0.226:5173/showcase: isSecureContext=false, typeof crypto.randomUUID === 'undefined'; full demo_minimal run completed (16s, PASS); no white screen, zero page errors; "Recent runs" strip rendered; persisted id 8706c012-2014-439e-806c-e235481e228a matches the v4 shape via the fallback path.

Notes for reviewers

  • pnpm tsc --noEmit is vacuous (solution-style root tsconfig type-checks zero files), and npx tsc -b already fails on dev with pre-existing noUncheckedIndexedAccess errors in unrelated files (ai-models-panel.tsx, forecast-chart.tsx, job-picker.tsx, demand-utils.test.ts). Both deserve their own issue; out of scope here.

Summary by Sourcery

Introduce a safe UUID generation utility for the frontend and use it to prevent showcase crashes in non-secure (plain-HTTP LAN) contexts.

New Features:

  • Add a shared safeRandomUUID() helper that generates RFC-4122 v4 IDs with fallbacks when secure-context APIs are unavailable.

Bug Fixes:

  • Prevent the RunHistoryStrip component from crashing on plain-HTTP LAN origins where crypto.randomUUID is undefined by switching to the safe UUID helper.

Enhancements:

  • Add an ESLint restriction to forbid direct crypto.randomUUID usage across the frontend and guide developers to the safe UUID helper.

Documentation:

  • Document the reliability work for non-secure-context UUID handling in a new PRP markdown file.

Tests:

  • Add unit tests for the UUID helper covering native, getRandomValues-based, and Math.random-based paths, and a regression test ensuring RunHistoryStrip behaves correctly when crypto.randomUUID is unavailable.

@sourcery-ai

sourcery-ai Bot commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

Reviewer's Guide

Implements a safe UUID generation utility for non-secure browser contexts, wires it into the showcase run history component to prevent LAN-HTTP crashes, adds targeted tests, and enforces a lint rule to prevent future direct uses of crypto.randomUUID, along with documenting the reliability work item in a PRP file.

File-Level Changes

Change Details Files
Introduce a safe UUID helper with layered fallbacks and corresponding unit tests.
  • Add safeRandomUUID utility that prefers crypto.randomUUID, then falls back to an RFC4122 v4 implementation using crypto.getRandomValues, and finally to a Math.random-based generator when Web Crypto is unavailable.
  • Implement unit tests covering all three code paths, using vitest global stubbing to simulate different crypto shapes and validating v4 format and basic uniqueness.
frontend/src/lib/uuid-utils.ts
frontend/src/lib/uuid-utils.test.ts
Update RunHistoryStrip to use the safe UUID helper and guard against regressions in non-secure contexts.
  • Replace the direct crypto.randomUUID call in RunHistoryStrip with safeRandomUUID while preserving the render-phase append pattern.
  • Extend RunHistoryStrip tests with a regression case that stubs crypto to the LAN-HTTP shape (getRandomValues only), ensuring history appends without crashing and IDs match the v4 pattern, and clear global stubs after each test.
frontend/src/components/demo/RunHistoryStrip.tsx
frontend/src/components/demo/RunHistoryStrip.test.tsx
Enforce repository-wide linting to disallow direct crypto.randomUUID usage and document the reliability epic.
  • Add an ESLint no-restricted-properties rule for crypto.randomUUID across TypeScript files, with guidance to use safeRandomUUID instead and relying on an inline disable only at the helper call site.
  • Add a PRP markdown document describing the reliability E3 effort, problem context, design, implementation blueprint, validation steps, and guardrails for this safe UUID fallback change.
frontend/eslint.config.js
PRPs/PRP-reliability-E3-safe-uuid-non-secure-context.md

Possibly linked issues


Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@coderabbitai

coderabbitai Bot commented Jun 11, 2026

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0e4b529d-fa64-4370-be04-40535a23e9dc

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/ui-safe-uuid-non-secure-context

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Hey - I've reviewed your changes and they look great!


Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

@w7-mgfcode w7-mgfcode merged commit 3a7d7a0 into dev Jun 11, 2026
8 checks passed
@w7-mgfcode w7-mgfcode deleted the fix/ui-safe-uuid-non-secure-context branch June 12, 2026 15:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant