[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:
bymyself
2025-09-19 01:38:37 -07:00
parent 28cb3bbdb5
commit c844711f6d
4 changed files with 85 additions and 55 deletions

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