คู่มือ Testing และ Debugging ระบบ Time Clock

1. ดู Console Log ฝั่ง Server (Vercel)

เมื่อ deploy ระบบไปที่ Vercel แล้ว ต้องการดู log ฝั่ง server สามารถทำได้ด้วยคำสั่งนี้:

vercel logs <deployment-url>

ตัวอย่าง:

vercel logs time-clock-frontend.vercel.app

หรือดูผ่านหน้าเว็บ Vercel Dashboard → Project → Deployments → ดูที่แท็บ Logs

Tips:

• ใช้ filter ตาม Function Region, Request ID, หรือ Error Only ได้
• Vercel จะเก็บ log ย้อนหลังประมาณ 1-7 วัน ขึ้นอยู่กับแผนการใช้งาน

2. ตั้ง LOG_LEVEL=debug และใช้ debug package

เพิ่มการ log อย่างละเอียดในโค้ดด้วยการติดตั้งแพ็กเกจ debug:

pnpm add debug

ตัวอย่างใช้ในไฟล์ /lib/googleClient.js:

import Debug from 'debug';

const debug = Debug('app:googleClient');

debug('Initializing Google Calendar client');

เวลา run หรือ deploy สามารถตั้ง Environment Variable เพิ่ม:

LOG_LEVEL=debug

หรือใน Vercel Dashboard → Project Settings → Environment Variables → เพิ่ม LOG_LEVEL=debug

ประโยชน์:

• เปิด/ปิด verbose log ได้ตามต้องการ
• ไม่ปนกับ console.log ปกติ

3. Inspect Request/Response ผ่าน Chrome DevTools และ Vercel Edge Logs

ฝั่ง Client

• เปิด DevTools → แท็บ Network
• กดส่งฟอร์ม ลงเวลา
• ดู Request /api/clock
  • เช็ค Payload ถูกส่งครบไหม
  • Response code 201 หรือไม่

ฝั่ง Server (Edge Log)

• ใน Vercel Dashboard เข้า Deployment → กด Edge Function → ดู Execution Details
• เช็ค Status Code, Duration, และ Error (ถ้ามี)

Tips:

• ดู Request ID และ Trace ID เชื่อมกับ Log ง่ายขึ้น
• ใช้ Edge Metrics ตรวจความเร็วแต่ละขั้นตอน

4. วิธีแก้ Error พบบ่อย: "Access Not Configured Calendar API"

อาการ:

• API ตอบกลับด้วย Error แบบนี้

สาเหตุ:

• ยังไม่ได้เปิดใช้งาน Google Calendar API ใน Google Cloud Console
• หรือ Service Account ไม่มีสิทธิ์เข้าถึง Calendar นี้

วิธีแก้:

• เข้า Google Cloud Console → APIs & Services → Library
• ค้นหา "Google Calendar API" และกด Enable
• เช็คว่า Calendar ที่จะบันทึก event ได้แชร์สิทธิ์ให้ Service Account Email แล้ว (ระดับ: Make changes to events)
• อย่าลืมว่าค่า GOOGLE_CALENDAR_ID ใน .env ต้องถูกต้อง

5. Checklist ก่อน Push และ Deploy

• ทดสอบลงเวลา (Check-in, Check-out) ผ่านหน้าเว็บสำเร็จ
• ตรวจ log server ไม่มี error แปลก ๆ
• ตรวจว่า Event ถูกสร้างใน Calendar ถูกต้อง (เวลา, ชื่อ, action)
• ตรวจ timezone ทั้งฝั่ง Client (แสดง) และ Server (บันทึก) ถูกต้อง Asia/Bangkok
• ตรวจ Env Variables ครบ (GOOGLE_PROJECT_ID, GOOGLE_CALENDAR_ID, GOOGLE_CLIENT_EMAIL, GOOGLE_PRIVATE_KEY)
• ตรวจ .env.local ไม่หลุดเข้า Git (เช็ค .gitignore)
• ลอง Deploy Test บน Vercel และเช็ค Live Log อีกครั้ง

---

หมายเหตุ: ถ้าเจอปัญหาแปลก ๆ ให้เริ่มจากเช็ค Environment Variable ก่อนเสมอ เพราะผิดตัวเดียวจะทำให้ Calendar API ใช้งานไม่ได้