當專案逐漸變大、功能越來越多時，「除錯（Debug）」變成開發過程中最耗時的環節之一。

這時候，與其滿螢幕的 console.log，不如讓 Cursor 幫我們設計一個真正實用、可維護的 Log 系統。

今天，我們就用 Cursor 來完成以下目標：

1. 自動產生一個具備 時間戳（timestamp）、模組名稱（source） 與 等級分類（level） 的 Log 系統。
2. 在開發與生產環境中分層記錄（例如 dev 印出 console、prod 寫入檔案或外部服務）。
3. 讓 AI 自動推薦與整合好用的套件（例如 pino、winston、loglevel）。

🧩 Step 1：讓 Cursor 幫我們定義 Log 格式

在 Cursor 中輸入提示：

幫我設計一個適合 Next.js 專案的 log 系統，
要包含 timestamp、source、level、message，
並支援不同環境的輸出策略。

Cursor 很快會生成一個類似的架構：

// utils/logger.ts
import pino from "pino";

const transport =
  process.env.NODE_ENV === "production"
    ? pino.transport({
        target: "pino/file",
        options: { destination: "./logs/app.log" },
      })
    : pino.transport({
        target: "pino-pretty",
        options: { colorize: true },
      });

export const logger = pino(
  {
    level: process.env.LOG_LEVEL || "info",
    base: undefined,
    timestamp: () => `,"time":"${new Date().toISOString()}"`,
  },
  transport
);

export const createModuleLogger = (moduleName: string) => ({
  info: (msg: string, extra?: any) =>
    logger.info({ source: moduleName, ...extra }, msg),
  error: (msg: string, extra?: any) =>
    logger.error({ source: moduleName, ...extra }, msg),
  warn: (msg: string, extra?: any) =>
    logger.warn({ source: moduleName, ...extra }, msg),
  debug: (msg: string, extra?: any) =>
    logger.debug({ source: moduleName, ...extra }, msg),
});

🧩 Step 2：模組化使用

在不同的檔案中，我們就能清楚標註「是哪個功能模組的 log」。

// pages/api/user.ts
import { createModuleLogger } from "@/utils/logger";
const log = createModuleLogger("UserAPI");

export default function handler(req, res) {
  log.info("User API 被呼叫");
  try {
    // 模擬資料處理
    log.debug("處理請求中", { body: req.body });
    res.status(200).json({ message: "success" });
  } catch (err) {
    log.error("發生錯誤", { error: err });
    res.status(500).json({ message: "error" });
  }
}

結果輸出會像這樣 👇

{"level":"info","time":"2025-10-05T15:21:33.512Z","source":"UserAPI","msg":"User API 被呼叫"}
{"level":"debug","time":"2025-10-05T15:21:33.513Z","source":"UserAPI","msg":"處理請求中","body":{"id":1}}

⚙️ Step 3：Cursor 推薦的 Log 套件比較

Cursor 在產生建議時，會根據你的專案技術棧（Next.js / Node.js）與目的自動選出最合適的套件。

🧩 Step 4：整合到 CI/CD

這一步可以延續我們前幾天的自動化部署主題。

你可以讓 Cursor 幫忙在 .github/workflows/deploy.yml 中加上這段：

- name: Upload Logs to GCP Bucket
  run: gsutil cp ./logs/app.log gs://my-app-logs/${{ github.run_id }}.log

這樣每次部署完成後，會自動把 log 上傳到 Google Cloud Storage，

方便後續除錯、監控或分析。

🧠 小結

透過 Cursor 的輔助，我們可以：

• 自動生成高結構化的 log 系統。
• 確保每個模組都有明確的來源與時間戳。
• 將 log 整合至自動部署流程，實現「可觀測開發」。

這不僅僅是除錯工具，而是一種 AI 驅動的開發透明化策略。

讓你的專案不只是「能跑」，而是「能看得清楚怎麼跑」。