Masthead component intermittently throwing 'TypeError: Cannot read properties of undefined (reading 'resource')'

[eva-vashkevich]

Setup

• Rancher version: 2.15-head
• Rancher UI Extensions: None
• Browser type & version: Chrome

Describe the bug

Generic imported cluster's detail page intermittently throws a console error

To Reproduce

Import Generic cluster -> New cluster's detail page (do not actually import anything)
VERY intermittent

Result
TypeError: Cannot read properties of undefined (reading 'resource')
at Proxy.render (index.vue:32:1)
Error is thwon in the console from dashboard/shell/components/Resource/Detail/Masthead/index.vue

Expected Result

No error should be thrown

Screenshots

Additional context

[github-actions]

🎯 Agentic Issue Triage

Summary: The Masthead component (shell/components/Resource/Detail/Masthead/index.vue) throws a TypeError: Cannot read properties of undefined (reading 'resource') intermittently when navigating to a Generic imported cluster's detail page. The error occurs because props.titleBarProps is undefined at render time before the parent component has supplied the prop.

Root Cause Analysis

In Masthead/index.vue line 32:

<Cards
  class="cards-section"
  :resource="props.titleBarProps.resource"
/>

props.titleBarProps is typed as required (MastheadProps.titleBarProps: TitleBarProps) but is undefined on the first render cycle when the parent hasn't yet computed/passed the prop. This is a race condition in Vue's reactivity system or an async data-loading pattern where the parent passes undefined transiently before the cluster resource loads.

Suggested Fix

Use optional chaining to guard against the transient undefined:

<Cards
  class="cards-section"
  :resource="props.titleBarProps?.resource"
/>

Alternatively, add a v-if guard around the entire component or the Cards element:

<Cards
  v-if="props.titleBarProps"
  class="cards-section"
  :resource="props.titleBarProps.resource"
/>

A deeper fix would be to ensure the parent component only renders Masthead after titleBarProps is fully resolved (e.g., v-if="titleBarProps" on the <Masthead> usage site).

Reproduction Steps

1. Log in to Rancher 2.15-head.
2. Go to Cluster Management → Import Existing → Generic.
3. Fill in a cluster name and click Create (do not run the kubectl command).
4. Observe the new cluster's detail/registration page in the browser console — TypeError: Cannot read properties of undefined (reading 'resource') may appear.
5. The error is very intermittent — may require multiple attempts or checking during initial page load.

To increase reproducibility: add a console.trace in the Masthead render or check if removing v-if guards on the parent's titleBarProps makes it consistent.

Debugging Strategies

• Add a watchEffect or onMounted log in Masthead/index.vue to capture when props.titleBarProps is undefined.
• Search for all usages of <Masthead in the codebase to find the parent component(s) and trace where titleBarProps is constructed — check if it's computed from an async store getter.
• Inspect the Vuex/Pinia store for the cluster resource loading lifecycle to determine if titleBarProps is ever set to undefined during transitions.
• Use Vue DevTools timeline to capture the component tree state at the moment of the error.

Relevant Files

• shell/components/Resource/Detail/Masthead/index.vue — the failing component (line 32)
• shell/components/Resource/Detail/TitleBar/index.vue — TitleBarProps definition including resource
• Pages/components that render <Masthead> for cluster detail views

Sub-tasks Checklist

• Find all parent components that render <Masthead> and verify titleBarProps is always defined before render
• Apply optional chaining (?.resource) or a v-if guard in Masthead/index.vue
• Add a unit test for the Masthead component that covers the case where titleBarProps is initially undefined
• Verify the fix on the Generic imported cluster detail page

Generated by Agentic Triage for issue #17870 · ● 198.5K · ◷

[github-actions]

🤖 Issue grooming analysis

This issue meets all four primary grooming criteria and is ready for triage.

✅ Clear Problem Statement
The title precisely names the component (Masthead) and the error type. The description explains the context: a generic imported cluster's detail page throws an intermittent TypeError: Cannot read properties of undefined (reading 'resource') in shell/components/Resource/Detail/Masthead/index.vue.

✅ Acceptance Criteria
The fix is clearly defined: no error should be thrown in the console when navigating to a new cluster's detail page. This is observable and verifiable.

✅ Technical Details
A full stack trace is provided, including the exact file and line (index.vue:32:1). A screenshot of the console error is attached, giving engineers a precise starting point for investigation.

✅ Reproducibility
Steps to reproduce are provided (Import Generic cluster → navigate to new cluster detail page). The intermittent nature is noted, which is helpful context rather than a gap.

This analysis was generated automatically based on the repository's grooming checklist.

Generated by Daily Issue Grooming · ● 463.4K · ◷