console.log("đây");
console.log("đây 2");
console.log("TẠI SAO CÁI NÀY KHÔNG HOẠT ĐỘNG???");
console.log(data); // undefined 😭

┌──────────────────────────────────────────────────────────┐
│                     TRÌNH DUYỆT CỦA NGƯỜI DÙNG                        │
├──────────────────────────────────────────────────────────┤
│ logger.info("Đăng nhập thành công", {userId: 123})          │
│ ↓                                                       │
│ [Pino Browser Logger - 2KB gzipped]                     │
│ ↓                                                       │
└─────────────────────┬───────────────────────────────────┘
                      │ HTTPS POST
                      ↓
┌──────────────────────────────────────────────────────────┐
│                    ĐIỂM KẾT NỐI API                         │
├──────────────────────────────────────────────────────────┤
│ /api/log                                               │
│ • Thêm thông tin với metadata                               │
│ • Thêm dấu thời gian của server                                │
│ • Ghi lại user agent                                  │
└─────────────────────┬───────────────────────────────────┘
                      │ 
                      ↓
┌──────────────────────────────────────────────────────────┐
│                    TỆP LOGS                            │
├──────────────────────────────────────────────────────────┤
│ 📁 logs/                                                 │
│ ├── 🔴 error.log   (Chỉ ghi những vấn đề nghiêm trọng)               │
│ ├── 🟡 combined.log (Thông tin, Cảnh báo, Lỗi)                  │
│ └── 🔵 debug.log   (Mọi thứ)                         │
└──────────────────────────────────────────────────────────┘

// src/common/libs/logger.ts
import pino from 'pino';

const isServer = typeof window === 'undefined';

const logger = isServer 
  ? createServerLogger()  // Ghi thẳng vào file
  : createBrowserLogger(); // Gọi API HTTP

export default logger;

// Trước: Mất dấu sau khi làm mới
console.log("Người dùng đã đăng nhập");

// Sau: Được ghi lại với ngữ cảnh
logger.info({ 
  userId: user.id, 
  email: user.email,
  loginMethod: 'OAuth',
  timestamp: Date.now()
}, "Người dùng đã đăng nhập thành công");

// pages/api/log.ts
export default function handler(req, res) {
  const { level, message, data } = req.body;
  const enrichedData = {
    ...data,
    source: 'client',
    userAgent: req.headers['user-agent'],
    ip: req.connection.remoteAddress
  };
  logger[level](enrichedData, message);
  res.status(200).json({ success: true });
}

         TRƯỚC                    SAU
    ┌─────────────┐          ┌─────────────┐
    │  5-7 NGÀY   │          │  2-4 GIỜ  │
    └─────────────┘          └─────────────┘
    Thời gian giải quyết lỗi trung bình      Thời gian giải quyết lỗi trung bình

    ┌─────────────┐          ┌─────────────┐
    │     40%     │          │     95%     │
    └─────────────┘          └─────────────┘
    Các vấn đề được tái hiện        Các vấn đề được tái hiện
      Lần thử đầu tiên            Lần thử đầu tiên

const handleLogin = async (credentials) => {
  logger.info({ email: credentials.email }, "Bắt đầu thử nghiệm đăng nhập");
  try {
    const response = await authService.login(credentials);
    logger.info({ userId: response.userId, loginTime: Date.now() - startTime + 'ms' }, "Đăng nhập thành công");
    router.push('/dashboard');
  } catch (error) {
    logger.error({ error: error.message, stack: error.stack, email: credentials.email, endpoint: '/api/auth/login' }, "Đăng nhập thất bại");
    showErrorToast("Đăng nhập thất bại. Vui lòng thử lại.");
  }
};

const fetchDashboardData = async () => {
  const startTime = performance.now();
  try {
    const data = await api.getDashboard();
    const duration = performance.now() - startTime;
    if (duration > 2000) {
      logger.warn({ duration: `${duration}ms`, dataSize: JSON.stringify(data).length, endpoint: '/api/dashboard' }, "Đã phát hiện phản hồi API chậm");
    }
    return data;
  } catch (error) {
    logger.error({ error }, "Lấy dữ liệu dashboard thất bại");
    throw error;
  }
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    updateProfile: (state, action) => {
      logger.debug({
        oldState: state.profile,
        newData: action.payload,
        changedFields: Object.keys(action.payload)
      }, "Cập nhật hồ sơ được kích hoạt");
      state.profile = { ...state.profile, ...action.payload };
    }
  }
});

[2025-09-02 16:44:07] INFO: Bắt đầu thử nghiệm đăng nhập
  email: "user@example.com"
...

{
  "level": "error",
  "time": "2025-09-02T16:44:07.178Z",
  "msg": "Xử lý thanh toán thất bại",
  "error": "Thẻ bị từ chối",
  "userId": "usr_123"
  // ...
}

# Tìm theo dấu thời gian
grep "16:4[0-9]" logs/error.log

# Theo người dùng/email
grep "user@example.com" logs/combined.log | tail -20

# Theo dõi hành trình
grep "usr_123" logs/debug.log | grep "2025-09-02T16"

npm install pino pino-pretty
touch src/libs/logger.ts
touch pages/api/log.ts

#!/bin/bash
# daily-report.sh

echo "=== Báo Cáo Lỗi Hàng Ngày ==="
echo "Tổng Lỗi: $(grep ERROR logs/error.log | wc -l)"
echo "Lỗi Độc Nhất: $(grep ERROR logs/error.log | cut -d'\"' -f4 | sort -u | wc -l)"
echo "5 Lỗi Hàng Đầu:"
grep ERROR logs/error.log | cut -d'"' -f4 | sort | uniq -c | sort -rn | head -5

#!/bin/bash
# user-journey.sh

USER_ID=$1
echo "=== Hành Trình Người Dùng cho $USER_ID ==="
grep "$USER_ID" logs/combined.log | jq -r '[.time, .level, .msg] | @csv'