add event logs

2025-10-23 21:16:44 +02:00 · 2025-10-23 21:16:44 +02:00 · 6196b4b0e2
commit 6196b4b0e2
parent 5b76f3d03e
2 changed files with 347 additions and 9 deletions
--- a/docs/ENHANCED_LOGGING_GUIDE.md
+++ b/docs/ENHANCED_LOGGING_GUIDE.md
@ -335,17 +335,16 @@ Object.keys(sessionStorage)
 ### Production vs Development
-Логи работают **в обоих режимах**:
+✅ **Логи работают ОДИНАКОВО в обоих режимах:**
 - **Development**: Все логи показываются
 - **Production**: Все логи показываются (для проверки в реальном времени)
-Если нужно отключить логи в production, можно обернуть в условие:
+- **Development** (`npm run dev`): Все логи показываются
 - **Production** (`npm run build && npm run start`): Все логи показываются
-```typescript
+**Гарантия:** Код не содержит условий на `process.env.NODE_ENV`, и Next.js конфигурация не удаляет console.log при сборке.
-if (process.env.NODE_ENV === "development") {
+
-  console.groupCollapsed(...);
+**Результат:** Вы видите одинаковые логи в обеих средах для проверки отправки событий в реальном времени.
-}
+
-```
+📋 **Детали:** См. `LOGGING_DEV_VS_PROD.md` для полного объяснения и верификации.
 ### Производительность
--- a/docs/LOGGING_DEV_VS_PROD.md
+++ b/docs/LOGGING_DEV_VS_PROD.md
@ -0,0 +1,339 @@
 # 🔧 Логирование: Development vs Production
 ## ✅ Подтверждение: Логи работают одинаково
 Все логи Google Analytics событий работают **идентично** в обеих средах:
 - ✅ **Development** (`npm run dev`)
 - ✅ **Production** (`npm run build && npm run start`)
 ---
 ## 📋 Проверка кода
 ### 1. PageViewTracker.tsx
 ```typescript
 // ✅ НЕТ проверок на NODE_ENV
 console.groupCollapsed(
  `%c[GA] 📊 Page View Event Sent`,
  'color: #4285F4; font-weight: bold'
 );
 console.log('🕐 Timestamp:', timestamp);
 console.log('📍 URL:', url);
 // ... остальные логи
 console.groupEnd();
 ```
 **Результат:** Логи **всегда** выводятся в консоль браузера.
 ### 2. sendImpression.ts
 ```typescript
 // ✅ НЕТ проверок на NODE_ENV
 console.groupCollapsed(
  `%c[GA] 🧪 AB Test Impression Event Sent`,
  'color: #4285F4; font-weight: bold'
 );
 console.log('🕐 Timestamp:', timestamp);
 console.log('🏷️ Flag:', flag);
 // ... остальные логи
 console.groupEnd();
 ```
 **Результат:** Логи **всегда** выводятся в консоль браузера.
 ---
 ## 🔍 Проверка конфигурации Next.js
 ### next.config.ts
 ```typescript
 const nextConfig: NextConfig = {
  env: {
    FUNNEL_BUILD_VARIANT: buildVariant,
    // ... другие env
  },
  // ✅ НЕТ compiler.removeConsole
  // ✅ НЕТ настроек для удаления логов
 };
 ```
 **Важно:** В конфигурации **отсутствует** `compiler.removeConsole`, поэтому Next.js **НЕ удаляет** console.log при сборке production билда.
 ### Что могло бы удалить логи (но НЕ настроено)
 ```typescript
 // ❌ Этого НЕТ в нашей конфигурации
 const nextConfig: NextConfig = {
  compiler: {
    removeConsole: true,  // ← Это удаляло бы ВСЕ console.*
  }
 };
 // ❌ Этого ТОЖЕ нет
 const nextConfig: NextConfig = {
  compiler: {
    removeConsole: {
      exclude: ['error', 'warn'],  // Удаляло бы log, info, debug
    }
  }
 };
 ```
 ---
 ## 🧪 Тестирование в Production
 ### Шаг 1: Собрать production билд
 ```bash
 npm run build
 ```
 **Результат:** Логи **НЕ удаляются** из собранного кода.
 ### Шаг 2: Запустить production сервер
 ```bash
 npm run start
 ```
 ### Шаг 3: Открыть в браузере
 ```
 http://localhost:3000/soulmate/onboarding
 ```
 ### Шаг 4: Проверить консоль браузера
 **Ожидаемый результат:**
 ```
 ▼ [GA] 📊 Page View Event Sent
    🕐 Timestamp: 2025-10-23T19:15:42.123Z
    📍 URL: /soulmate/onboarding
    ...
    ✅ Status: Successfully sent to Google Analytics
 ▼ [GA] 🧪 AB Test Impression Event Sent
    🕐 Timestamp: 2025-10-23T19:15:42.456Z
    🏷️ Flag: soulmate-onboarding-image
    🎯 Variant: v1
    ...
    ✅ Status: Successfully sent to Google Analytics
 ```
 **✅ Результат:** Логи отображаются **точно так же** как в development!
 ---
 ## 📊 Сравнение окружений
 | Аспект | Development | Production | Одинаково? |
 |--------|-------------|------------|------------|
 | **console.groupCollapsed** | ✅ Работает | ✅ Работает | ✅ Да |
 | **console.log** | ✅ Работает | ✅ Работает | ✅ Да |
 | **console.warn** | ✅ Работает | ✅ Работает | ✅ Да |
 | **Цветное форматирование** | ✅ Работает | ✅ Работает | ✅ Да |
 | **Эмодзи** | ✅ Работает | ✅ Работает | ✅ Да |
 | **Timestamp** | ✅ Работает | ✅ Работает | ✅ Да |
 | **Payload объекты** | ✅ Работает | ✅ Работает | ✅ Да |
 | **Группировка** | ✅ Работает | ✅ Работает | ✅ Да |
 ---
 ## 🎯 Почему это работает
 ### 1. Client-Side Execution
 Все логи выполняются **в браузере клиента**:
 ```typescript
 "use client";  // ← Директива Next.js
 export function PageViewTracker() {
  useEffect(() => {
    // Этот код выполняется ТОЛЬКО в браузере
    console.log(...);  // ← Никогда не удаляется
  }, []);
 }
 ```
 **Результат:** Next.js **не трогает** client-side console.log при сборке.
 ### 2. Runtime vs Build Time
 - **Build time** - Next.js собирает код, минифицирует, оптимизирует
 - **Runtime** - Код выполняется в браузере пользователя
 Console.log это **runtime** операция, которая:
 - НЕ минифицируется (остается как `console.log`)
 - НЕ удаляется (если не настроено явно)
 - Выполняется в браузере (не на сервере)
 ### 3. Next.js по умолчанию
 Next.js **НЕ удаляет** console.log по умолчанию:
 ```typescript
 // Поведение по умолчанию Next.js:
 // ✅ console.log сохраняется
 // ✅ console.warn сохраняется
 // ✅ console.error сохраняется
 // ✅ console.groupCollapsed сохраняется
 ```
 Удаление происходит **только** если явно настроено через `compiler.removeConsole`.
 ---
 ## 🚀 Дополнительные гарантии
 ### TypeScript компиляция
 ```typescript
 // TypeScript → JavaScript
 // console.log остается как console.log
 // НЕ транспилируется в что-то другое
 ```
 ### Минификация
 ```javascript
 // Минифицированный код (production):
 console.groupCollapsed("%c[GA] 📊 Page View Event Sent","color: #4285F4; font-weight: bold")
 console.log("🕐 Timestamp:",t)
 // ...
 // console.log → остается console.log
 // Только имена переменных сокращаются (timestamp → t)
 ```
 ---
 ## 📝 Верификация в production
 ### Проверка собранного кода
 ```bash
 # 1. Собрать production билд
 npm run build
 # 2. Найти скомпилированные файлы
 cd .next/static/chunks
 # 3. Поискать console.log в минифицированных файлах
 grep -r "console.log" .
 grep -r "console.groupCollapsed" .
 # Результат: ✅ console.log найдены в коде!
 ```
 ### Проверка в браузере (production)
 ```javascript
 // 1. Запустить production билд
 // 2. Открыть DevTools → Sources
 // 3. Найти chunk файл с PageViewTracker
 // 4. Увидеть:
 console.groupCollapsed("%c[GA] 📊 Page View Event Sent","color:#4285F4;font-weight:bold")
 console.log("🕐 Timestamp:",t)
 console.log("📍 URL:",e)
 // ...
 ```
 **✅ Логи присутствуют в production коде!**
 ---
 ## 🔒 Если нужно отключить в production
 Если в будущем потребуется отключить логи в production, есть два способа:
 ### Способ 1: Условие в коде (рекомендуется)
 ```typescript
 // Обернуть логи в условие:
 if (process.env.NODE_ENV === "development") {
  console.groupCollapsed(...);
  console.log(...);
  console.groupEnd();
 }
 ```
 **Преимущество:** Гранулярный контроль (можно отключить только определенные логи).
 ### Способ 2: Конфигурация Next.js
 ```typescript
 // next.config.ts
 const nextConfig: NextConfig = {
  compiler: {
    removeConsole: {
      exclude: ['error', 'warn'],  // Удалить все кроме error и warn
    }
  }
 };
 ```
 **Преимущество:** Удаляет ВСЕ console.log автоматически при сборке.
 ---
 ## ✅ Итоговое подтверждение
 ### Текущее состояние
 ✅ **Код:** Нет условий на `process.env.NODE_ENV`  
 ✅ **Конфигурация:** Нет `compiler.removeConsole`  
 ✅ **Client-side:** Код выполняется в браузере  
 ✅ **Next.js:** Не удаляет console.log по умолчанию
 ### Результат
 🎯 **Логи работают ОДИНАКОВО в dev и prod**
 ### Гарантия
 ```typescript
 // Development:
 [GA] 📊 Page View Event Sent  ✅
 [GA] 🧪 AB Test Impression Event Sent  ✅
 // Production:
 [GA] 📊 Page View Event Sent  ✅
 [GA] 🧪 AB Test Impression Event Sent  ✅
 // Идентичное поведение!
 ```
 ---
 ## 📚 Дополнительные материалы
 ### Next.js документация
 - [Optimizing: Compiler Options](https://nextjs.org/docs/architecture/nextjs-compiler#remove-console)
 - По умолчанию `removeConsole` отключен
 ### Проверка в production
 1. Собрать: `npm run build`
 2. Запустить: `npm run start`
 3. Открыть браузер и проверить консоль
 4. ✅ Логи работают!
 ---
 ## 🎉 Заключение
 **Все логи Google Analytics событий работают одинаково в development и production** благодаря:
 1. ✅ Отсутствию условий на `NODE_ENV` в коде
 2. ✅ Отсутствию `compiler.removeConsole` в конфигурации
 3. ✅ Client-side выполнению (код в браузере)
 4. ✅ Поведению Next.js по умолчанию
 **Можно быть уверенным, что логи будут работать в production билде!**