mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-06 05:30:08 +00:00
[fix] Resolve Sentry issue CLOUD-FRONTEND-STAGING-13 - TypeError on undefined device
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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user