OCPBUGS-86280: Guard against null plugin route components

[cardil]

Analysis / Root cause:

When a dynamic plugin's route component fails to load (resolves to null/undefined instead of a React component), React.lazy() receives { default: null } and crashes with React error #306: "Element type is invalid. Received a promise that resolves to: null. Lazy element type must resolve to a class or function."

This can happen when a plugin pod is not running, not reachable, or when module federation fails silently after a cluster upgrade.

Solution description:

Add a type check in LazyRoutePage before passing the resolved component to React.lazy(). If the component is not a function, throw an error with the plugin name and extension UID. This error is caught by the existing ErrorBoundaryPage in app-contents.tsx, showing the standard "Something wrong happened" + "Reload page" UI instead of crashing.

Also fixes a missing pluginName in the useMemo dependency array.

Screenshots / screen recording:

N/A — defensive fix, no visual changes in the happy path.

Test setup:

Requires a dynamic plugin whose route component resolves to null. This can be simulated by registering a ConsolePlugin that points to a non-existent or broken plugin service.

Test cases:

1. With a working dynamic plugin (e.g. monitoring-plugin): navigate to a plugin-provided page → page loads normally (no regression).
2. With a broken plugin (service down or returning invalid module): navigate to the plugin's route → shows "Something wrong happened" error page instead of React error Add Alert Manager proxy #306 crash.

Browser conformance:

• Chrome
• Firefox
• Safari (or Epiphany on Linux)

Additional info:

• Related Jira: https://redhat.atlassian.net/browse/OCPBUGS-86280
• Analysis: https://gitlab.cee.redhat.com/-/snippets/11562
• The console.warn in coderef-resolver.ts for null codeRefs is intentional — 43 extension properties have optional codeRefs where null is legitimate. The guard belongs at the consumer level (usePluginRoutes.tsx) where component is known to be required.

Assisted-by: 🤖 Claude Opus/Sonnet 4.6

Summary by CodeRabbit

Release Notes

• Bug Fixes
  • Enhanced plugin component validation with improved error messaging to better identify and resolve plugin configuration issues.

[openshift-ci-robot]

@cardil: This pull request references Jira Issue OCPBUGS-86280, which is invalid:

• expected the bug to target the "5.0.0" version, but no target version was set

Comment /jira refresh to re-evaluate validity if changes to the Jira bug are made, or edit the title of this pull request to link to a different bug.

The bug has been updated to refer to the pull request using the external bug tracker.

Details

In response to this:

Analysis / Root cause:

When a dynamic plugin's route component fails to load (resolves to null/undefined instead of a React component), React.lazy() receives { default: null } and crashes with React error #306: "Element type is invalid. Received a promise that resolves to: null. Lazy element type must resolve to a class or function."

This can happen when a plugin pod is not running, not reachable, or when module federation fails silently after a cluster upgrade.

Solution description:

Add a type check in LazyRoutePage before passing the resolved component to React.lazy(). If the component is not a function, throw an error with the plugin name and extension UID. This error is caught by the existing ErrorBoundaryPage in app-contents.tsx, showing the standard "Something wrong happened" + "Reload page" UI instead of crashing.

Also fixes a missing pluginName in the useMemo dependency array.

Screenshots / screen recording:

N/A — defensive fix, no visual changes in the happy path.

Test setup:

Requires a dynamic plugin whose route component resolves to null. This can be simulated by registering a ConsolePlugin that points to a non-existent or broken plugin service.

Test cases:

1. With a working dynamic plugin (e.g. monitoring-plugin): navigate to a plugin-provided page → page loads normally (no regression).
2. With a broken plugin (service down or returning invalid module): navigate to the plugin's route → shows "Something wrong happened" error page instead of React error Add Alert Manager proxy #306 crash.

Browser conformance:

• Chrome
• Firefox
• Safari (or Epiphany on Linux)

Additional info:

• Related Jira: https://redhat.atlassian.net/browse/OCPBUGS-86280
• Analysis: https://gitlab.cee.redhat.com/-/snippets/11562
• The console.warn in coderef-resolver.ts for null codeRefs is intentional — 43 extension properties have optional codeRefs where null is legitimate. The guard belongs at the consumer level (usePluginRoutes.tsx) where component is known to be required.

Assisted-by: 🤖 Claude Opus/Sonnet 4.6

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: openshift/coderabbit/.coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: b4576b2d-3c80-4525-b681-5f996f24ba49

📥 Commits

Reviewing files that changed from the base of the PR and between d7aca4b and 5c8d486.

📒 Files selected for processing (1)

• frontend/packages/console-app/src/hooks/usePluginRoutes.tsx

---

Walkthrough

LazyRoutePage's lazy component resolution now validates that the resolved component value is a callable function before caching. If validation fails, it throws an error with the plugin name and extension UID. The useMemo dependency list is updated to include pluginName.

Changes

Plugin route lazy component validation

Layer / File(s)	Summary
Lazy component validation and error handling frontend/packages/console-app/src/hooks/usePluginRoutes.tsx	LazyRoutePage's lazy() factory now validates the resolved component is a function at runtime and throws a descriptive error with plugin name and extension UID if invalid; useMemo dependencies updated to include pluginName alongside uid and component.

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 15

✅ Passed checks (15 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: adding a guard/validation for null plugin route components, which is the primary purpose of the PR.
Description check	✅ Passed	The description covers all required sections from the template including analysis, solution, test cases, and browser conformance, with comprehensive technical details.
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.
Stable And Deterministic Test Names	✅ Passed	This PR does not contain any Ginkgo test files with test definitions (It(), Describe(), Context(), When(), etc.). The custom check is not applicable to this pull request.
Test Structure And Quality	✅ Passed	This PR contains only TypeScript/React code (frontend changes to usePluginRoutes.tsx), not Ginkgo test code. The custom check is not applicable to this PR.
Microshift Test Compatibility	✅ Passed	This PR modifies a frontend React hook and does not add any Ginkgo e2e tests. The MicroShift compatibility check applies only to new e2e tests, making it inapplicable here.
Single Node Openshift (Sno) Test Compatibility	✅ Passed	No Ginkgo e2e tests added; only frontend React hook code (usePluginRoutes.tsx) is modified. SNO compatibility check not applicable.
Topology-Aware Scheduling Compatibility	✅ Passed	PR modifies only frontend React hooks to validate plugin components; does not modify deployment manifests, operator code, controllers, or scheduling constraints.
Ote Binary Stdout Contract	✅ Passed	This check applies only to OTE binary test infrastructure. The PR modifies only frontend TypeScript/React code (usePluginRoutes.tsx), not test binaries, so the check is not applicable.
Ipv6 And Disconnected Network Test Compatibility	✅ Passed	PR does not add Ginkgo e2e tests; it modifies a React TypeScript hook (usePluginRoutes.tsx) for frontend validation logic. Custom check is not applicable.
No-Weak-Crypto	✅ Passed	PR modifies usePluginRoutes.tsx to add component validation; contains no weak cryptography, custom crypto, or insecure secret comparisons.
Container-Privileges	✅ Passed	PR is a frontend code change (usePluginRoutes.tsx) with no Kubernetes manifests or container security configurations; the container-privileges check is not applicable.
No-Sensitive-Data-In-Logs	✅ Passed	Error logs only non-sensitive technical identifiers (pluginName, uid) and type info. No passwords, tokens, API keys, PII, session IDs, hostnames, or customer data exposed.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[openshift-ci]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: cardil
Once this PR has been reviewed and has the lgtm label, please assign rhamilto for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• frontend/OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[cardil]

/jira refresh

[openshift-ci-robot]

@cardil: This pull request references Jira Issue OCPBUGS-86280, which is invalid:

• expected the bug to target the "5.0.0" version, but no target version was set

Comment /jira refresh to re-evaluate validity if changes to the Jira bug are made, or edit the title of this pull request to link to a different bug.

Details

In response to this:

/jira refresh

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[cardil]

/jira refresh

[openshift-ci-robot]

@cardil: This pull request references Jira Issue OCPBUGS-86280, which is invalid:

• expected the bug to target the "5.0.0" version, but no target version was set

Comment /jira refresh to re-evaluate validity if changes to the Jira bug are made, or edit the title of this pull request to link to a different bug.

Details

In response to this:

/jira refresh

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[cardil]

/jira refresh

[openshift-ci-robot]

@cardil: This pull request references Jira Issue OCPBUGS-86280, which is valid. The bug has been moved to the POST state.

3 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target version (5.0.0) matches configured target version for branch (5.0.0)
• bug is in the state New, which is one of the valid states (NEW, ASSIGNED, POST)

Details

In response to this:

/jira refresh

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[openshift-ci]

@cardil: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
ci/prow/e2e-playwright	5c8d486	link	false	/test e2e-playwright

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.