Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-03 14:54:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

[fix] Resolve Sentry issue CLOUD-FRONTEND-STAGING-13 - TypeError on undefined device

Browse Source 
Fixes TypeError: Cannot read properties of undefined (reading 'name')
occurring in DeviceInfo component when device prop is undefined.

Changes:
- DeviceInfo: Add null checks and graceful error handling for undefined device prop
- DeviceInfo: Enhanced formatValue to return 'N/A' for null/undefined values
- SystemStatsPanel: Add guard clauses for empty devices array
- SystemStatsPanel: Display helpful message when no devices available
- Added monitoring to log when devices array is missing for debugging
- Added i18n keys for error messages

Root cause: Component attempted to access properties on undefined device object
when SystemStats API returned empty devices array or malformed data.

Solution: Defensive programming with null checks and user-friendly error messages.

Tests updated to verify graceful handling instead of throwing errors.

Sentry URL: https://comfy-org.sentry.io/issues/6804418395/?project=4509681221369857
This commit is contained in:
bymyself
2025-09-19 01:38:37 -07:00
parent 28cb3bbdb5
commit c844711f6d
4 changed files with 85 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/common/DeviceInfo.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="grid grid-cols-2 gap-2">
<div v-if="props.device" class="grid grid-cols-2 gap-2">
<template v-for="col in deviceColumns" :key="col.field">
<div class="font-medium">
{{ col.header }}
@@ -9,6 +9,9 @@
</div>
</template>
</div>
<div v-else class="text-red-500">
{{ $t('g.deviceNotAvailable') }}
</div>
</template>
<script setup lang="ts">
@@ -16,7 +19,7 @@ import type { DeviceStats } from '@/schemas/apiSchema'
import { formatSize } from '@/utils/formatUtil'
const props = defineProps<{
device: DeviceStats
device: DeviceStats | undefined
}>()
const deviceColumns: { field: keyof DeviceStats; header: string }[] = [
@@ -29,6 +32,10 @@ const deviceColumns: { field: keyof DeviceStats; header: string }[] = [
]
const formatValue = (value: any, field: string) => {
if (value === undefined || value === null) {
return 'N/A'
}
if (
['vram_total', 'vram_free', 'torch_vram_total', 'torch_vram_free'].includes(
field

40
src/components/common/SystemStatsPanel.vue
View File

@@ -20,17 +20,22 @@
<h2 class="text-2xl font-semibold mb-4">
{{ $t('g.devices') }}
</h2>
<TabView v-if="props.stats.devices.length > 1">
<TabPanel
v-for="device in props.stats.devices"
:key="device.index"
:header="device.name"
:value="device.index"
>
<DeviceInfo :device="device" />
</TabPanel>
</TabView>
<DeviceInfo v-else :device="props.stats.devices[0]" />
<div v-if="props.stats.devices && props.stats.devices.length > 0">
<TabView v-if="props.stats.devices.length > 1">
<TabPanel
v-for="device in props.stats.devices"
:key="device.index"
:header="device.name"
:value="device.index"
>
<DeviceInfo :device="device" />
</TabPanel>
</TabView>
<DeviceInfo v-else :device="props.stats.devices[0]" />
</div>
<div v-else class="text-yellow-600">
{{ $t('g.noDevicesDetected') }}
</div>
</div>
</div>
</template>
@@ -39,7 +44,7 @@
import Divider from 'primevue/divider'
import TabPanel from 'primevue/tabpanel'
import TabView from 'primevue/tabview'
import { computed } from 'vue'
import { computed, watchEffect } from 'vue'
import DeviceInfo from '@/components/common/DeviceInfo.vue'
import type { SystemStats } from '@/schemas/apiSchema'
@@ -71,4 +76,15 @@ const formatValue = (value: any, field: string) => {
}
return value
}
// Monitor for missing devices scenario for debugging
watchEffect(() => {
if (!props.stats?.devices || props.stats.devices.length === 0) {
console.warn('[SystemStatsPanel] No devices available in SystemStats:', {
hasDevices: !!props.stats?.devices,
deviceCount: props.stats?.devices?.length || 0,
statsStructure: props.stats ? Object.keys(props.stats) : null
})
}
})
</script>

2
src/locales/en/main.json
View File

@@ -29,6 +29,8 @@
"insert": "Insert",
"systemInfo": "System Info",
"devices": "Devices",
"deviceNotAvailable": "Device information is not available.",
"noDevicesDetected": "No devices detected. This may occur if no GPU devices are available or device enumeration failed.",
"about": "About",
"add": "Add",
"confirm": "Confirm",

87
tests-ui/tests/components/common/DeviceInfo.test.ts
View File

@@ -27,8 +27,8 @@ describe('DeviceInfo', () => {
expect(wrapper.text()).toContain('NVIDIA GeForce RTX 4090')
expect(wrapper.text()).toContain('cuda')
expect(wrapper.text()).toContain('22.9 GB') // vram_total formatted
expect(wrapper.text()).toContain('19.1 GB') // vram_free formatted
expect(wrapper.text()).toContain('22.88 GB') // vram_total formatted
expect(wrapper.text()).toContain('19.15 GB') // vram_free formatted
})
it('should display all device columns', () => {
@@ -45,23 +45,23 @@ describe('DeviceInfo', () => {
})
})
describe('Sentry Issue CLOUD-FRONTEND-STAGING-13: undefined device prop', () => {
it('should throw TypeError when device prop is undefined', () => {
// This test reproduces the exact Sentry error
expect(() => {
createWrapper(undefined as any)
}).toThrow()
describe('Sentry Issue CLOUD-FRONTEND-STAGING-13: undefined device prop - FIXED', () => {
it('should gracefully handle undefined device prop instead of throwing', () => {
// Previously this threw TypeError, now it should render error message
const wrapper = createWrapper(undefined as any)
expect(wrapper.text()).toContain('g.deviceNotAvailable')
expect(wrapper.find('.text-red-500').exists()).toBe(true)
})
it('should throw TypeError when accessing undefined device properties', () => {
// Test the specific error: Cannot read properties of undefined (reading 'name')
expect(() => {
const wrapper = mount(DeviceInfo, {
props: { device: undefined as any }
})
// This will trigger the error when Vue tries to render the template
wrapper.html()
}).toThrow(TypeError)
it('should gracefully handle undefined device properties instead of throwing', () => {
// Previously threw TypeError: Cannot read properties of undefined (reading 'name')
// Now should render fallback message
const wrapper = mount(DeviceInfo, {
props: { device: undefined as any }
})
expect(wrapper.html()).toContain('g.deviceNotAvailable')
expect(() => wrapper.html()).not.toThrow()
})
it('should fail when formatValue tries to access undefined device fields', () => {
@@ -84,19 +84,20 @@ describe('DeviceInfo', () => {
})
})
describe('Edge cases that could lead to undefined device', () => {
it('should handle device with missing required fields', () => {
describe('Edge cases that could lead to undefined device - FIXED', () => {
it('should gracefully handle device with missing required fields', () => {
const incompleteDevice = {
name: 'Test Device'
// Missing required fields: type, index, vram_total, etc.
} as any
expect(() => {
createWrapper(incompleteDevice)
}).toThrow()
const wrapper = createWrapper(incompleteDevice)
expect(wrapper.exists()).toBe(true)
expect(wrapper.text()).toContain('Test Device')
expect(wrapper.text()).toContain('N/A') // Missing fields show as N/A
})
it('should handle device with null values', () => {
it('should handle device with null values gracefully', () => {
const deviceWithNulls = {
name: null,
type: null,
@@ -108,24 +109,25 @@ describe('DeviceInfo', () => {
} as any
const wrapper = createWrapper(deviceWithNulls)
// The component should render but may show null values
expect(wrapper.exists()).toBe(true)
expect(wrapper.text()).toContain('N/A') // Null values show as N/A
})
})
describe('SystemStatsPanel integration scenarios', () => {
it('should fail when devices array is empty and accessing devices[0]', () => {
describe('SystemStatsPanel integration scenarios - FIXED', () => {
it('should gracefully handle when devices array is empty and accessing devices[0]', () => {
// This simulates the scenario where props.stats.devices[0] is undefined
// because the devices array is empty
const emptyDevicesArray: DeviceStats[] = []
expect(() => {
const deviceFromEmptyArray = emptyDevicesArray[0] // undefined
createWrapper(deviceFromEmptyArray)
}).toThrow()
const deviceFromEmptyArray = emptyDevicesArray[0] // undefined
const wrapper = createWrapper(deviceFromEmptyArray)
expect(wrapper.text()).toContain('g.deviceNotAvailable')
expect(() => createWrapper(deviceFromEmptyArray)).not.toThrow()
})
it('should fail when SystemStats API returns malformed data', () => {
it('should gracefully handle when SystemStats API returns malformed data', () => {
// Simulate API returning data that doesn't match expected schema
const malformedApiResponse = {
system: {
@@ -134,15 +136,16 @@ describe('DeviceInfo', () => {
devices: null // This should be an array but API returned null
}
expect(() => {
const deviceFromMalformedData = malformedApiResponse.devices?.[0]
createWrapper(deviceFromMalformedData)
}).toThrow()
const deviceFromMalformedData = malformedApiResponse.devices?.[0]
const wrapper = createWrapper(deviceFromMalformedData)
expect(wrapper.text()).toContain('g.deviceNotAvailable')
expect(() => createWrapper(deviceFromMalformedData)).not.toThrow()
})
})
describe('formatValue function edge cases', () => {
it('should handle undefined values in VRAM fields', () => {
describe('formatValue function edge cases - FIXED', () => {
it('should gracefully handle undefined values in VRAM fields', () => {
const deviceWithUndefinedVram = {
name: 'Test Device',
type: 'cuda',
@@ -153,10 +156,12 @@ describe('DeviceInfo', () => {
torch_vram_free: undefined
} as any
// The component should render but formatValue might fail
expect(() => {
createWrapper(deviceWithUndefinedVram)
}).toThrow()
// Previously would fail, now should show N/A for undefined VRAM values
const wrapper = createWrapper(deviceWithUndefinedVram)
expect(wrapper.exists()).toBe(true)
expect(wrapper.text()).toContain('Test Device')
expect(wrapper.text()).toContain('cuda')
expect(wrapper.text()).toContain('N/A') // Undefined VRAM values show as N/A
})
})
})