Hướng dẫn dùng catcherror JavaScript

Giới thiệu

Lỗi (bug) luôn là những thứ gây mất thời gian và là nguyên nhân đau đầu của nhiều ae Developer. Nguyên nhân của lỗi đến từ rất nhiều lý do như network failed, viết code sai cú pháp, giá trị truyền vào sai kiểu, không khai báo biến trước khi sử dụng, bala bala... Nhưng dù là nguyên nhân nào đi nữa thì điều quan trọng khi gặp lỗi là làm thế nào để có thể tìm ra nguyên nhân nhanh nhất

Hiểu được điều đó nên hầu hết các ngôn ngữ đều cung cấp những phương thức giúp chúng ta kiểm soát lỗi. Cái mà tôi muốn nói đến ở đây là try...catchnó giống nhau ở hầu hết các ngôn ngữ, Javascript cũng vậy. Mục tiêu của try catch là kiểm soát được những lỗi nằm ngoài tầm kiểm soát code của bạn.

Cách sử dụng vô cùng đơn giản như sau

try {
    
} catch(error) {
   
}

Bây giờ chúng ta sẽ thử trong tryblock với một vài dòng code lỗi. Khi đó, bất kỳ lỗi nào trong try block nó chạy vào catch block. Tham số error của function catch() là một object chứa đầy đủ thông tin về lỗi mà bạn đang gặp phải

ry {
    let car;
    car.value;
} catch (error) {
    console.log( 'Some error has occured\n' + error);
}


// Some error has occured
//TypeError: Cannot read property 'value' of undefined

Chúng ta cũng có thể sử dụng name và thuộc tính message của object lỗi để xem chi tiết

try {
  let car;
  car.value;
} catch (error) {
  console.log('Error name: ' + error.name);
  console.log('Error message: ' + error.message);
}

//Error name: TypeError
//Error message: Cannot read property 'value' of undefined

Throw lỗi

Trường hợp trong try block các bạn đã kiểm tra được lỗi với if else rồi nhưng vẫn muốn đẩy thông báo xuống catch để xử lý thì chúng ta có thể dùng throw() như sau

try {
   throw new Error('This is a custom error');
} catch (error) {
   console.log(error);
}

Nested try…catch block

Trong một số trường hợp, bạn muốn sử dụng try ... catch lồng nhau bạn có thể sử dụng như sau

try {
  try {
    throw new Error('some error');
  } catch (error) {
    console.log('inner catch block - ' + error);
  }
} catch (error) {
  console.log('outer catch block - ' + error);
}

Finally block

Là phần chạy cuối cùng kể có chương trình của bạn có lỗi hay không

try {
  console.log('try block executes')
} catch (error) {
  console.log('catch block - '+error);
} finally {
  console.log('finally block executes');
}

// try block executes
// finally block executes

Tổng kết

Hy vọng qua bài này các bạn hiểu rõ hơn về cách sử dụng Try Catch trong Javascript và biết ứng dụng vào công việc hàng ngày của mình.

Thanks

Exception là một sự kiện mà phá vỡ luồng chuẩn của chương trình. Nó là một đối tượng mà được ném tại Runtime. Một exception (ngoại lệ)  là một vấn đề xảy ra trong quá trình thực hiện của chương trình. Một ngoại lệ có thể xảy ra với nhiều lý do khác nhau. Vậy chúng ta cùng bắt đầu tìm hiểu cách xử lý các ngoại lệ này nhé!

Khối lệnh Try-Catch-Finally 

Giống với nhiều ngôn ngữ lập trình, phương pháp chính để xử lý các ngoại lệ trong JavaScript là try-catch. try-catch là một khối mã có thể được sử dụng để xử lý các ngoại lệ được ném ra mà không làm gián đoạn việc thực thi chương trình. Nói cách khác, bạn có thể "try" thực thi một khối mã và "catch" bất kỳ ngoại lệ nào được ném ra.

Catching all exceptions

Nói một cách đơn giản nhất, việc bắt các ngoại lệ trong JavaScript yêu cầu chỉ cần gói một biểu thức trong một câu lệnh try-catch.Nếu không có bất kỳ cấu hình bổ sung nào, phương thức này sẽ bắt bất kỳ và tất cả các trường hợp ngoại lệ được ném ra.

try {
  // ...
} catch (e) {
  // ...
}

Mặc dù điều này tương đối đơn giản về mặt xử lý lỗi, nhưng điều quan trọng cần lưu ý là ngoại lệ bị bắt luôn là việc triển JavaScript Error object, đối tượng này mang theo một số thuộc tính hữu ích như mô tả lỗi mà con người có thể đọc được. Điều này cho phép bạn ghi lại các ngoại lệ này để gỡ lỗi.

try {
  // ...
} catch (e) {
  console.log(e);
}

Catching specific exceptions

Tuy nhiên, trong hầu hết các trường hợp, bắt mọi trường hợp ngoại lệ được ném ra được coi là hành vi xấu. Việc nắm bắt và phản ứng cụ thể với các trường hợp ngoại lệ mà bạn mong đợi gặp phải sẽ dễ quản lý hơn nhiều. Để thực hiện điều này, chỉ cần kiểm tra kiểu trường hợp ngoại lệ trước khi phản ứng với nó.

try {
  // ...
} catch (e) {
   if ( e instanceof CustomExceptionError ) {
    // ...
  }
}

Mặc dù JavaScript cung cấp khả năng thêm các điều kiện trực tiếp trong định nghĩa catch, nhưng hành vi này được coi là không chuẩn, vì vậy cách đáng tin cậy hơn để triển khai các mệnh đề catch có điều kiện là sử dụng một khối có điều kiện trong catch để kiểm tra và phản ứng với trường hợp lỗi . Với suy nghĩ này, bạn có thể thấy cách một quy trình thử bắt đơn giản có thể được mở rộng thành quy trình công việc phức tạp hơn nhiều, cho phép bạn xử lý lỗi theo nhiều cách khác nhau.

try {
  // ...
} catch (e) {
 if ( e instanceof CustomExceptionError ) {
    // ...
  } else if ( e instanceof OtherExceptionError ) {
    // ...
  } else {
    // ...
  }
}

Khối Finally

Câu lệnh finally cho phép bạn thực thi mã, sau khi try và catch, bất kể kết quả như thế nào.

Cú pháp:

try {
  Block of code to try
}
catch(err) {
  Block of code to handle errors
}
finally {
  Block of code to be executed regardless of the try / catch result
}

Try-Catch trong xử lý bất đồng bộ

Chúng ta thường sử dụng async – await cho việc xử lý bất đồng bộ trong Javascript, và chúng ta còn có thể sử dụng try...catch block để catch rejected promises và xử lý rejected promises một cách uyển chuyển. Ví dụ:

(async () => {
  try {
    await new Promise((resolve, reject) => {
      reject('something wrong!')
    })
  } catch (error) {
    console.log(error);
  }
})();

Trong đoạn code trên, vì chúng ta reject promise trong try block, nên catch block bắt được lỗi trong reject promise và log ra: "something wrong!"

Hàm trên trông có vẻ giống với try...catch block bình thường, nhưng thực sự thì điều đó không đúng, vì đây là một async funcion. Một async function chỉ trả về các promises, nên chúng ta không thể return bất cứ thứ gì thay vì promises trong try...catch block. Khối catch trong async function chỉ là một cách viết tắt cho catch function, hàm mà được chuỗi cùng với then function.

Throw

Khi chương trình xảy ra lỗi, JavaScript thường sẽ dừng và tạo ra thông báo lỗi. Thuật ngữ kỹ thuật cho điều này là: JavaScript sẽ ném một ngoại lệ (ném một lỗi). Ở phần trên, bạn đã học cách xử lý ngoại lệ bằng cách sử dụng câu lệnh try…catch trong JavaScript. Câu lệnh try...catch xử lý ngoại lệ theo cách tiêu chuẩn do JavaScript cung cấp. Tuy nhiên, bạn có thể sử dụng câu lệnh throw để bỏ qua các ngoại lệ do người dùng định nghĩa.

Trong JavaScript, câu lệnh throw xử lý các ngoại lệ do người dùng định nghĩa. Về mặt kỹ thuật, bạn có thể ném một ngoại lệ (ném một lỗi). Các ngoại lệ trong JavaScript có thể là String, a Number, a Boolean or an Object.

Ví dụ:

throw "Too big";    // throw a text
throw 500;          // throw a number

Nếu bạn sử dụng throw cùng với try và catch, bạn có thể kiểm soát luồng chương trình và tạo thông báo lỗi tùy chỉnh. Cú pháp:

try {
    // khối try
    throw exception;
} 
catch (error) {
    // khối catch  
}

Ví dụ:

let number = 100;
try {
    if(number > 500) {
        console.log('OK');
    }
    else {
        // Câu lệnh throw do người dùng định nghĩa
        throw new Error('The number is low');
    }
    // Nếu throw được thực thi, đoạn code bên dưới sẽ không được thực thi
    console.log('hello');
}
catch(error) {
    console.log('Lỗi đã được bắt!'); 
    console.log('Error message: ' + error);  
}

Output:

Phương thức onError() 

Mặc dù chúng ta có thể gói mọi đoạn mã trong một khối try-catch chắc chắn sẽ giải quyết các lỗi không mong muốn, nhưng nó không bền vững và vẫn mở ứng dụng ra các vấn đề không có kế hoạch. Trình xử lý sự kiện onerror là tính năng đầu tiên hỗ trợ xử lý lỗi trong JavaScript.Sự kiện lỗi được kích hoạt trên đối tượng window bất cứ khi nào một ngoại lệ xảy ra trên trang.

window.onError = function(message, source, lineno, colno, error) {
  // ...
}

Tạm kết

Như vậy, trong bài viết này chúng ta đã cũng tìm hiểu về cách xử lý ngoại lệ trong Javascript. Nếu các bạn thấy bài viết hữu ích hãy rate 5* và share cho mọi người tham khảo!

Hãy để lại comment để mình có thể hoàn thiện bản thân hơn trong tương lai. Cám ơn các bạn!

Nguồn tham khảo:

• tutorialspoint
• w3schools