frontend-debug

What problem does it solve?

Provides a compact, actionable knowledge base to find and fix frontend failures in a Vite + Vue 3 TypeScript application that uses Pinia, Axios, and a WebSocket service, reducing time to resolution for token refresh loops, missing event handlers, build/type errors, and runtime exceptions.

Core Features & Use Cases

• WebSocket debugging: catalog of 26+ event types, reconnect/backoff rules, message queue limits, and subscription cleanup guidance to resolve missing or duplicated event handling.
• API & Auth troubleshooting: Axios interceptors, 401 refresh flow, infinite-loop guard, and retry/queue semantics for diagnosing token refresh and auth-related failures.
• State & UI flows: overview of 13 Pinia stores (esp + shared), component hierarchy and two-level dashboard navigation to trace state-origin issues and UI update regressions.
• Build, test, and run: Vite build chain and TypeScript strict settings, Vitest unit tests and Playwright E2E flows, and Docker dev container practices for reproducible debugging.
• Use case: reproduce a token-refresh race that causes repeated WebSocket reconnects by running the frontend in the Docker dev container, triggering the auth refresh path, and capturing Playwright traces and logs for the failing flows.

Quick Start

Start the frontend dev server, reproduce the failing WebSocket or token-refresh scenario, and collect logs, Playwright traces, and console errors to pinpoint the root cause.