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
49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<template>
|
|
<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 }}
|
|
</div>
|
|
<div>
|
|
{{ formatValue(props.device[col.field], col.field) }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div v-else class="text-red-500">
|
|
{{ $t('g.deviceNotAvailable') }}
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { DeviceStats } from '@/schemas/apiSchema'
|
|
import { formatSize } from '@/utils/formatUtil'
|
|
|
|
const props = defineProps<{
|
|
device: DeviceStats | undefined
|
|
}>()
|
|
|
|
const deviceColumns: { field: keyof DeviceStats; header: string }[] = [
|
|
{ field: 'name', header: 'Name' },
|
|
{ field: 'type', header: 'Type' },
|
|
{ field: 'vram_total', header: 'VRAM Total' },
|
|
{ field: 'vram_free', header: 'VRAM Free' },
|
|
{ field: 'torch_vram_total', header: 'Torch VRAM Total' },
|
|
{ field: 'torch_vram_free', header: 'Torch VRAM Free' }
|
|
]
|
|
|
|
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
|
|
)
|
|
) {
|
|
return formatSize(value)
|
|
}
|
|
return value
|
|
}
|
|
</script>
|