Mục tiêu

Xử lý các lỗi phức tạp mà AI sửa sai, nắm kỹ thuật “Reset Context” và cách dùng AI thứ 2 để kiểm tra AI thứ 1.

Sau bài này, bạn sẽ:

• ✅ Đọc hiểu lỗi trong terminal và trình duyệt Console
• ✅ Nhận diện “vòng xoáy chết” (death loop) khi AI sửa sai
• ✅ Thành thạo kỹ thuật Reset Context để thoát khỏi bế tắc
• ✅ Biết cách dùng AI thứ 2 kiểm tra AI thứ 1

Nội dung chính

6.1 — Terminal: “Bảng điều khiển báo lỗi”

LỖI TRONG TERMINAL — CÁCH ĐỌC:

ERROR in ./src/components/Navbar.jsx
  Line 15:  'useState' is not defined  no-undef
       ↑          ↑                        ↑
    Vị trí     Mô tả lỗi              Loại lỗi

CÁCH COPY CHO AI:
1. Copy TỪ dòng "ERROR" hoặc "Error" ĐẾN hết mô tả
2. Kèm theo: "Tôi đang ở file [tên file], đang làm [hành động gì]"
3. KHÔNG copy cả trang terminal — quá nhiều noise, AI sẽ rối

Các loại lỗi phổ biến và cách đọc:

Lỗi bạn thấy	Nghĩa là	Thường xảy ra khi
Module not found	Không tìm thấy file/thư viện	Import sai đường dẫn hoặc chưa cài thư viện
is not defined	Biến/hàm chưa khai báo	Quên import hoặc viết sai tên
Cannot read properties of undefined	Truy cập data chưa tồn tại	API chưa trả data mà code đã đọc
Unexpected token	Sai cú pháp	Thiếu dấu }, ), hoặc ,
CORS error	API chặn truy cập từ trình duyệt	Gọi API không cho phép cross-origin

Mẹo: Lỗi trong trình duyệt Console (F12 → Console) thường chi tiết hơn lỗi trong terminal. Khi gặp lỗi, kiểm tra CẢ HAI nơi. Copy lỗi từ Console thường giúp AI hiểu vấn đề tốt hơn.

6.2 — “Vòng xoáy chết”: AI sửa càng sửa càng hỏng

NHẬN DIỆN VÒNG XOÁY:

Bạn: "Sửa lỗi này"
AI: Sửa → Phát sinh lỗi mới
Bạn: "Sửa lỗi mới"
AI: Sửa → Lỗi cũ quay lại
Bạn: "Sửa lại lỗi cũ"
AI: Sửa → Phát sinh lỗi thứ 3
...
→ Đây là DẤU HIỆU cần DỪNG LẠI

Ví dụ thực tế — Vòng xoáy với Supabase Auth:

Lượt 1:
  Bạn: "Login không hoạt động"
  AI: Sửa function login → thêm await
  Kết quả: Login được nhưng trang chủ không hiển thị user info

Lượt 2:
  Bạn: "Trang chủ không hiển thị user info"
  AI: Sửa useEffect trong Home.jsx → thêm auth listener
  Kết quả: Hiện user info nhưng login bị redirect loop

Lượt 3:
  Bạn: "Bị redirect loop khi login"
  AI: Sửa routing logic → bỏ redirect
  Kết quả: Không redirect loop nữa nhưng login lại không hoạt động

→ QUAY LẠI LƯỢT 1. Đây là vòng xoáy chết.

NGUYÊN NHÂN GỐC (mà AI không thấy): Supabase client
khởi tạo 2 lần (1 ở lib/supabase.js, 1 ở AuthContext.jsx)
→ 2 instance xung đột nhau.

6.3 — Kỹ thuật “Reset Context”

┌──────────────────────────────────────────────────────────────┐
│                     KỸ THUẬT RESET CONTEXT                    │
│                                                              │
│  Bước 1: DỪNG. Git commit (hoặc stash) trạng thái hiện tại  │
│                                                              │
│  Bước 2: Mở CHAT MỚI (conversation mới, context sạch)       │
│                                                              │
│  Bước 3: Tóm tắt lại cho AI MỚI:                            │
│     "Tôi có app [mô tả ngắn].                               │
│      Đang gặp lỗi: [mô tả lỗi cụ thể].                     │
│      File liên quan: @file1.jsx, @file2.jsx                  │
│      Đã thử sửa bằng cách [liệt kê] nhưng không được.      │
│      Hãy phân tích nguyên nhân gốc và đề xuất cách sửa      │
│      khác hoàn toàn."                                        │
│                                                              │
│  Bước 4: Nếu vẫn không được → Git revert về checkpoint tốt  │
│          và thử lại từ đó                                    │
│                                                              │
└──────────────────────────────────────────────────────────────┘

Prompt Reset Context (copy-paste-ready):

Tôi cần sự giúp đỡ với 1 bug phức tạp. Context sạch, chưa thử gì.

App: [tên app] — [mô tả 1 câu]
Tech stack: React + Vite + Tailwind + Supabase
File liên quan: @[file1], @[file2], @[file3]

Bug mô tả:
- Khi user [hành động cụ thể]
- Mong đợi: [kết quả muốn thấy]
- Thực tế: [kết quả thấy — lỗi gì, hiện gì]

Error message (nếu có):
[Paste lỗi từ terminal hoặc console]

Đã thử nhưng KHÔNG hiệu quả:
1. [Cách 1 — kết quả]
2. [Cách 2 — kết quả]
3. [Cách 3 — kết quả]

Yêu cầu:
- Phân tích nguyên nhân GỐC (root cause) — tại sao các cách trên
  không hiệu quả?
- Đề xuất cách sửa KHÁC HOÀN TOÀN với những gì đã thử
- Giải thích đơn giản, tôi không phải lập trình viên
- Chỉ sửa file liên quan, KHÔNG sửa file khác

Mẹo: Khi Reset Context, điều quan trọng nhất là liệt kê “Đã thử nhưng không hiệu quả”. Điều này giúp AI mới KHÔNG lặp lại các giải pháp cũ. Nếu không nói, AI mới sẽ đề xuất y hệt AI cũ.

6.4 — “AI kiểm AI”: Dùng AI thứ 2

Khi Cursor AI không giải được, mở trình duyệt và hỏi Claude / ChatGPT:

Tôi đang dùng Cursor AI để code app React + Supabase.
Gặp lỗi này mà AI trong Cursor sửa 3 lần không được:

[Paste lỗi + code liên quan]

Hãy phân tích nguyên nhân gốc (root cause) và đưa ra giải pháp.
Giải thích đơn giản, tôi không phải lập trình viên.

Khi nào dùng AI nào?

Tình huống	Dùng AI nào
Bug trong 1-2 file	Cursor AI (có context codebase)
Bug AI Cursor sửa 3+ lần không được	Claude.ai hoặc ChatGPT (góc nhìn mới)
Lỗi liên quan đến config/setup	Google/Stack Overflow trước, rồi AI
Lỗi Supabase RLS/Auth	Supabase docs + AI (docs thường chính xác hơn)
Không hiểu lỗi nghĩa gì	Hỏi AI bất kỳ: “Giải thích lỗi này bằng tiếng Việt”

Mẹo: Khi paste code cho AI thứ 2 (trên web), KHÔNG paste toàn bộ codebase. Chỉ paste file liên quan (2-3 file max) + lỗi cụ thể. Quá nhiều context → AI cũng rối giống bạn.

6.5 — Kỹ thuật “Git Bisect” cho người mới

Khi app “đang chạy tốt bỗng dưng hỏng” mà không biết commit nào gây ra:

Bước 1: Tìm commit cuối cùng còn hoạt động tốt
  git log --oneline -10
  → Xem 10 commit gần nhất

Bước 2: Checkout từng commit để test
  git checkout [hash-commit-cũ]
  npm run dev → Test → Có lỗi không?

Bước 3: Khi tìm được commit gây lỗi
  git diff [commit-tốt] [commit-lỗi]
  → Xem chính xác thay đổi nào gây vấn đề

Bước 4: Quay về branch hiện tại
  git checkout [tên-branch]

Bước 5: Sửa cụ thể thay đổi gây lỗi

Lỗi thường gặp

Vấn đề: “Vòng xoáy chết” — AI sửa 5+ lần mà lỗi không hết, thậm chí thêm lỗi mới. → Giải pháp: DỪNG ngay sau 3 lần sửa không thành công. Git commit hiện tại (để không mất progress). Mở chat mới, dùng prompt Reset Context ở mục 6.3. Nếu vẫn không được, git revert về checkpoint cuối cùng hoạt động tốt và thử cách tiếp cận khác.

Vấn đề: Lỗi chỉ xảy ra trên production (Vercel) nhưng localhost thì không. → Giải pháp: 90% là do biến môi trường. Kiểm tra: (1) Đã thêm biến .env vào Vercel Settings → Environment Variables chưa? (2) Tên biến có prefix đúng không? (VITE_ cho Vite, NEXT_PUBLIC_ cho Next.js). Prompt AI: “App chạy tốt trên localhost nhưng lỗi trên Vercel. Kiểm tra tất cả biến môi trường.”

Vấn đề: AI sửa đúng file nhưng sửa sai logic — feature cũ bị hỏng. → Giải pháp: Đây gọi là “regression”. Cách phòng: (1) Commit sau mỗi feature hoạt động. (2) Khi nhờ AI sửa, thêm: “Đảm bảo [feature cũ] vẫn hoạt động sau khi sửa. Test cả [feature cũ] và [feature mới].” (3) Nếu đã bị regression, git diff xem thay đổi, revert phần không cần thiết.

Vấn đề: Lỗi không có error message — app chạy nhưng data không hiển thị. → Giải pháp: Thêm console.log để “điều tra”. Prompt AI: “Data từ Supabase không hiển thị nhưng không có lỗi. Thêm console.log vào mỗi bước: (1) khi gọi API, (2) khi nhận response, (3) khi set state, (4) khi render. Tôi sẽ kiểm tra Console trong trình duyệt và báo lại.”

Bài tập thực hành

Nhiệm vụ:

Các bước thực hiện:

1. Trong đồ án, thử thêm 1 tính năng phức tạp — ví dụ: realtime sync giữa 2 user, hoặc upload ảnh, hoặc search filter (~15 phút)
2. Khi gặp lỗi (chắc chắn sẽ gặp), thực hành quy trình:
   • Copy lỗi chính xác → Paste cho AI → AI sửa (~3 phút)
   • Nếu 3 lần không được → Reset Context (~5 phút)
3. Thử “AI kiểm AI”: Copy lỗi sang Claude.ai hoặc ChatGPT, so sánh giải pháp (~5 phút)
4. Ghi lại “nhật ký debug” (~2 phút)

Tiêu chí hoàn thành:

• Đã thực hành ít nhất 1 lần Reset Context
• Đã thử hỏi ít nhất 2 AI khác nhau về cùng 1 lỗi
• Có nhật ký debug: lỗi gì → thử gì → kết quả
• Feature mới hoạt động (hoặc đã revert nếu không thành công)

Gợi ý nếu bị stuck: Nếu không gặp lỗi tự nhiên (may mắn!), hãy tạo lỗi cố ý: xóa 1 import statement, hoặc đổi tên 1 biến, hoặc tắt RLS trên Supabase. Rồi thực hành quy trình debug.

Thời gian: 30 phút Deliverable: Ghi lại “nhật ký debug”: lỗi gì → thử gì → kết quả