mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-03 14:54:37 +00:00
c844711f6d
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
91 lines
2.6 KiB
Vue
91 lines
2.6 KiB
Vue
<template>
|
|
<div class="system-stats">
|
|
<div class="mb-6">
|
|
<h2 class="text-2xl font-semibold mb-4">
|
|
{{ $t('g.systemInfo') }}
|
|
</h2>
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<template v-for="col in systemColumns" :key="col.field">
|
|
<div class="font-medium">
|
|
{{ col.header }}
|
|
</div>
|
|
<div>{{ formatValue(systemInfo[col.field], col.field) }}</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<Divider />
|
|
|
|
<div>
|
|
<h2 class="text-2xl font-semibold mb-4">
|
|
{{ $t('g.devices') }}
|
|
</h2>
|
|
<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>
|
|
|
|
<script setup lang="ts">
|
|
import Divider from 'primevue/divider'
|
|
import TabPanel from 'primevue/tabpanel'
|
|
import TabView from 'primevue/tabview'
|
|
import { computed, watchEffect } from 'vue'
|
|
|
|
import DeviceInfo from '@/components/common/DeviceInfo.vue'
|
|
import type { SystemStats } from '@/schemas/apiSchema'
|
|
import { formatSize } from '@/utils/formatUtil'
|
|
|
|
const props = defineProps<{
|
|
stats: SystemStats
|
|
}>()
|
|
|
|
const systemInfo = computed(() => ({
|
|
...props.stats.system,
|
|
argv: props.stats.system.argv.join(' ')
|
|
}))
|
|
|
|
const systemColumns: { field: keyof SystemStats['system']; header: string }[] =
|
|
[
|
|
{ field: 'os', header: 'OS' },
|
|
{ field: 'python_version', header: 'Python Version' },
|
|
{ field: 'embedded_python', header: 'Embedded Python' },
|
|
{ field: 'pytorch_version', header: 'Pytorch Version' },
|
|
{ field: 'argv', header: 'Arguments' },
|
|
{ field: 'ram_total', header: 'RAM Total' },
|
|
{ field: 'ram_free', header: 'RAM Free' }
|
|
]
|
|
|
|
const formatValue = (value: any, field: string) => {
|
|
if (['ram_total', 'ram_free'].includes(field)) {
|
|
return formatSize(value)
|
|
}
|
|
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>
|