340 lines
9.8 KiB
Markdown
340 lines
9.8 KiB
Markdown
# 🔧 Логирование: 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 билде!**
|