---
id: ff5b787b-ca6d-4e2c-b89d-a1efed74fce9
type: solution
title: "WebSocket error boundary UI pattern"
tags: [strat-gameplay-webapp, vue, websocket, ux, pattern]
importance: 0.6
confidence: 0.8
created: "2026-01-14T02:52:46.508218+00:00"
updated: "2026-01-14T02:52:46.508218+00:00"
---

When WebSocket permanently fails (after max reconnection attempts), show distinct red error banner with 'Try Again' button that calls manualRetry(). Yellow banner only shows during active reconnection. Loading modal also distinguishes between connecting/reconnecting/failed states. Pattern: use permanentlyFailed flag to switch between warning (reconnecting) and error (failed) states.