Xử lý lỗi & debug

Viết code là sẽ gặp lỗi; kỹ năng nền là đọc hiểu thông điệp lỗi. Lỗi bị ném ra khi chương trình đang chạy gọi là exception (ngoại lệ). Ba loại gặp nhiều nhất: SyntaxError - viết sai cú pháp, JS không chạy nổi dòng nào của file; ReferenceError - gọi một cái tên chưa khai báo; và TypeError - giá trị có thật nhưng thao tác sai kiểu.

Khi chương trình sập, Node (hay trình duyệt) in một khối thông điệp. Đọc từ trên xuống: dòng đầu nói lỗi gì; các dòng at ... là stack trace - vết của call stack, cho biết lỗi xảy ra trong hàm nào và hàm đó được ai gọi:

function layDiemToan(hocSinh) {
  return hocSinh.diem.toan;   // hocSinh.diem la undefined!
}
function inBangDiem() {
  const mun = { ten: "Mun" }; // quen khai bao truong diem
  console.log(layDiemToan(mun));
}
inBangDiem();

/tmp/meo/diem.js:2
  return hocSinh.diem.toan;   // hocSinh.diem la undefined!
                      ^

TypeError: Cannot read properties of undefined (reading 'toan')
    at layDiemToan (/tmp/meo/diem.js:2:23)
    at inBangDiem (/tmp/meo/diem.js:6:15)
    ...

• ▸Dòng đầu: loại lỗi + thông điệp. “Cannot read properties of undefined (reading toan)” = vừa chấm .toan vào một thứ đang là undefined.
• ▸Các dòng at là stack trace: trên cùng là nơi lỗi xảy ra (file:dòng:cột), đi xuống là chuỗi hàm gọi.
• ▸SyntaxError chặn cả file từ đầu; ReferenceError và TypeError xảy ra lúc chạy, tại đúng dòng được in.

Lỗi trong JavaScript là một giá trị: object tạo bằng new Error("...") với .name, .message, .stack (stack trace, ghi lúc tạo). Vì Error là một class - như bài “Class & prototype” - bạn extends được nó để đặt tên cho lỗi của riêng mình:

const loi = new Error("Khong doc duoc file ca.txt");
console.log(loi.message);      // Khong doc duoc file ca.txt
console.log(typeof loi.stack); // string - stack trace nam trong day
class LoiDuLieu extends Error {
  constructor(message) {
    super(message);
    this.name = "LoiDuLieu";   // ten rieng cho loai loi
  }
}
const loiHoSo = new LoiDuLieu("Ho so thieu truong 'ten'");
console.log(loiHoSo instanceof Error); // true - van la Error

Muốn tự báo lỗi, dùng throw: lỗi bị ném lan ngược call stack tới khi gặp người bắt; không ai bắt thì chương trình dừng và in stack trace - y như Bước 1:

function napCa(soCa) {
  if (soCa < 0) {
    throw new Error("soCa phai >= 0, nhan duoc: " + soCa);
  }
  return "Da nap " + soCa + " con ca";
}
console.log(napCa(3));
console.log(napCa(-1)); // nem loi -> chuong trinh dung tai day

Da nap 3 con ca
Error: soCa phai >= 0, nhan duoc: -1
    at napCa (/tmp/meo/napca.js:3:11)
    ...

Có những chỗ bạn biết trước là dễ hỏng - dữ liệu từ ngoài vào. Ví dụ kinh điển là JSON.parse bạn đã dùng ở bài “Mảng & object”: chuỗi JSON sai một dấu là ném SyntaxError. Bọc đoạn dễ hỏng trong try; lỗi rơi xuống catch; còn finally chạy mọi trường hợp - kể cả khi đã return:

function docCauHinh(chuoi) {
  try {
    const cauHinh = JSON.parse(chuoi); // co the nem SyntaxError
    console.log("Doc OK, ten =", cauHinh.ten);
    return cauHinh;
  } catch (e) {
    console.log("JSON hong:", e.message);
    return null;                       // gia tri du phong an toan
  } finally {
    console.log("finally: luon chay"); // don dep o day
  }
}
docCauHinh('{"ten": "Mun"}');
docCauHinh("{ten: Mun}"); // du lieu xau

Doc OK, ten = Mun
finally: luon chay
JSON hong: Expected property name or '}' in JSON at position 1 (line 1 column 2)
finally: luon chay

try/catch có một giới hạn quan trọng: nó chỉ bắt được lỗi đồng bộ - ném ra trong lúc khối try đang chạy. Còn callback của setTimeout chạy sau, khi khối try đã thoát từ lâu:

try {
  setTimeout(() => {
    throw new Error("Loi trong callback"); // nem SAU ~100ms
  }, 100);
} catch (e) {
  console.log("Bat duoc:", e.message);     // KHONG bao gio chay
}
console.log("Dong nay in truoc - try/catch da thoat tu lau");

Dong nay in truoc - try/catch da thoat tu lau
Error: Loi trong callback
    at Timeout._onTimeout (/tmp/meo/hen.js:3:11)
    at listOnTimeout (node:internal/timers:585:17)
    at process.processTimers (node:internal/timers:521:7)

Để ý stack trace: bên gọi callback là Timeout._onTimeout - bộ hẹn giờ của Node, không phải khối try của bạn. Lỗi bất đồng bộ cần công cụ riêng: Promise có .catch, còn async/await đưa try/catch quay lại đúng nghĩa - nội dung chính của bài “Bất đồng bộ” ngay sau bài này. Hôm nay chỉ cần nhớ ranh giới: try/catch bắt lỗi đồng bộ.

Không phải bug nào cũng ném lỗi - nhiều khi chương trình chạy êm mà kết quả sai. Lúc đó cần debug: tìm xem sai từ đâu. Đồ nghề đầu tiên là console: ngoài log còn console.error (in ra kênh lỗi, DevTools tô đỏ), console.table (in mảng object thành bảng), và cặp console.time("nhan") … console.timeEnd("nhan") bấm giờ đoạn code nằm giữa:

const lopMeo = [
  { ten: "Mun", mon: "JS", diem: 8 },
  { ten: "Xam", mon: "HTML", diem: 9 }
];
console.table(lopMeo); // de soi du lieu hon log thuong

┌─────────┬───────┬────────┬──────┐
│ (index) │ ten   │ mon    │ diem │
├─────────┼───────┼────────┼──────┤
│ 0       │ 'Mun' │ 'JS'   │ 8    │
│ 1       │ 'Xam' │ 'HTML' │ 9    │
└─────────┴───────┴────────┴──────┘

Log giúp thu hẹp phạm vi: in giá trị ở điểm giữa đoạn nghi ngờ, nửa nào sai thì khoanh tiếp nửa đó - vài lần là tới đúng dòng gây bug. Khi log không đủ, mở DevTools của trình duyệt (phím F12, tab Sources) đặt breakpoint vào một dòng, hoặc viết thẳng debugger; vào code: chương trình dừng tại đó, bạn xem được giá trị mọi biến rồi chạy tiếp từng bước. Lưu ý: debugger chỉ có tác dụng khi DevTools đang mở - node chạy bình thường sẽ bỏ qua nó.

Cuối cùng là phòng thủ: fail fast - kiểm tra input ngay đầu hàm, thấy sai thì throw ngay. Hàm napCa ở Bước 2 làm đúng kiểu này: lỗi hiện sớm, gần nguyên nhân, thay vì để giá trị sai chui qua nhiều hàm rồi gây TypeError ở một nơi khó lần lại.