Làm cách nào để tạo thông báo lỗi trong javascript?
Định luật Murphy nói rằng bất cứ điều gì có thể sai thì cuối cùng sẽ sai. Điều này áp dụng một chút quá tốt trong thế giới lập trình. Nếu bạn tạo một ứng dụng, rất có thể bạn sẽ tạo ra lỗi và các vấn đề khác. Lỗi trong JavaScript là một trong những vấn đề phổ biến như vậy Show
Thành công của một sản phẩm phần mềm phụ thuộc vào việc người tạo ra sản phẩm đó có thể giải quyết những vấn đề này tốt như thế nào trước khi gây hại cho người dùng của họ. Và JavaScript, trong số tất cả các ngôn ngữ lập trình, nổi tiếng với thiết kế xử lý lỗi trung bình Nếu bạn đang xây dựng một ứng dụng JavaScript, có nhiều khả năng bạn sẽ gặp rắc rối với các loại dữ liệu lúc này hay lúc khác. Nếu không, thì cuối cùng bạn có thể thay thế một toán tử không xác định bằng một toán tử null hoặc ba bằng ( 1) bằng một toán tử bằng kép ( 2)Chỉ có con người mới phạm sai lầm. Đây là lý do tại sao chúng tôi sẽ chỉ cho bạn mọi thứ bạn cần biết về cách xử lý lỗi trong JavaScript Bài viết này sẽ hướng dẫn bạn các lỗi cơ bản trong JavaScript và giải thích các lỗi khác nhau mà bạn có thể gặp phải. Sau đó, bạn sẽ học cách xác định và sửa các lỗi này. Ngoài ra còn có một số mẹo để xử lý lỗi hiệu quả trong môi trường sản xuất Không chần chừ thêm nữa, chúng ta hãy bắt đầu Xem Hướng dẫn bằng video của chúng tôi để xử lý lỗi JavaScriptXem cách Kinsta chống lại đối thủ. So sánh Lỗi JavaScript là gì?Lỗi trong lập trình đề cập đến các tình huống không cho phép chương trình hoạt động bình thường. Điều này có thể xảy ra khi một chương trình không biết cách xử lý công việc hiện tại, chẳng hạn như khi cố gắng mở một tệp không tồn tại hoặc liên hệ với điểm cuối API dựa trên web trong khi không có kết nối mạng Những tình huống này đẩy chương trình đưa ra lỗi cho người dùng, nói rằng nó không biết cách tiếp tục. Chương trình thu thập càng nhiều thông tin càng tốt về lỗi và sau đó báo cáo rằng nó không thể tiếp tục Định luật Murphy nói rằng bất cứ điều gì có thể sai thì cuối cùng cũng sẽ sai 😬 Điều này áp dụng hơi quá đúng trong thế giới JavaScript 😅 Hãy chuẩn bị trước với hướng dẫn này 👇Nhấp để TweetCác lập trình viên thông minh cố gắng dự đoán và xử lý các tình huống này để người dùng không phải tìm ra thông báo lỗi kỹ thuật như “404” một cách độc lập. Thay vào đó, chúng thể hiện một thông điệp dễ hiểu hơn nhiều. “Không thể tìm thấy trang. ” Lỗi trong JavaScript là các đối tượng được hiển thị bất cứ khi nào xảy ra lỗi lập trình. Các đối tượng này chứa nhiều thông tin về loại lỗi, câu lệnh gây ra lỗi và dấu vết ngăn xếp khi xảy ra lỗi. JavaScript cũng cho phép các lập trình viên tạo các lỗi tùy chỉnh để cung cấp thêm thông tin khi gỡ lỗi Thuộc tính của một lỗiGiờ đây, định nghĩa về lỗi JavaScript đã rõ ràng, đã đến lúc đi sâu vào chi tiết Lỗi trong JavaScript mang một số thuộc tính tiêu chuẩn và tùy chỉnh giúp hiểu nguyên nhân và hậu quả của lỗi. Theo mặc định, lỗi trong JavaScript chứa ba thuộc tính
Ngoài ra, các lỗi cũng có thể mang các thuộc tính như số cột, số dòng, tên tệp, v.v. , để mô tả lỗi tốt hơn. Tuy nhiên, các thuộc tính này không chuẩn và có thể có hoặc không có trong mọi đối tượng lỗi được tạo từ ứng dụng JavaScript của bạn Hiểu dấu vết ngăn xếpDấu vết ngăn xếp là danh sách các cuộc gọi phương thức mà một chương trình đã thực hiện khi một sự kiện như ngoại lệ hoặc cảnh báo xảy ra. Đây là giao diện của một dấu vết ngăn xếp mẫu kèm theo một ngoại lệ Ví dụ về Dấu vết ngăn xếpNhư bạn có thể thấy, nó bắt đầu bằng cách in tên lỗi và thông báo, theo sau là danh sách các phương thức được gọi. Mỗi lệnh gọi phương thức nêu rõ vị trí mã nguồn của nó và dòng tại đó nó được gọi. Bạn có thể sử dụng dữ liệu này để điều hướng qua cơ sở mã của mình và xác định đoạn mã nào gây ra lỗi Danh sách các phương thức này được sắp xếp theo kiểu xếp chồng lên nhau. Nó cho thấy nơi ngoại lệ của bạn được ném lần đầu tiên và cách nó lan truyền thông qua các lệnh gọi phương thức xếp chồng lên nhau. Việc triển khai bắt ngoại lệ sẽ không cho phép nó lan truyền qua ngăn xếp và làm hỏng chương trình của bạn. Tuy nhiên, bạn có thể muốn không phát hiện ra các lỗi nghiêm trọng để làm sập chương trình trong một số tình huống cố ý. Lỗi so với ngoại lệHầu hết mọi người thường coi lỗi và ngoại lệ là cùng một thứ. Tuy nhiên, điều cần thiết là lưu ý một sự khác biệt nhỏ nhưng cơ bản giữa chúng Một ngoại lệ là một đối tượng lỗi đã được ném Để hiểu điều này tốt hơn, hãy lấy một ví dụ nhanh. Đây là cách bạn có thể xác định lỗi trong JavaScript
Và đây là cách đối tượng 3 trở thành ngoại lệ
Tuy nhiên, hầu hết mọi người có xu hướng sử dụng dạng tốc ký xác định các đối tượng lỗi trong khi ném chúng.
Đây là thông lệ tiêu chuẩn. Tuy nhiên, đó là một trong những lý do tại sao các nhà phát triển có xu hướng trộn lẫn các ngoại lệ và lỗi. Do đó, biết các nguyên tắc cơ bản là rất quan trọng mặc dù bạn sử dụng tốc ký để hoàn thành công việc của mình một cách nhanh chóng Các loại lỗi trong JavaScriptCó một loạt các loại lỗi được xác định trước trong JavaScript. Chúng được tự động chọn và xác định bởi thời gian chạy JavaScript bất cứ khi nào lập trình viên không xử lý rõ ràng các lỗi trong ứng dụng Phần này sẽ hướng dẫn bạn một số loại lỗi phổ biến nhất trong JavaScript và hiểu khi nào và tại sao chúng xảy ra phạm vi lỗiMột RangeError được đưa ra khi một biến được đặt với một giá trị nằm ngoài phạm vi giá trị pháp lý của nó. Nó thường xảy ra khi truyền một giá trị làm đối số cho hàm và giá trị đã cho không nằm trong phạm vi tham số của hàm. Đôi khi có thể khó khắc phục khi sử dụng các thư viện của bên thứ ba có tài liệu kém vì bạn cần biết phạm vi giá trị có thể có để các đối số chuyển vào đúng giá trị Một số tình huống phổ biến trong đó RangeError xảy ra là
Tham khảoLỗiReferenceError xảy ra khi có gì đó không đúng với tham chiếu của biến trong mã của bạn. Bạn có thể đã quên xác định giá trị cho biến trước khi sử dụng hoặc có thể bạn đang cố sử dụng một biến không thể truy cập trong mã của mình. Trong mọi trường hợp, việc xem qua dấu vết ngăn xếp cung cấp nhiều thông tin để tìm và sửa tham chiếu biến bị lỗi Một số lý do phổ biến khiến Lỗi Tham chiếu xảy ra là
Lỗi cú phápNhững lỗi này là một trong những lỗi đơn giản nhất để khắc phục vì chúng chỉ ra lỗi trong cú pháp của mã. Vì JavaScript là ngôn ngữ tập lệnh được diễn giải chứ không phải được biên dịch, nên những ngôn ngữ này được ném ra khi ứng dụng thực thi tập lệnh chứa lỗi. Trong trường hợp ngôn ngữ được biên dịch, các lỗi như vậy được xác định trong quá trình biên dịch. Do đó, các tệp nhị phân ứng dụng không được tạo cho đến khi chúng được sửa Một số lý do phổ biến khiến SyntaxErrors có thể xảy ra là
Đó là một cách tốt để sử dụng công cụ linting trong IDE của bạn để xác định các lỗi như vậy cho bạn trước khi chúng xuất hiện trên trình duyệt LoạiLỗiTypeError là một trong những lỗi phổ biến nhất trong ứng dụng JavaScript. Lỗi này được tạo khi một số giá trị không thuộc loại dự kiến cụ thể. Một số trường hợp phổ biến khi nó xảy ra là
Có rất nhiều khả năng xảy ra TypeError. Chúng ta sẽ xem xét một số trường hợp nổi tiếng sau và tìm hiểu cách khắc phục chúng Lỗi bên trongLoại InternalError được sử dụng khi một ngoại lệ xảy ra trong công cụ thời gian chạy JavaScript. Nó có thể hoặc không chỉ ra vấn đề với mã của bạn Thường xuyên hơn không, InternalError chỉ xảy ra trong hai trường hợp
Phương pháp phù hợp nhất để giải quyết lỗi này là xác định nguyên nhân thông qua thông báo lỗi và cơ cấu lại logic ứng dụng của bạn, nếu có thể, để loại bỏ khối lượng công việc tăng đột biến trên công cụ JavaScript Lỗi URIURIError xảy ra khi chức năng xử lý URI toàn cục như 8 được sử dụng trái phép. Nó thường chỉ ra rằng tham số được truyền cho lệnh gọi phương thức không tuân theo các tiêu chuẩn URI và do đó không được phương thức phân tích cú pháp đúng cáchChẩn đoán những lỗi này thường dễ dàng vì bạn chỉ cần kiểm tra các đối số để tìm ra dị dạng Đánh giáLỗiMột EvalError xảy ra khi xảy ra lỗi với lệnh gọi hàm 9. Hàm 9 được sử dụng để thực thi mã JavaScript được lưu trữ trong chuỗi. Tuy nhiên, vì việc sử dụng hàm 9 rất không được khuyến khích do các vấn đề bảo mật và các thông số kỹ thuật ECMAScript hiện tại không ném lớp 42 nữa, nên loại lỗi này tồn tại đơn giản là để duy trì khả năng tương thích ngược với mã JavaScript cũNếu bạn đang làm việc trên phiên bản JavaScript cũ hơn, bạn có thể gặp phải lỗi này. Trong mọi trường hợp, tốt nhất bạn nên điều tra mã được thực thi trong lệnh gọi hàm 9 để biết bất kỳ trường hợp ngoại lệ nàoTạo các loại lỗi tùy chỉnhMặc dù JavaScript cung cấp một danh sách đầy đủ các lớp loại lỗi để xử lý hầu hết các trường hợp, nhưng bạn luôn có thể tạo một loại lỗi mới nếu danh sách không đáp ứng yêu cầu của bạn. Nền tảng của sự linh hoạt này nằm ở chỗ JavaScript cho phép bạn ném bất cứ thứ gì theo nghĩa đen bằng lệnh 44Vì vậy, về mặt kỹ thuật, những tuyên bố này là hoàn toàn hợp pháp
Tuy nhiên, việc ném một kiểu dữ liệu nguyên thủy không cung cấp thông tin chi tiết về lỗi, chẳng hạn như loại, tên hoặc dấu vết ngăn xếp đi kèm. Để khắc phục điều này và chuẩn hóa quy trình xử lý lỗi, lớp 45 đã được cung cấp. Nó cũng không khuyến khích sử dụng các kiểu dữ liệu nguyên thủy trong khi đưa ra các ngoại lệBạn có thể mở rộng lớp 45 để tạo lớp lỗi tùy chỉnh của mình. Đây là một ví dụ cơ bản về cách bạn có thể làm điều này 4Và bạn có thể sử dụng nó theo cách sau 1Và sau đó bạn có thể xác định nó bằng từ khóa 47 3Top 10 lỗi phổ biến nhất trong JavaScriptBây giờ bạn đã hiểu các loại lỗi phổ biến và cách tạo các lỗi tùy chỉnh của mình, đã đến lúc xem xét một số lỗi phổ biến nhất mà bạn sẽ gặp phải khi viết mã JavaScript Xem Hướng dẫn bằng video của chúng tôi về các lỗi JavaScript phổ biến nhất1. Phạm vi chưa bắt được LỗiLỗi này xảy ra trong Google Chrome trong một vài tình huống khác nhau. Đầu tiên, nó có thể xảy ra nếu bạn gọi một hàm đệ quy và nó không kết thúc. Bạn có thể tự kiểm tra điều này trong Bảng điều khiển dành cho nhà phát triển Chrome Ví dụ về RangeError với lệnh gọi hàm đệ quyVì vậy, để giải quyết lỗi như vậy, hãy đảm bảo xác định chính xác các trường hợp đường viền của hàm đệ quy của bạn. Một lý do khác khiến lỗi này xảy ra là nếu bạn đã chuyển một giá trị nằm ngoài phạm vi tham số của hàm. Đây là một ví dụ Ví dụ về RangeError với lệnh gọi toExponential()Thông báo lỗi thường sẽ cho biết mã của bạn bị lỗi gì. Khi bạn thực hiện các thay đổi, nó sẽ được giải quyết Đầu ra cho lệnh gọi hàm toExponential()2. Lỗi loại chưa bắt được. Không thể đặt thuộc tínhLỗi này xảy ra khi bạn đặt thuộc tính trên tham chiếu không xác định. Bạn có thể tạo lại sự cố với mã này 4Đây là đầu ra mà bạn sẽ nhận được Ví dụ TypeErrorĐể khắc phục lỗi này, hãy khởi tạo tham chiếu bằng một giá trị trước khi truy cập thuộc tính của nó. Đây là giao diện của nó khi được sửa Cách sửa TypeError3. Lỗi loại chưa bắt được. Không thể đọc thuộc tínhĐây là một trong những lỗi xảy ra thường xuyên nhất trong JavaScript. Lỗi này xảy ra khi bạn cố gắng đọc một thuộc tính hoặc gọi một hàm trên một đối tượng không xác định. Bạn có thể sao chép nó rất dễ dàng bằng cách chạy mã sau trong Bảng điều khiển dành cho nhà phát triển Chrome 5Đây là đầu ra Ví dụ TypeError với chức năng không xác địnhMột đối tượng không xác định là một trong nhiều nguyên nhân có thể gây ra lỗi này. Một nguyên nhân nổi bật khác của sự cố này có thể là do khởi tạo trạng thái không đúng cách trong khi hiển thị giao diện người dùng. Đây là một ví dụ thực tế từ ứng dụng React 6Ứng dụng bắt đầu với một vùng chứa trạng thái trống và được cung cấp một số mặt hàng sau 2 giây trì hoãn. Độ trễ được đặt để bắt chước một cuộc gọi mạng. Ngay cả khi mạng của bạn siêu nhanh, bạn vẫn sẽ gặp phải độ trễ nhỏ do thành phần này sẽ hiển thị ít nhất một lần. Nếu bạn cố chạy ứng dụng này, bạn sẽ nhận được lỗi sau Dấu vết ngăn xếp TypeError trong trình duyệtĐiều này là do, tại thời điểm kết xuất, vùng chứa trạng thái không được xác định; . Sửa lỗi này rất dễ. Bạn chỉ cần cung cấp một giá trị mặc định ban đầu cho vùng chứa trạng thái 0Bây giờ, sau độ trễ đã đặt, ứng dụng của bạn sẽ hiển thị kết quả tương tự đầu ra mãCách khắc phục chính xác trong mã của bạn có thể khác, nhưng bản chất ở đây là luôn khởi tạo các biến của bạn đúng cách trước khi sử dụng chúng 4. LoạiLỗi. 'không xác định' không phải là một đối tượngLỗi này xảy ra trong Safari khi bạn cố gắng truy cập các thuộc tính hoặc gọi một phương thức trên một đối tượng không xác định. Bạn có thể chạy cùng một mã từ trên để tự tạo lại lỗi Ví dụ TypeError với chức năng không xác địnhGiải pháp cho lỗi này cũng giống như vậy — hãy đảm bảo rằng bạn đã khởi tạo các biến của mình một cách chính xác và chúng không bị bỏ xác định khi một thuộc tính hoặc phương thức được truy cập 5. LoạiLỗi. null không phải là một đối tượngĐây là, một lần nữa, tương tự như lỗi trước đó. Nó xảy ra trên Safari và sự khác biệt duy nhất giữa hai lỗi là lỗi này được ném ra khi đối tượng có thuộc tính hoặc phương thức đang được truy cập là 49 thay vì 10. Bạn có thể tạo lại điều này bằng cách chạy đoạn mã sau 1Đây là đầu ra mà bạn sẽ nhận được Ví dụ TypeError với chức năng nullVì 49 là một giá trị được đặt rõ ràng cho một biến và không được gán tự động bởi JavaScript. Lỗi này chỉ có thể xảy ra nếu bạn đang cố gắng truy cập một biến do chính bạn đặt 49. Vì vậy, bạn cần xem lại mã của mình và kiểm tra xem logic mà bạn đã viết có đúng hay không6. LoạiLỗi. Không thể đọc thuộc tính 'độ dài'Lỗi này xảy ra trong Chrome khi bạn cố đọc độ dài của đối tượng 49 hoặc 10. Nguyên nhân của sự cố này tương tự như các sự cố trước, nhưng nó xảy ra khá thường xuyên trong khi xử lý danh sách; . Đây là cách bạn có thể tái tạo vấn đềVí dụ TypeError với một đối tượng không xác địnhTuy nhiên, trong các phiên bản Chrome mới hơn, lỗi này được báo cáo là 15. Đây là cách nó trông bây giờVí dụ TypeError với một đối tượng không xác định trên các phiên bản Chrome mới hơnMột lần nữa, cách khắc phục là đảm bảo rằng đối tượng có độ dài mà bạn đang cố truy cập tồn tại và không được đặt thành 497. LoạiLỗi. 'không xác định' không phải là một chức năngLỗi này xảy ra khi bạn cố gắng gọi một phương thức không tồn tại trong tập lệnh của mình hoặc có nhưng không thể được tham chiếu trong ngữ cảnh gọi. Lỗi này thường xảy ra trong Google Chrome và bạn có thể khắc phục bằng cách kiểm tra dòng mã ném lỗi. Nếu bạn tìm thấy một lỗi đánh máy, hãy sửa nó và kiểm tra xem nó có giải quyết được vấn đề của bạn không Nếu bạn đã sử dụng từ khóa tự tham chiếu 17 trong mã của mình, lỗi này có thể phát sinh nếu 17 không được liên kết phù hợp với ngữ cảnh của bạn. Hãy xem xét đoạn mã sau 2Nếu bạn thực thi đoạn mã trên, nó sẽ báo lỗi mà chúng ta đã thảo luận. Điều này xảy ra do chức năng ẩn danh được chuyển khi trình xử lý sự kiện đang được thực thi trong ngữ cảnh của __ 19Ngược lại, hàm 30 được định nghĩa trong ngữ cảnh của 31Để giải quyết vấn đề này, bạn phải chuyển tham chiếu thích hợp tới hàm bằng cách liên kết nó với phương thức 32Đăng kí để nhận thư mớiBạn muốn biết làm thế nào chúng tôi tăng lưu lượng truy cập của mình hơn 1000%?Tham gia cùng hơn 20.000 người khác nhận bản tin hàng tuần của chúng tôi với các mẹo nội bộ về WordPress Theo dõi ngay 38. Tham khảoLỗi. sự kiện không được xác địnhLỗi này xảy ra khi bạn cố truy cập một tham chiếu không được xác định trong phạm vi gọi. Điều này thường xảy ra khi xử lý các sự kiện vì chúng thường cung cấp cho bạn một tham chiếu có tên là 33 trong hàm gọi lại. Lỗi này có thể xảy ra nếu bạn quên xác định đối số sự kiện trong tham số của hàm hoặc viết sai chính tảLỗi này có thể không xảy ra trong Internet Explorer hoặc Google Chrome (vì IE cung cấp biến sự kiện chung và Chrome tự động gắn biến sự kiện vào trình xử lý), nhưng lỗi này có thể xảy ra trong Firefox. Vì vậy, nên để mắt đến những lỗi nhỏ như vậy 9. LoạiLỗi. Gán cho biến không đổiĐây là lỗi phát sinh do bất cẩn. Nếu bạn cố gắng gán một giá trị mới cho một biến không đổi, bạn sẽ gặp kết quả như vậy Ví dụ TypeError với gán đối tượng không đổiMặc dù hiện tại có vẻ dễ sửa, nhưng hãy tưởng tượng có hàng trăm khai báo biến như vậy và một trong số chúng được định nghĩa nhầm là 34 thay vì 35. Không giống như các ngôn ngữ script khác như PHP, có rất ít sự khác biệt giữa phong cách khai báo hằng và biến trong JavaScript. Do đó, trước tiên bạn nên kiểm tra các khai báo của mình khi gặp lỗi này. Bạn cũng có thể gặp phải lỗi này nếu bạn quên rằng tham chiếu đã nói là một hằng số và sử dụng nó như một biến. Điều này cho thấy sự bất cẩn hoặc lỗ hổng trong logic ứng dụng của bạn. Đảm bảo kiểm tra điều này khi cố gắng khắc phục sự cố này10. (không xác định). Kịch bản lỗiLỗi tập lệnh xảy ra khi tập lệnh của bên thứ ba gửi lỗi tới trình duyệt của bạn. Tiếp theo là lỗi này (không xác định) vì tập lệnh của bên thứ ba thuộc về một miền khác với ứng dụng của bạn. Trình duyệt ẩn các chi tiết khác để tránh rò rỉ thông tin nhạy cảm từ tập lệnh của bên thứ ba Bạn không thể giải quyết lỗi này nếu không biết đầy đủ chi tiết. Đây là những gì bạn có thể làm để có thêm thông tin về lỗi
Khi bạn có thể truy cập thông tin chi tiết về lỗi, thì bạn có thể bắt đầu khắc phục sự cố, sự cố này có thể xảy ra với thư viện của bên thứ ba hoặc mạng Cách xác định và ngăn ngừa lỗi trong JavaScriptMặc dù các lỗi được thảo luận ở trên là phổ biến nhất và thường xuyên xảy ra trong JavaScript, nhưng bạn sẽ bắt gặp, dựa vào một vài ví dụ không bao giờ là đủ. Điều quan trọng là phải hiểu cách phát hiện và ngăn chặn bất kỳ loại lỗi nào trong ứng dụng JavaScript khi phát triển nó. Đây là cách bạn có thể xử lý lỗi trong JavaScript Ném và bắt lỗi thủ côngCách cơ bản nhất để xử lý các lỗi đã được ném theo cách thủ công hoặc do thời gian chạy là bắt chúng. Giống như hầu hết các ngôn ngữ khác, JavaScript cung cấp một bộ từ khóa để xử lý lỗi. Điều cần thiết là phải biết chuyên sâu về từng lỗi trước khi bạn bắt đầu xử lý lỗi trong ứng dụng JavaScript của mình phiTừ khóa đầu tiên và cơ bản nhất của bộ này là 44. Rõ ràng, từ khóa ném được sử dụng để ném lỗi để tạo ngoại lệ trong thời gian chạy JavaScript theo cách thủ công. Chúng tôi đã thảo luận về điều này trước đó trong phần này và đây là ý chính về ý nghĩa của từ khóa này
cố gắngTừ khóa 42 được sử dụng để chỉ ra rằng một khối mã có thể đưa ra một ngoại lệ. Cú pháp của nó là 4Điều quan trọng cần lưu ý là khối 43 phải luôn tuân theo khối 42 để xử lý lỗi hiệu quảnắm lấyTừ khóa 43 được sử dụng để tạo khối bắt. Khối mã này chịu trách nhiệm xử lý các lỗi mà khối 42 theo sau bắt được. Đây là cú pháp của nó 5Và đây là cách bạn triển khai các khối 42 và 43 cùng nhau 6Không giống như C++ hoặc Java, bạn không thể nối nhiều khối 43 vào khối 42 trong JavaScript. Điều này có nghĩa là bạn không thể làm điều này 7Thay vào đó, bạn có thể sử dụng câu lệnh 51 hoặc câu lệnh switch case bên trong khối catch đơn để xử lý tất cả các trường hợp lỗi có thể xảy ra. Nó sẽ trông như thế này 8cuối cùngTừ khóa 52 được sử dụng để xác định khối mã được chạy sau khi xử lý lỗi. Khối này được thực thi sau các khối try và catchNgoài ra, khối cuối cùng sẽ được thực thi bất kể kết quả của hai khối còn lại. Điều này có nghĩa là ngay cả khi khối catch không thể xử lý lỗi hoàn toàn hoặc một lỗi được ném vào khối catch, trình thông dịch sẽ thực thi mã trong khối cuối cùng trước khi chương trình gặp sự cố Để được coi là hợp lệ, khối try trong JavaScript cần phải được theo sau bởi khối bắt hoặc khối cuối cùng. Nếu không có bất kỳ thứ nào trong số đó, trình thông dịch sẽ đưa ra lỗi SyntaxError. Do đó, hãy đảm bảo tuân theo các khối thử của bạn với ít nhất một trong hai khối đó khi xử lý lỗi Xử lý lỗi trên toàn cầu với phương thức onerror()Phương thức 53 có sẵn cho tất cả các phần tử HTML để xử lý bất kỳ lỗi nào có thể xảy ra với chúng. Ví dụ: nếu thẻ 54 không thể tìm thấy hình ảnh có URL được chỉ định, thẻ sẽ kích hoạt phương thức onerror để cho phép người dùng xử lý lỗiThông thường, bạn sẽ cung cấp một URL hình ảnh khác trong lệnh gọi onerror để thẻ 54 quay trở lại. Đây là cách bạn có thể làm điều đó thông qua JavaScript 9Tuy nhiên, bạn có thể sử dụng tính năng này để tạo cơ chế xử lý lỗi chung cho ứng dụng của mình. Đây là cách bạn có thể làm điều đó 0Với trình xử lý sự kiện này, bạn có thể loại bỏ nhiều khối 56 nằm trong mã của mình và tập trung xử lý lỗi của ứng dụng tương tự như xử lý sự kiện. Bạn có thể đính kèm nhiều trình xử lý lỗi vào cửa sổ để duy trì Nguyên tắc Trách nhiệm Đơn lẻ từ các nguyên tắc thiết kế RẮN. Trình thông dịch sẽ duyệt qua tất cả các trình xử lý cho đến khi đến trình xử lý thích hợpVượt qua lỗi thông qua cuộc gọi lạiMặc dù các hàm tuyến tính và đơn giản cho phép việc xử lý lỗi vẫn đơn giản, nhưng các cuộc gọi lại có thể làm phức tạp thêm vấn đề Cần một giải pháp lưu trữ mang lại cho bạn lợi thế cạnh tranh? . Kiểm tra kế hoạch của chúng tôi Hãy xem xét đoạn mã sau 1Hàm trên minh họa một điều kiện không đồng bộ trong đó hàm mất một khoảng thời gian để xử lý các hoạt động và trả về kết quả sau đó với sự trợ giúp của hàm gọi lại Nếu bạn cố gắng nhập một chuỗi thay vì 4 trong lệnh gọi hàm, kết quả là bạn sẽ nhận được 57Điều này cần phải được xử lý đúng cách. Đây là cách 2Điều này sẽ giải quyết vấn đề lý tưởng. Tuy nhiên, nếu bạn thử chuyển một chuỗi vào lệnh gọi hàm, bạn sẽ nhận được thông báo này Ví dụ lỗi với đối số saiMặc dù bạn đã triển khai khối try-catch trong khi gọi hàm, nhưng nó vẫn báo lỗi chưa được phát hiện. Lỗi được đưa ra sau khi khối bắt đã được thực thi do độ trễ hết thời gian chờ Điều này có thể xảy ra nhanh chóng trong các cuộc gọi mạng, nơi có sự chậm trễ không mong muốn xảy ra. Bạn cần đề cập đến những trường hợp như vậy trong khi phát triển ứng dụng của mình Đây là cách bạn có thể xử lý lỗi đúng cách trong cuộc gọi lại 3Bây giờ, đầu ra tại bàn điều khiển sẽ là Ví dụ TypeError với đối số không hợp lệĐiều này chỉ ra rằng lỗi đã được xử lý thích hợp Xử lý lỗi trong lời hứaHầu hết mọi người có xu hướng thích lời hứa để xử lý các hoạt động không đồng bộ. Lời hứa có một lợi thế khác - lời hứa bị từ chối không chấm dứt tập lệnh của bạn. Tuy nhiên, bạn vẫn cần triển khai khối bắt để xử lý lỗi trong lời hứa. Để hiểu rõ hơn về điều này, hãy viết lại hàm 58 bằng Promises 4Thời gian chờ từ mã trước đó đã được tách riêng thành hàm 59 để hiểu. Nếu bạn cố gắng nhập một chuỗi thay vì 4, đầu ra mà bạn nhận được sẽ tương tự như thế nàyTypeError ví dụ với một đối số không hợp lệ trong PromiseMột lần nữa, điều này là do 60 ném lỗi sau khi mọi thứ khác đã hoàn thành thực thi. Giải pháp cho vấn đề này rất đơn giản. Chỉ cần thêm một cuộc gọi 61 vào chuỗi lời hứa như thế này 5Bây giờ đầu ra sẽ là Ví dụ TypeError được xử lý với đối số không hợp lệBạn có thể quan sát việc xử lý lỗi bằng lời hứa dễ dàng như thế nào. Ngoài ra, bạn có thể xâu chuỗi khối 62 và lời hứa gọi thêm mã sẽ chạy sau khi xử lý lỗi hoàn tấtNgoài ra, bạn cũng có thể xử lý lỗi trong lời hứa bằng kỹ thuật try-catch-Last truyền thống. Đây là cách cuộc gọi lời hứa của bạn sẽ như thế nào trong trường hợp đó 6Tuy nhiên, điều này chỉ hoạt động bên trong một chức năng không đồng bộ. Do đó, cách ưa thích nhất để xử lý lỗi trong lời hứa là xâu chuỗi 43 và 52 vào cuộc gọi lời hứaném/bắt so với onerror() so với Gọi lại so với Lời hứa. Cái nào tốt nhất?Với bốn phương pháp tùy ý sử dụng, bạn phải biết cách chọn phương pháp phù hợp nhất trong mọi trường hợp sử dụng nhất định. Đây là cách bạn có thể tự quyết định ném/bắtBạn sẽ sử dụng phương pháp này hầu hết thời gian. Đảm bảo triển khai các điều kiện cho tất cả các lỗi có thể xảy ra bên trong khối bắt của bạn và nhớ bao gồm khối cuối cùng nếu bạn cần chạy một số quy trình dọn dẹp bộ nhớ sau khối thử Tuy nhiên, quá nhiều khối try/catch có thể khiến mã của bạn khó bảo trì. Nếu bạn thấy mình trong tình huống như vậy, bạn có thể muốn xử lý lỗi thông qua trình xử lý toàn cầu hoặc phương thức lời hứa Khi quyết định giữa các khối try/catch không đồng bộ và 61 của lời hứa, bạn nên sử dụng các khối try/catch không đồng bộ vì chúng sẽ làm cho mã của bạn tuyến tính và dễ gỡ lỗionerror()Tốt nhất là sử dụng phương pháp 53 khi bạn biết rằng ứng dụng của mình phải xử lý nhiều lỗi và chúng có thể nằm rải rác khắp cơ sở mã. Phương pháp 67 cho phép bạn xử lý các lỗi như thể chúng chỉ là một sự kiện khác do ứng dụng của bạn xử lý. Bạn có thể xác định nhiều trình xử lý lỗi và đính kèm chúng vào cửa sổ ứng dụng của bạn trên kết xuất ban đầuTuy nhiên, bạn cũng phải nhớ rằng phương pháp 53 có thể là một thách thức không cần thiết khi thiết lập trong các dự án nhỏ hơn với phạm vi lỗi ít hơn. Nếu bạn chắc chắn rằng ứng dụng của mình sẽ không ném quá nhiều lỗi, thì phương pháp ném/bắt truyền thống sẽ phù hợp nhất với bạnGọi lại và hứa hẹnXử lý lỗi trong các cuộc gọi lại và lời hứa khác nhau do cấu trúc và thiết kế mã của chúng. Tuy nhiên, nếu bạn chọn giữa hai điều này trước khi viết mã, thì tốt nhất bạn nên thực hiện theo lời hứa Điều này là do các lời hứa có cấu trúc sẵn có để xâu chuỗi khối 61 và khối 62 để dễ dàng xử lý lỗi. Phương pháp này dễ dàng và rõ ràng hơn so với việc xác định các đối số bổ sung/sử dụng lại các đối số hiện có để xử lý lỗiTheo dõi các thay đổi với kho lưu trữ GitNhiều lỗi thường phát sinh do lỗi thủ công trong codebase. Trong khi phát triển hoặc gỡ lỗi mã của bạn, cuối cùng bạn có thể thực hiện các thay đổi không cần thiết có thể gây ra các lỗi mới xuất hiện trong cơ sở mã của bạn. Kiểm thử tự động là một cách tuyệt vời để kiểm tra mã của bạn sau mỗi thay đổi. Tuy nhiên, nó chỉ có thể cho bạn biết nếu có gì đó không ổn. Nếu bạn không thường xuyên sao lưu mã của mình, thì cuối cùng bạn sẽ lãng phí thời gian để cố gắng sửa một hàm hoặc một tập lệnh đã hoạt động tốt trước đó. Đây là nơi git đóng vai trò của nó. Với chiến lược cam kết phù hợp, bạn có thể sử dụng lịch sử git của mình làm hệ thống sao lưu để xem mã của mình khi nó phát triển qua quá trình phát triển. Bạn có thể dễ dàng duyệt qua các cam kết cũ hơn của mình và tìm ra phiên bản của chức năng hoạt động tốt trước đó nhưng lại gây ra lỗi sau một thay đổi không liên quan Sau đó, bạn có thể khôi phục mã cũ hoặc so sánh hai phiên bản để xác định điều gì đã xảy ra. Các công cụ phát triển web hiện đại như GitHub Desktop hoặc GitKraken giúp bạn trực quan hóa những thay đổi này song song và nhanh chóng tìm ra lỗi Một thói quen có thể giúp bạn mắc ít lỗi hơn là chạy xem xét mã bất cứ khi nào bạn thực hiện một thay đổi quan trọng đối với mã của mình. Nếu bạn đang làm việc theo nhóm, bạn có thể tạo yêu cầu kéo và yêu cầu một thành viên trong nhóm xem xét kỹ lưỡng yêu cầu đó. Điều này sẽ giúp bạn sử dụng một cặp mắt thứ hai để phát hiện ra bất kỳ lỗi nào mà bạn có thể mắc phải. Thực tiễn tốt nhất để xử lý lỗi trong JavaScriptCác phương pháp được đề cập ở trên là đủ để giúp bạn thiết kế một phương pháp xử lý lỗi mạnh mẽ cho ứng dụng JavaScript tiếp theo của mình. Tuy nhiên, tốt nhất bạn nên ghi nhớ một số điều trong khi triển khai chúng để tận dụng tốt nhất khả năng chống lỗi của bạn. Dưới đây là một số lời khuyên để giúp bạn 1. Sử dụng lỗi tùy chỉnh khi xử lý ngoại lệ hoạt độngChúng tôi đã sớm giới thiệu các lỗi tùy chỉnh trong hướng dẫn này để cung cấp cho bạn ý tưởng về cách tùy chỉnh việc xử lý lỗi đối với trường hợp riêng của ứng dụng của bạn. Bạn nên sử dụng các lỗi tùy chỉnh bất cứ khi nào có thể thay vì lớp chung chung 45 vì nó cung cấp nhiều thông tin theo ngữ cảnh hơn cho môi trường gọi về lỗiNgoài ra, lỗi tùy chỉnh cho phép bạn kiểm duyệt cách hiển thị lỗi đối với môi trường cuộc gọi. Điều này có nghĩa là bạn có thể chọn ẩn các chi tiết cụ thể hoặc hiển thị thông tin bổ sung về lỗi bất cứ khi nào bạn muốn. Bạn có thể đi xa hơn để định dạng nội dung lỗi theo nhu cầu của mình. Điều này cho phép bạn kiểm soát tốt hơn cách diễn giải và xử lý lỗi 2. Không nuốt bất kỳ ngoại lệ nàoNgay cả những nhà phát triển lâu năm nhất cũng thường mắc một sai lầm sơ đẳng - sử dụng các cấp độ ngoại lệ nằm sâu trong mã của họ Bạn có thể gặp các tình huống trong đó bạn có một đoạn mã không bắt buộc phải chạy. Nếu nó hoạt động, thật tuyệt; Trong những trường hợp này, bạn thường muốn đặt mã này vào một khối thử và đính kèm một khối bắt trống vào đó. Tuy nhiên, bằng cách này, bạn sẽ để đoạn mã đó có thể gây ra bất kỳ loại lỗi nào và bỏ qua nó. Điều này có thể trở nên nguy hiểm nếu bạn có một cơ sở mã lớn và nhiều trường hợp cấu trúc quản lý lỗi kém như vậy Cách tốt nhất để xử lý các trường hợp ngoại lệ là xác định mức độ mà tất cả chúng sẽ được xử lý và tăng chúng cho đến khi đạt đến mức đó. Cấp độ này có thể là bộ điều khiển (trong ứng dụng kiến trúc MVC) hoặc phần mềm trung gian (trong ứng dụng hướng máy chủ truyền thống) Bằng cách này, bạn sẽ biết nơi bạn có thể tìm thấy tất cả các lỗi xảy ra trong ứng dụng của mình và chọn cách giải quyết chúng, ngay cả khi điều đó có nghĩa là không làm gì với chúng 3. Sử dụng Chiến lược Tập trung cho Nhật ký và Cảnh báo LỗiGhi nhật ký lỗi thường là một phần không thể thiếu trong việc xử lý lỗi. Những người không phát triển chiến lược tập trung để ghi lại lỗi có thể bỏ lỡ thông tin có giá trị về việc sử dụng ứng dụng của họ Nhật ký sự kiện của ứng dụng có thể giúp bạn tìm ra dữ liệu quan trọng về lỗi và giúp gỡ lỗi chúng một cách nhanh chóng. Nếu bạn thiết lập các cơ chế cảnh báo phù hợp trong ứng dụng của mình, thì bạn có thể biết khi nào xảy ra lỗi trong ứng dụng của mình trước khi nó đến với một bộ phận lớn trong cơ sở người dùng của bạn Bạn nên sử dụng trình ghi nhật ký được tạo sẵn hoặc tạo một trình ghi nhật ký phù hợp với nhu cầu của bạn. Bạn có thể định cấu hình trình ghi nhật ký này để xử lý lỗi dựa trên cấp độ của chúng (cảnh báo, gỡ lỗi, thông tin, v.v. ) và một số trình ghi nhật ký thậm chí còn đi xa đến mức gửi nhật ký đến máy chủ ghi nhật ký từ xa ngay lập tức. Bằng cách này, bạn có thể xem logic của ứng dụng của bạn hoạt động như thế nào với người dùng đang hoạt động 4. Thông báo cho người dùng về lỗi một cách thích hợpMột điểm tốt khác cần ghi nhớ trong khi xác định chiến lược xử lý lỗi của bạn là luôn ghi nhớ người dùng Tất cả các lỗi cản trở hoạt động bình thường của ứng dụng của bạn phải đưa ra cảnh báo hiển thị cho người dùng để thông báo cho họ rằng đã xảy ra sự cố để người dùng có thể cố gắng tìm ra giải pháp. Nếu bạn biết cách khắc phục lỗi nhanh chóng, chẳng hạn như thử lại một thao tác hoặc đăng xuất rồi đăng nhập lại, hãy đảm bảo đề cập đến lỗi đó trong cảnh báo để giúp khắc phục trải nghiệm người dùng trong thời gian thực Trong trường hợp lỗi không gây ra bất kỳ sự can thiệp nào đến trải nghiệm người dùng hàng ngày, bạn có thể xem xét tắt cảnh báo và ghi lỗi vào máy chủ từ xa để giải quyết sau 5. Triển khai Middleware (Node. js)Nút. môi trường js hỗ trợ phần mềm trung gian để thêm các chức năng cho ứng dụng máy chủ. Bạn có thể sử dụng tính năng này để tạo phần mềm trung gian xử lý lỗi cho máy chủ của mình Lợi ích đáng kể nhất của việc sử dụng phần mềm trung gian là tất cả các lỗi của bạn được xử lý tập trung ở một nơi. Bạn có thể chọn bật/tắt thiết lập này cho mục đích thử nghiệm một cách dễ dàng Đây là cách bạn có thể tạo một phần mềm trung gian cơ bản 7Sau đó, bạn có thể sử dụng phần mềm trung gian này trong ứng dụng của mình như thế này 8Giờ đây, bạn có thể xác định logic tùy chỉnh bên trong phần mềm trung gian để xử lý lỗi một cách thích hợp. Bạn không cần phải lo lắng về việc triển khai các cấu trúc xử lý lỗi riêng lẻ trong toàn bộ cơ sở mã của mình nữa 6. Khởi động lại ứng dụng của bạn để xử lý lỗi lập trình viên (Node. js)Khi nút. js gặp phải lỗi lập trình viên, chúng có thể không nhất thiết phải ném ngoại lệ và cố gắng đóng ứng dụng. Những lỗi như vậy có thể bao gồm các sự cố phát sinh do lỗi của lập trình viên, như mức tiêu thụ CPU cao, đầy bộ nhớ hoặc rò rỉ bộ nhớ. Cách tốt nhất để xử lý những điều này là khởi động lại ứng dụng một cách duyên dáng bằng cách đánh sập nó thông qua Nút. js hoặc một công cụ độc đáo như PM2. Điều này có thể đảm bảo rằng ứng dụng không gặp sự cố khi người dùng thao tác, mang lại trải nghiệm người dùng tồi tệ 7. Bắt tất cả các ngoại lệ chưa được bắt (Nút. js)Bạn không bao giờ có thể chắc chắn rằng mình đã khắc phục mọi lỗi có thể xảy ra trong ứng dụng của mình. Do đó, điều cần thiết là triển khai chiến lược dự phòng để nắm bắt tất cả các ngoại lệ chưa được phát hiện từ ứng dụng của bạn Đây là cách bạn có thể làm điều đó 9Bạn cũng có thể xác định xem lỗi xảy ra là ngoại lệ tiêu chuẩn hay lỗi vận hành tùy chỉnh. Dựa trên kết quả, bạn có thể thoát khỏi quy trình và khởi động lại để tránh hành vi không mong muốn 8. Nắm bắt tất cả các từ chối lời hứa chưa được xử lý (Node. js)Tương tự như việc bạn không bao giờ có thể bao gồm tất cả các trường hợp ngoại lệ có thể xảy ra, có khả năng cao là bạn có thể bỏ lỡ việc xử lý tất cả các lời từ chối lời hứa có thể xảy ra. Tuy nhiên, không giống như các trường hợp ngoại lệ, từ chối lời hứa không gây ra lỗi Vì vậy, một lời hứa quan trọng bị từ chối có thể bị bỏ qua như một lời cảnh báo và khiến ứng dụng của bạn có khả năng gặp phải hành vi không mong muốn. Do đó, điều quan trọng là phải triển khai cơ chế dự phòng để xử lý việc từ chối lời hứa Đây là cách bạn có thể làm điều đó 0 Nếu bạn tạo một ứng dụng, có khả năng bạn cũng sẽ tạo ra lỗi và các vấn đề khác trong đó. 😅 Tìm hiểu cách xử lý chúng với sự trợ giúp từ hướng dẫn này ⬇️Nhấp để TweetTóm lượcGiống như bất kỳ ngôn ngữ lập trình nào khác, lỗi xảy ra khá thường xuyên và tự nhiên trong JavaScript. Trong một số trường hợp, bạn thậm chí có thể cần cố ý đưa ra lỗi để chỉ ra phản hồi chính xác cho người dùng của mình. Do đó, hiểu được giải phẫu và các loại của họ là rất quan trọng Hơn nữa, bạn cần được trang bị các công cụ và kỹ thuật phù hợp để xác định và ngăn chặn các lỗi gỡ ứng dụng của bạn xuống Trong hầu hết các trường hợp, một chiến lược vững chắc để xử lý lỗi với việc thực thi cẩn thận là đủ cho tất cả các loại ứng dụng JavaScript Có bất kỳ lỗi JavaScript nào khác mà bạn vẫn chưa thể giải quyết không? Nhận tất cả các ứng dụng, cơ sở dữ liệu và trang web WordPress của bạn trực tuyến và dưới một mái nhà. Nền tảng đám mây hiệu suất cao, đầy đủ tính năng của chúng tôi bao gồm
Hãy tự kiểm tra với $20 trong tháng đầu tiên của Lưu trữ ứng dụng hoặc Lưu trữ cơ sở dữ liệu. Khám phá kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm thấy sự phù hợp nhất của bạn Làm cách nào để viết thông báo lỗi trong JavaScript?Chúng tôi có thể hiển thị lỗi bằng hai phương pháp mà không cần sử dụng hộp cảnh báo. cú pháp. nút. textContent = "Một số thông báo lỗi" // Để thu hút sự chú ý của nút.
Làm cách nào để tạo lỗi tùy chỉnh trong JavaScript?Lỗi tùy chỉnh có thể được tạo theo hai cách, đó là. Trình tạo lớp mở rộng lớp lỗi. . tin nhắn. Thông báo lỗi tên tập tin. Tệp xảy ra lỗi vải lanh. số dòng lỗi Làm cách nào để in lỗi trong JavaScript?Bạn có thể sử dụng đối tượng bảng điều khiển để xuất thông báo tới bảng điều khiển lỗi . // Nhấn F12 trên bàn phím để xem tin nhắn trong giao diện điều khiển. let message = ["Đây là tin nhắn cảnh báo"
Làm cách nào để viết nhật ký lỗi trong JavaScript?Cấp nhật ký . log() Mục đích của giao diện điều khiển. log() là đầu ra chung của thông tin ghi nhật ký bảng điều khiển error(). error(), như tên của nó, xuất ra một thông báo lỗi. . cảnh báo () Như với bảng điều khiển. lỗi (), bảng điều khiển. . thông tin () Nếu bảng điều khiển. info() có vẻ giống như bảng điều khiển. log(), đó là bởi vì nó là |