Add error handling to prevent lazy loading from getting stuck

- Wrap bandwidth throttling check in try-catch in Server.php
- Wrap loadVmStatus in try-catch in Component.php mount()
- Add fallback UI in server.blade.php when status is unavailable
- Show 'Unavailable' state instead of infinite skeleton loading
This commit is contained in:
2025-12-16 07:56:49 -05:00
parent 24eee90728
commit 0125349eb1
3 changed files with 37 additions and 3 deletions

View File

@@ -34,7 +34,14 @@ class Component extends BaseComponent
abort(403);
}
$this->loadVmStatus();
try {
$this->loadVmStatus();
} catch (\Throwable $e) {
\Log::error('Failed to load VM status for server ' . $server->id, [
'error' => $e->getMessage(),
]);
$this->status = null;
}
}
/**

View File

@@ -13,8 +13,14 @@ class Server extends Component
{
parent::mount($server);
// Check and enforce bandwidth throttling if exceeded
$this->checkAndEnforceBandwidthLimit();
// Check and enforce bandwidth throttling if exceeded (wrapped in try-catch to prevent lazy load failures)
try {
$this->checkAndEnforceBandwidthLimit();
} catch (\Throwable $e) {
\Log::warning('Failed to check bandwidth limit for server ' . $server->id, [
'error' => $e->getMessage(),
]);
}
}
public function getMonthlyTrafficProperty()

View File

@@ -1,4 +1,5 @@
<div class="space-y-4">
@if($status)
<a href="{{ route('proxmox.server.overview', ['server' => $server->id]) }}" wire:navigate>
<div class="bg-background-secondary hover:bg-background-secondary/80 border border-neutral p-4 rounded-lg mb-4">
@@ -145,4 +146,24 @@
</div>
</div>
</a>
@else
{{-- Status unavailable - show error state --}}
<a href="{{ route('proxmox.server.overview', ['server' => $server->id]) }}" wire:navigate>
<div class="bg-background-secondary hover:bg-background-secondary/80 border border-danger/30 p-4 rounded-lg mb-4">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-3">
<div class="bg-danger/10 p-2 rounded-lg">
<x-ri-server-line class="size-5 text-danger" />
</div>
<span class="font-medium">{{ $server->hostname ?? 'Server #' . $server->id }}</span>
</div>
<div class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-danger bg-danger/20">
<x-ri-error-warning-fill class="size-5" />
<span class="text-sm font-medium">Unavailable</span>
</div>
</div>
<p class="text-sm text-base/60 mt-2">Unable to retrieve server status. Click to view details or try again.</p>
</div>
</a>
@endif
</div>