vue-pult/plans/client-critical-refactor-plan.md

План рефакторинга критических проблем в клиентской части

Введение

Этот план фокусируется на 3 самых критических проблемах, выявленных в анализе:

1. BOM в main.js - Может сломать загрузку app.
2. Race conditions в router guards - Неправильные redirects и access leaks.
3. Memory leaks в composables - Утечки памяти от timers/WS.

План пошаговый, с оценкой effort. После фиксов - manual testing. Timeline: 4-6 часов.

1. Удаление BOM в main.js

Описание

Невидимый BOM-символ (EF BB BF) в начале файла приводит к SyntaxError в парсинге JS.

Приоритет: High (App crash)

Влияние: Полный отказ загрузки в некоторых браузерах/builds.

Шаги реализации

1. Открыть client/src/main.js в редакторе с hex-view (VSCode + Hex Editor extension).
2. Удалить первые 3 байта (BOM).
3. Сохранить как UTF-8 without BOM (VSCode: File > Save with Encoding > UTF-8).
4. Проверить: Нет  перед import.

Затронутые файлы

• client/src/main.js

Effort: Low (15 мин)

Тестирование

• npm run dev - No console errors.
• npm run build && npm run preview - App mounts correctly.
• Open in browser: Inspect source - no BOM.

2. Fix race conditions в router guards

Описание

reauth() в beforeEach синхронный, но может быть async (WS/API) - guard не ждет, leading to wrong next().

Приоритет: High (Security/UX)

Влияние: Access to / without auth, infinite redirects.

Шаги реализации

1. В useAuth.js: Сделать reauth async:

   const reauth = async () => {
     if (user.value) return true;
     const localData = localStorage.getItem('user_data');
     if (localData) { user.value = JSON.parse(localData); return true; }
     try { await apiReauth(); return !!user.value; } catch { return false; }
   };
   

2. В router/index.js: Async guard:

   router.beforeEach(async (to, from, next) => {
     try {
       const isAuth = await reauth();
       if (to.meta.requiresAuth && !isAuth) { next('/login'); return; }
       if (to.meta.requiresGuest && isAuth) { next('/'); return; }
       next();
     } catch (error) {
       console.error('Router error:', error);
       next('/login');
     }
   });
   

3. Добавить global loading в App.vue:

   <template> <div v-if="loadingAuth">Loading...</div> <RouterView v-else /> </template>
   <script setup> const { loadingAuth } = useAuth(); </script>
   

Затронутые файлы

• client/src/composables/useAuth.js
• client/src/router/index.js
• client/src/App.vue

Effort: Medium (1 час)

Тестирование

• Clear localStorage, navigate / - redirect to /login.
• Slow network (DevTools): No access to HomePage until reauth done.
• Login -> / - no loop.

3. Cleanup в composables (Fix memory leaks)

Описание

Timers (setInterval), WS connections, watchers не очищаются onUnmounted.

Приоритет: High (Performance)

Влияние: Memory leaks в long sessions, ghost WS.

Шаги реализации

1. В каждом composable (useWebSocket, useTime, useGamePorts, etc.):
   • Import onUnmounted from 'vue'.
   • В setup:

     let intervalId;
     onUnmounted(() => {
       if (intervalId) clearInterval(intervalId);
       if (ws) ws.close();
       // Cleanup watchers: unwatch();
     });
     

2. Для WS-specific (useWebSocket.js):
   • В connect: ws.onclose = () => { clearTimeout(heartbeat); };
   • В sendMessage: AbortController для timeout cleanup.
3. Для global (useWebSocketGlobal.js): Track active components, cleanup on last unmount.
4. Добавить в useAuth/logout: Cleanup WS if global.

Затронутые файлы

• client/src/composables/useWebSocket.js
• client/src/composables/useWebSocketGlobal.js
• client/src/composables/useTime.js
• client/src/composables/game/useGamePorts.js
• client/src/composables/shift/useShiftOperations.js
• Другие composables с timers/watch

Effort: Medium (2-3 часа, multiple files)

Тестирование

• Navigate Login <-> Home multiple times.
• DevTools > Memory: Heap snapshot - no growth.
• Network: No duplicate WS connects on route change.
• Long run (5+ min): No console spam from ghosts.

Заключение

• Общий timeline: 3-4 часа (High first).
• Commit strategy: Separate commits: "Fix BOM in main.js", "Async router guards", "Cleanup composables".
• Post-fix: Full manual test: Auth, navigate, WS actions (start game, shift open), memory check.
• Риски: Low - isolated changes. Backup branch перед.

Файл создан: plans/client-critical-refactor-plan.md.