EDM-5267: Mitigate errors when UI service restarts

[celdrake]

Ocassionally, the UI could show a "failed to load chunk" error instead of the selected page.
This seemed to happen when the UI service is restarted, as the loaded UI does not have the correct bundled assets.

Fixes:

• Whenever the route changes, re-import the component for the current page.
• If the "failed to load chunk" happens for any reason, we show a "Reload page" button which should fix the problem.
• The ErrorBoundary uses location.key so that when navigating to another tab after the UI has fully restarted (or back to the same tab), the page is shown instead of the stale error.

Affected areas

• apps/standalone/: Re-imports route components when the route changes. Keys ErrorBoundary with location.key to clear stale errors after navigation or a UI service restart.
• libs/ui-components/: Adds lazyResetter and a “Reload page” action for chunk-loading errors.

Impact

• Shared UI component behavior changes for consumers, including standalone and OCP plugin integrations.
• Standalone users can recover from outdated bundled assets without manual browser actions.
• No changes affect libs/types/, libs/i18n/, libs/cypress/, apps/ocp-plugin/, proxy/, packaging/, or CI configuration.
• No authentication or other security behavior changes are included.
• The change improves correctness by preventing stale lazy-loaded components and error boundaries from persisting across navigation.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: 26b9b504-7d88-40dc-8232-db086bf3c013

📥 Commits

Reviewing files that changed from the base of the PR and between 5a36446 and 8583a2c.

⛔ Files ignored due to path filters (1)

• libs/i18n/locales/en/translation.json is excluded by !libs/i18n/locales/en/translation.json

📒 Files selected for processing (3)

• apps/standalone/src/app/routes.tsx
• libs/ui-components/src/components/common/ErrorBoundary.tsx
• libs/ui-components/src/utils/resettableLazy.tsx

Included review availability: Your plan provides up to 12 included reviews per hour; 11 remain after this review.

---

Walkthrough

The standalone router now recreates lazy route components and remounts route error boundaries when the location changes. The error alert also provides a translated action that reloads the browser page.

Changes

Navigation Error Recovery

Layer / File(s)	Summary
Resettable lazy route loading apps/standalone/src/app/routes.tsx, libs/ui-components/src/utils/resettableLazy.tsx	lazyResetter recreates React.lazy components for new router location keys. Standalone route declarations use the new utility.
Route error recovery apps/standalone/src/app/routes.tsx, libs/ui-components/src/components/common/ErrorBoundary.tsx	TitledRoute keys its ErrorBoundary with the current location key. The error alert includes a translated “Reload page” action that calls window.location.reload().

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to 8583a

This change adds recovery behavior for stale UI assets and navigation after a service restart; no actionable merge-blocking risk remains based on the supplied evidence.

Suggested labels: standalone, i18n, ui-components

🚥 Pre-merge checks | ✅ 15

✅ Passed checks (15 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the PR's main purpose: mitigating chunk-loading errors after UI service restarts.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
No-Hardcoded-Secrets	✅ Passed	The introduced lines contain only imports, route paths, UI text, and reload logic; scans found no secret assignments, credential URLs, private-key markers, or base64-like config values.
No-Weak-Crypto	✅ Passed	The HEAD-to-parent diff only changes routing, lazy loading, error recovery, and translation; it adds no weak crypto, custom crypto, or secret/token comparisons.
No-Injection-Vectors	✅ Passed	The HEAD^..HEAD added-line scan found no eval/exec, dangerouslySetInnerHTML, os.system, exec.Command, or yaml.load; error text renders as escaped React children.
Container-Privileges	✅ Passed	The PR diff changes TypeScript/translation files only; it adds no container/Kubernetes manifests or privileged, host namespace, SYS_ADMIN, or privilege-escalation settings.
No-Sensitive-Data-In-Logs	✅ Passed	The changed files add no console, logger, or telemetry calls. ErrorBoundary only renders the existing error message and adds a reload link.
Resource-Leaks	✅ Passed	The pull request changes only TSX and JSON files; no Go files under proxy/ were changed, so this resource-leak check is inapplicable.
Unchecked-Errors	✅ Passed	The PR changes only TypeScript and JSON files; the HEAD^..HEAD diff contains no proxy/*.go modifications, so this Go-only check is inapplicable.
Ai-Attribution	✅ Passed	The PR commit uses the accepted Made-with: Cursor trailer, and no AI-related Co-Authored-By trailer appears in the PR range.
Generated-Files-Not-Hand-Edited	✅ Passed	The PR changes no OpenAPI model files. The locale diff adds only the key used by ErrorBoundary, consistent with npm run i18n generation rather than a hand-edited generated value.
I18n-Compliance	✅ Passed	The PR adds only t('Reload page') as new UI text; all new t() keys are string literals, and the existing unwrapped error detail predates this PR.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands.}

[asmasarw]

🔴 resettableLazy.tsx re-creates the lazy component whenever location.key changes:

In react-router v6, location.key is regenerated on every history transition (push and replace), not only when moving between pages.

Consequences confirmed:

1. Detail pages remount on every tab switch. DeviceDetailsPage (and Fleet/Repository/ImageBuild/AuthProvider details) render internal under :id/*. Switching tabs changes location.key → the whole page remounts (refetch + lost tab state + spinner).
2. List pages remount when a URL-synced filter is applied. DevicesPage commits filters via setSearchParams (push) → new location.key → remount: search input loses focus mid-typing, pagination resets, full refetch. This also undercuts the pagination work in #664.

(Navigations run in a React transition, so the spinner may not always visibly flash — but the remount, state loss, and refetch still happen.)

Suggested fixes (any one)

• Simplest: drop the per-navigation re-import and rely on the ErrorBoundary "Reload page" button for recovery — a full reload already pulls fresh assets.

• Retry-on-error: wrap the dynamic import() to catch a chunk-load failure and re-import (optionally cache-busting), so a fresh lazy is created only when a load actually fails:

const load = () => importer().catch(() => importer());
const Component = React.useMemo(() => React.lazy(load), []);

• If reset-on-nav is truly desired, key it on the matched route/module (something stable per page), not location.key.