w-funnel/docs/LOGGING_DEV_VS_PROD.md

🔧 Логирование: Development vs Production

✅ Подтверждение: Логи работают одинаково

Все логи Google Analytics событий работают идентично в обеих средах:

• ✅ Development (npm run dev)
• ✅ Production (npm run build && npm run start)

---

📋 Проверка кода

1. PageViewTracker.tsx

// ✅ НЕТ проверок на 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

// ✅ НЕТ проверок на 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

const nextConfig: NextConfig = {
  env: {
    FUNNEL_BUILD_VARIANT: buildVariant,
    // ... другие env
  },
  // ✅ НЕТ compiler.removeConsole
  // ✅ НЕТ настроек для удаления логов
};

Важно: В конфигурации отсутствует compiler.removeConsole, поэтому Next.js НЕ удаляет console.log при сборке production билда.

Что могло бы удалить логи (но НЕ настроено)

// ❌ Этого НЕТ в нашей конфигурации
const nextConfig: NextConfig = {
  compiler: {
    removeConsole: true,  // ← Это удаляло бы ВСЕ console.*
  }
};

// ❌ Этого ТОЖЕ нет
const nextConfig: NextConfig = {
  compiler: {
    removeConsole: {
      exclude: ['error', 'warn'],  // Удаляло бы log, info, debug
    }
  }
};

---

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

Шаг 1: Собрать production билд

npm run build

Результат: Логи НЕ удаляются из собранного кода.

Шаг 2: Запустить production сервер

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

Все логи выполняются в браузере клиента:

"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 по умолчанию:

// Поведение по умолчанию Next.js:
// ✅ console.log сохраняется
// ✅ console.warn сохраняется
// ✅ console.error сохраняется
// ✅ console.groupCollapsed сохраняется

Удаление происходит только если явно настроено через compiler.removeConsole.

---

🚀 Дополнительные гарантии

TypeScript компиляция

// TypeScript → JavaScript
// console.log остается как console.log
// НЕ транспилируется в что-то другое

Минификация

// Минифицированный код (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

Проверка собранного кода

# 1. Собрать production билд
npm run build

# 2. Найти скомпилированные файлы
cd .next/static/chunks

# 3. Поискать console.log в минифицированных файлах
grep -r "console.log" .
grep -r "console.groupCollapsed" .

# Результат: ✅ console.log найдены в коде!

Проверка в браузере (production)

// 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: Условие в коде (рекомендуется)

// Обернуть логи в условие:
if (process.env.NODE_ENV === "development") {
  console.groupCollapsed(...);
  console.log(...);
  console.groupEnd();
}

Преимущество: Гранулярный контроль (можно отключить только определенные логи).

Способ 2: Конфигурация Next.js

// 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

Гарантия

// 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
• По умолчанию 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 билде!