Phát hiện lỗi javascript

Xem mã gây ra lỗi, ngay cả khi mã của bạn được rút gọn. Nếu bạn đang sử dụng bản đồ nguồn, chúng tôi sẽ hiển thị cho bạn đường chính xác gây ra sự cố

breadcrumb được thu thập tự động

Tái tạo một cách hiệu quả các lỗi dẫn đến từng lỗi, như số lần nhấp, nhật ký bảng điều khiển và lỗi, tải trang, v.v.

Đị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

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 (

throw 8
throw "An error occurred"

1) bằng một toán tử bằng kép (

throw 8
throw "An error occurred"

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 JavaScript

Kinsta chiều chuộng tôi đến mức bây giờ tôi yêu cầu mức độ dịch vụ đó từ mọi nhà cung cấp. Chúng tôi cũng cố gắng đạt được mức đó với sự hỗ trợ của công cụ SaaS

Suganthan Mohanadasan từ @Suganthanmn

Xem kế hoạch

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ố 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 để Tweet

Cá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ỗi

Giờ đâ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

1. thông điệp. Một giá trị chuỗi mang thông báo lỗi
2. Tên. Loại lỗi đã xảy ra (Chúng ta sẽ đi sâu vào vấn đề này trong phần tiếp theo)
3. cây rơm. Dấu vết ngăn xếp của mã được thực thi khi xảy ra lỗi

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ếp

Dấ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ếp

Như 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

const wrongTypeError = TypeError("Wrong type found, expected character")

Và đây là cách đối tượng

throw 8
throw "An error occurred"

3 trở thành ngoại lệ

throw wrongTypeError

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.

throw TypeError("Wrong type found, expected character")

Đâ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 JavaScript

Có 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ỗi

Mộ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à

• Cố gắng tạo một mảng có độ dài không hợp lệ thông qua hàm tạo Array
• Truyền các giá trị xấu cho các phương thức số như

  throw 8
  throw "An error occurred"

  4,

  throw 8
  throw "An error occurred"

  5,

  throw 8
  throw "An error occurred"

  6, v.v.
• Truyền các giá trị không hợp lệ cho các hàm chuỗi như

  throw 8
  throw "An error occurred"

  7

Tham khảoLỗi

ReferenceError 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à

• Viết sai tên biến
• Cố gắng truy cập các biến trong phạm vi khối bên ngoài phạm vi của chúng
• Tham chiếu một biến toàn cục từ một thư viện bên ngoài (như $ từ jQuery) trước khi nó được tải

Lỗi cú pháp

Nhữ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à

• Thiếu dấu phẩy ngược
• Thiếu dấu ngoặc đóng
• Căn chỉnh dấu ngoặc nhọn hoặc các ký tự khác không đúng cách

Đó 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ỗi

TypeError 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à

• Gọi các đối tượng không phải là phương thức
• Cố gắng truy cập các thuộc tính của các đối tượng null hoặc không xác định
• Xử lý một chuỗi dưới dạng số hoặc ngược lại

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 trong

Loạ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 tình huống

• Khi một bản vá hoặc bản cập nhật cho thời gian chạy JavaScript mang một lỗi đưa ra các ngoại lệ (điều này rất hiếm khi xảy ra)
• Khi mã của bạn chứa các thực thể quá lớn đối với công cụ JavaScript (e. g. quá nhiều trường hợp chuyển đổi, bộ khởi tạo mảng quá lớn, quá nhiều đệ quy)

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 URI

URIError xảy ra khi chức năng xử lý URI toàn cầu như

throw 8
throw "An error occurred"

8 được sử dụng bất hợp 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ách

Chẩ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ỗi

Một EvalError xảy ra khi xảy ra lỗi với lệnh gọi hàm

throw 8
throw "An error occurred"

9. Hàm

throw 8
throw "An error occurred"

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

throw 8
throw "An error occurred"

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

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

2 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 là điều tra mã được thực thi trong lệnh gọi hàm

throw 8
throw "An error occurred"

9 để biết bất kỳ trường hợp ngoại lệ nào

Tạo các loại lỗi tùy chỉnh

Mặ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

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

4

Vì vậy, về mặt kỹ thuật, những tuyên bố này là hoàn toàn hợp pháp

throw 8
throw "An error occurred"

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

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

5 đã đượ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

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

5 để 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

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

Và bạn có thể sử dụng nó theo cách sau

throw ValidationError("Property not found: name")

Và sau đó bạn có thể xác định nó bằng cách sử dụng từ khóa

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

7

try {
    validateForm() // code that throws a ValidationError
} catch (e) {
    if (e instanceof ValidationError)
    // do something
    else
    // do something else
}

Top 10 lỗi phổ biến nhất trong JavaScript

Bâ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ất

1. Phạm vi chưa bắt được Lỗi

Lỗ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 đệ quy

Vì 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ính

Lỗ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

var list
list.count = 0

Đâ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 TypeError

3. 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

var func
func.call()

Đây là đầu ra

Ví dụ TypeError với chức năng không xác định

Mộ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

import React, { useState, useEffect } from "react";

const CardsList = () => {

    const [state, setState] = useState();

    useEffect(() => {
        setTimeout(() => setState({ items: ["Card 1", "Card 2"] }), 2000);
    }, []);

    return (
        <>
            {state.items.map((item) => (
                
{item}
            ))}
        
    );
};

export default CardsList;

Ứ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

throw wrongTypeError

0

Bâ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ượng

Lỗ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 định

Giả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 đưa ra khi đối tượng có thuộc tính hoặc phương thức đang được truy cập là

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

9 thay vì

throw ValidationError("Property not found: name")

0. Bạn có thể tạo lại điều này bằng cách chạy đoạn mã sau

throw wrongTypeError

1

Đây là đầu ra mà bạn sẽ nhận được

Ví dụ TypeError với chức năng null

Vì

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

9 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 vào một biến do chính bạn đặt

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

9. 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ông

6. 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

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

9 hoặc

throw ValidationError("Property not found: name")

0. 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 định

Tuy nhiên, trong các phiên bản Chrome mới hơn, lỗi này được báo cáo là

throw ValidationError("Property not found: name")

5. Đâ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ơn

Mộ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

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

9

7. LoạiLỗi. 'không xác định' không phải là một chức năng

Lỗ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

throw ValidationError("Property not found: name")

7 trong mã của mình, lỗi này có thể phát sinh nếu

throw ValidationError("Property not found: name")

7 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

throw wrongTypeError

2

Nế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. Nó xảy ra vì 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 ____21_______9

Ngược lại, hàm

try {
    validateForm() // code that throws a ValidationError
} catch (e) {
    if (e instanceof ValidationError)
    // do something
    else
    // do something else
}

0 được định nghĩa trong ngữ cảnh của

try {
    validateForm() // code that throws a ValidationError
} catch (e) {
    if (e instanceof ValidationError)
    // do something
    else
    // do something else
}

1

Để giải quyết vấn đề này, bạn phải chuyển tham chiếu thích hợp đến hàm bằng cách liên kết nó với phương thức

try {
    validateForm() // code that throws a ValidationError
} catch (e) {
    if (e instanceof ValidationError)
    // do something
    else
    // do something else
}

2

Triển khai ứng dụng của bạn lên Kinsta - Bắt đầu với Khoản tín dụng $20 ngay bây giờ

Chạy nút của bạn. js, Python, Go, PHP, Ruby, Java và Scala, (hoặc hầu hết mọi ứng dụng khác nếu bạn sử dụng Dockerfiles tùy chỉnh của riêng mình), trong ba bước đơn giản

Triển khai ngay bây giờ và nhận $20 giảm giá

throw wrongTypeError

3

8. Tham khảoLỗi. sự kiện không được xác định

Lỗ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à

try {
    validateForm() // code that throws a ValidationError
} catch (e) {
    if (e instanceof ValidationError)
    // do something
    else
    // do something else
}

3 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 đổi

Mặc dù có vẻ dễ sửa ngay bây giờ, 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à

try {
    validateForm() // code that throws a ValidationError
} catch (e) {
    if (e instanceof ValidationError)
    // do something
    else
    // do something else
}

4 thay vì

try {
    validateForm() // code that throws a ValidationError
} catch (e) {
    if (e instanceof ValidationError)
    // do something
    else
    // do something else
}

5. , 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ày

10. (không xác định). Kịch bản lỗi

Lỗ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

1. Thêm thuộc tính

   try {
       validateForm() // code that throws a ValidationError
   } catch (e) {
       if (e instanceof ValidationError)
       // do something
       else
       // do something else
   }

   6 vào thẻ script
2. Đặt tiêu đề

   try {
       validateForm() // code that throws a ValidationError
   } catch (e) {
       if (e instanceof ValidationError)
       // do something
       else
       // do something else
   }

   7 chính xác trên máy chủ lưu trữ tập lệnh
3. [Tùy chọn] Nếu không có quyền truy cập vào máy chủ lưu trữ tập lệnh, bạn có thể cân nhắc sử dụng proxy để chuyển tiếp yêu cầu của mình tới máy chủ và quay lại máy khách với các tiêu đề chính xác

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 JavaScript

Mặ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ông

Cá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

ném

Từ khóa đầu tiên và cơ bản nhất của bộ này là

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

4. 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

• Bạn có thể

  class ValidationError extends Error {
      constructor(message) {
          super(message);
          this.name = "ValidationError";
      }
  }

  4 bất kỳ thứ gì, kể cả số, chuỗi và đối tượng

  class ValidationError extends Error {
      constructor(message) {
          super(message);
          this.name = "ValidationError";
      }
  }

  5
• Tuy nhiên, không nên ném các kiểu dữ liệu nguyên thủy như chuỗi và số vì chúng không mang thông tin gỡ lỗi về lỗi
• Thí dụ.

  var list
  list.count = 0

  1

cố gắng

Từ khóa

var list
list.count = 0

2 đượ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à

throw wrongTypeError

4

Điều quan trọng cần lưu ý là khối

var list
list.count = 0

3 phải luôn theo sau khối

var list
list.count = 0

2 để xử lý lỗi hiệu quả

bắt lấy

Từ khóa

var list
list.count = 0

3 đượ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

var list
list.count = 0

2 bắt được. Đây là cú pháp của nó

throw wrongTypeError

5

Và đây là cách bạn thực hiện các khối

var list
list.count = 0

2 và

var list
list.count = 0

3 cùng nhau

throw wrongTypeError

6

Không giống như C++ hoặc Java, bạn không thể nối nhiều khối

var list
list.count = 0

3 vào khối

var list
list.count = 0

2 trong JavaScript. Điều này có nghĩa là bạn không thể làm điều này

throw wrongTypeError

7

Thay vào đó, bạn có thể sử dụng câu lệnh

var func
func.call()

1 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

throw wrongTypeError

8

cuối cùng

Từ khóa

var func
func.call()

2 đượ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à catch

Ngoà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

var func
func.call()

3 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. Chẳng hạn, nếu thẻ

var func
func.call()

4 không thể tìm thấy hình ảnh có URL được chỉ định, nó sẽ kích hoạt phương thức onerror để cho phép người dùng xử lý lỗi

Thông thường, bạn sẽ cung cấp một URL hình ảnh khác trong lệnh gọi onerror để thẻ

var func
func.call()

4 quay trở lại. Đây là cách bạn có thể làm điều đó thông qua JavaScript

throw wrongTypeError

9

Tuy 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 đó

throw TypeError("Wrong type found, expected character")

0

Với trình xử lý sự kiện này, bạn có thể loại bỏ nhiều khối

var func
func.call()

6 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ợp

Vượt qua lỗi thông qua cuộc gọi lại

Mặ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

throw TypeError("Wrong type found, expected character")

1

Hà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

var func
func.call()

7

Điều này cần phải được xử lý đúng cách. Đây là cách

throw TypeError("Wrong type found, expected character")

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ố sai

Mặ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

throw TypeError("Wrong type found, expected character")

3

Bâ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ứa

Hầ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

var func
func.call()

8 bằng Promises

throw TypeError("Wrong type found, expected character")

4

Thời gian chờ từ mã trước đó đã được tách riêng thành hàm

var func
func.call()

9 để 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ày

TypeError ví dụ với một đối số không hợp lệ trong Promise

Một lần nữa, điều này là do

import React, { useState, useEffect } from "react";

const CardsList = () => {

    const [state, setState] = useState();

    useEffect(() => {
        setTimeout(() => setState({ items: ["Card 1", "Card 2"] }), 2000);
    }, []);

    return (
        <>
            {state.items.map((item) => (
                
{item}
            ))}
        
    );
};

export default CardsList;

0 đưa ra 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

import React, { useState, useEffect } from "react";

const CardsList = () => {

    const [state, setState] = useState();

    useEffect(() => {
        setTimeout(() => setState({ items: ["Card 1", "Card 2"] }), 2000);
    }, []);

    return (
        <>
            {state.items.map((item) => (
                
{item}
            ))}
        
    );
};

export default CardsList;

1 vào chuỗi lời hứa như thế này

throw TypeError("Wrong type found, expected character")

5

Bâ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 một khối

import React, { useState, useEffect } from "react";

const CardsList = () => {

    const [state, setState] = useState();

    useEffect(() => {
        setTimeout(() => setState({ items: ["Card 1", "Card 2"] }), 2000);
    }, []);

    return (
        <>
            {state.items.map((item) => (
                
{item}
            ))}
        
    );
};

export default CardsList;

2 và lời hứa gọi thêm mã sẽ chạy sau khi xử lý lỗi hoàn tất

Ngoà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 đó

throw TypeError("Wrong type found, expected character")

6

Tuy 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

var list
list.count = 0

3 và

var func
func.call()

2 vào cuộc gọi lời hứa

né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ắt

Bạn sẽ sử dụng phương pháp này hầu hết thời gian. Đảm bảo thực hiện 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à

import React, { useState, useEffect } from "react";

const CardsList = () => {

    const [state, setState] = useState();

    useEffect(() => {
        setTimeout(() => setState({ items: ["Card 1", "Card 2"] }), 2000);
    }, []);

    return (
        <>
            {state.items.map((item) => (
                
{item}
            ))}
        
    );
};

export default CardsList;

1 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ỗi

onerror()

Tốt nhất là sử dụng phương pháp

var func
func.call()

3 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

import React, { useState, useEffect } from "react";

const CardsList = () => {

    const [state, setState] = useState();

    useEffect(() => {
        setTimeout(() => setState({ items: ["Card 1", "Card 2"] }), 2000);
    }, []);

    return (
        <>
            {state.items.map((item) => (
                
{item}
            ))}
        
    );
};

export default CardsList;

7 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 đầu

Tuy nhiên, bạn cũng phải nhớ rằng phương pháp

var func
func.call()

3 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ạn

Gọi lại và hứa hẹn

Xử 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

import React, { useState, useEffect } from "react";

const CardsList = () => {

    const [state, setState] = useState();

    useEffect(() => {
        setTimeout(() => setState({ items: ["Card 1", "Card 2"] }), 2000);
    }, []);

    return (
        <>
            {state.items.map((item) => (
                
{item}
            ))}
        
    );
};

export default CardsList;

1 và khối

import React, { useState, useEffect } from "react";

const CardsList = () => {

    const [state, setState] = useState();

    useEffect(() => {
        setTimeout(() => setState({ items: ["Card 1", "Card 2"] }), 2000);
    }, []);

    return (
        <>
            {state.items.map((item) => (
                
{item}
            ))}
        
    );
};

export default CardsList;

2 để 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ỗi

Theo dõi các thay đổi với kho lưu trữ Git

Nhiề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.

Các phương pháp hay nhất để xử lý lỗi trong JavaScript

Cá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 động

Chú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

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

5 chung vì nó cung cấp thêm thông tin theo ngữ cảnh cho môi trường gọi về lỗi

Ngoà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ào

Ngay 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ỗi

Ghi 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ợp

Mộ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

throw TypeError("Wrong type found, expected character")

7

Sau đó, 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

throw TypeError("Wrong type found, expected character")

8

Giờ đâ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 đó

throw TypeError("Wrong type found, expected character")

9

Bạ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, 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 đó

throw 8
throw "An error occurred"

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 để Tweet

Tóm lược

Giố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

• Dễ dàng thiết lập và quản lý trong bảng điều khiển MyKinsta
• Hỗ trợ chuyên gia 24/7
• Mạng và phần cứng Google Cloud Platform tốt nhất, được cung cấp bởi Kubernetes để có khả năng mở rộng tối đa
• Tích hợp Cloudflare cấp doanh nghiệp cho tốc độ và bảo mật
• Tiếp cận đối tượng toàn cầu với tối đa 35 trung tâm dữ liệu và hơn 275 PoP trên toàn thế giới

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 để kiểm tra lỗi trong JavaScript?

Làm cách nào để bắt tất cả các lỗi JavaScript?

Làm cách nào để kiểm tra lỗi js trong chrome?

Kiểm tra lỗi JS là gì?