From 6196b4b0e2d1dd5d145e4f7b24e28c444da08028 Mon Sep 17 00:00:00 2001 From: "dev.daminik00" Date: Thu, 23 Oct 2025 21:16:44 +0200 Subject: [PATCH] add event logs --- docs/ENHANCED_LOGGING_GUIDE.md | 17 +- docs/LOGGING_DEV_VS_PROD.md | 339 +++++++++++++++++++++++++++++++++ 2 files changed, 347 insertions(+), 9 deletions(-) create mode 100644 docs/LOGGING_DEV_VS_PROD.md diff --git a/docs/ENHANCED_LOGGING_GUIDE.md b/docs/ENHANCED_LOGGING_GUIDE.md index 8f777cd..e182c35 100644 --- 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 -if (process.env.NODE_ENV === "development") { - console.groupCollapsed(...); -} -``` +**Гарантия:** Код не содержит условий на `process.env.NODE_ENV`, и Next.js конфигурация не удаляет console.log при сборке. + +**Результат:** Вы видите одинаковые логи в обеих средах для проверки отправки событий в реальном времени. + +📋 **Детали:** См. `LOGGING_DEV_VS_PROD.md` для полного объяснения и верификации. ### Производительность diff --git a/docs/LOGGING_DEV_VS_PROD.md b/docs/LOGGING_DEV_VS_PROD.md new file mode 100644 index 0000000..b554ef5 --- /dev/null +++ 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 билде!**