Troubleshooting

Khắc phục sự cố

"Tại sao nó không hoạt động?" — Các nguyên nhân và cách khắc phục phổ biến được tập hợp tại một nơi. Hãy bắt đầu từ đây.

Mở danh mục

# Network

Lỗi CORS — không thể gọi API

Nguyên nhân:
Cơ chế bảo mật của trình duyệt. Các cuộc gọi API khác origin sẽ bị chặn trừ khi server trả về header Access-Control-Allow-Origin.
Cách xử lý:
Thiết lập CORS phía server. Nếu bạn tự viết API, thêm header vào phản hồi. Nếu dùng API bên ngoài, hãy tạo một proxy trên backend của mình.

Lỗi phản hồi 401 Unauthorized

Nguyên nhân:
Thiếu token hoặc token không hợp lệ. Token hết hạn hoặc sai định dạng header Authorization.
Cách xử lý:
Dùng công cụ giải mã JWT để kiểm tra thời hạn (exp). Xác nhận header đã đặt là Authorization: Bearer <token>.

Lỗi phản hồi 500 Internal Server Error

Nguyên nhân:
Đã xảy ra lỗi phía server. Có khả năng request từ frontend đã khiến server gặp lỗi.
Cách xử lý:
Kiểm tra log phía server. Xác nhận định dạng body và parameter của request là chính xác.

Lỗi khi chèn ký tự đặc biệt/tiếng Việt vào URL

Nguyên nhân:
Các ký tự đặc biệt khiến URL bị sai định dạng. Các ký tự không phải ASCII (như tiếng Việt) cần được mã hóa.
Cách xử lý:
Dùng hàm encodeURIComponent để mã hóa giá trị parameter. Kiểm tra lại bằng công cụ mã hóa URL.

# Programming

Kết quả fetch bị undefined

Nguyên nhân:
Quên dùng await hoặc dùng await ngoài hàm async. fetch trả về một Promise; nếu không dùng await thì dữ liệu chưa kịp tới.
Cách xử lý:
Sử dụng await bên trong hàm async. Kiểm tra ngay sau lệnh fetch bằng console.log. Xem tab Network để xác nhận phản hồi.

Lỗi 'Unexpected token' khi parse JSON

Nguyên nhân:
Định dạng JSON không hợp lệ. Dư dấu phẩy ở cuối, dùng nháy đơn, có chú thích hoặc xuống dòng không được escape.
Cách xử lý:
Sử dụng công cụ định dạng JSON để kiểm tra cú pháp. Tìm vị trí lỗi và sửa. Các key bắt buộc phải dùng nháy kép.

Sự kiện (Event) không hoạt động

Nguyên nhân:
Phần tử chưa tồn tại (script trong <head> chạy trước khi có DOM), chưa gắn addEventListener hoặc sai tên sự kiện.
Cách xử lý:
Đặt script ở cuối thẻ <body> hoặc đợi sự kiện DOMContentLoaded. Kiểm tra xem querySelector có trả về null không.

# Environment

Lỗi thiết lập — 'command not found'

Nguyên nhân:
Chưa cài đặt Node.js, chưa thiết lập PATH hoặc đang chạy ở sai thư mục.
Cách xử lý:
Chạy node -v để kiểm tra đã cài Node chưa. Nếu chưa, hãy cài Node.js. Dùng lệnh cd để vào đúng thư mục dự án. Tìm kiếm nội dung lỗi trên Google.

Giá trị trong .env không được tải

Nguyên nhân:
Tên file không phải là .env, định dạng KEY=value bị sai, hoặc ứng dụng chưa được cấu hình để đọc file .env.
Cách xử lý:
Kiểm tra định dạng file .env. Xem có khoảng trắng thừa hay ngoặc kép không khớp không. Tham khảo file .env.example.

# Frontend

CSS không có tác dụng

Nguyên nhân:
Bị ghi đè bởi độ ưu tiên (specificity) thấp hơn, sai chính tả selector, sai đường dẫn file link hoặc do cache.
Cách xử lý:
Dùng DevTools Elements chọn phần tử và kiểm tra rules nào đang áp dụng. Các rules bị gạch ngang là đã bị ghi đè. Kiểm tra lại đường dẫn file (VD: ./style.css).

Hình ảnh không hiển thị

Nguyên nhân:
Sai đường dẫn, lỗi CORS, định dạng file không được hỗ trợ hoặc chỉ viết alt mà quên src.
Cách xử lý:
Kiểm tra lỗi 404 trong tab Network của DevTools. Kiểm tra lại đường dẫn tương đối và tuyệt đối. Xác nhận thuộc tính src của thẻ img chính xác.

# Git

Xung đột khi merge (Git conflict)

Nguyên nhân:
Cùng một file bị thay đổi ở các branch khác nhau và xảy ra xung đột khi gộp lại.
Cách xử lý:
Phần nằm giữa <<<<<<< và ======= là thay đổi của bạn; phần giữa ======= và >>>>>>> là của người khác. Giữ lại phần cần thiết, xóa các ký tự đánh dấu, sau đó git add và commit.