Xử lý lỗi JavaScript

Ứng dụng của bạn trở nên mạnh mẽ hơn khi bạn có kinh nghiệm lập trình. Các cải tiến đối với kỹ thuật mã hóa đóng một vai trò quan trọng nhưng bạn cũng sẽ học cách xem xét các trường hợp cạnh. Nếu một cái gì đó có thể đi sai, nó sẽ đi sai. thông thường khi người dùng đầu tiên truy cập hệ thống mới của bạn

Một số lỗi có thể tránh được

• Một người nói dối JavaScript hoặc một trình soạn thảo giỏi có thể bắt lỗi cú pháp chẳng hạn như câu sai chính tả và thiếu dấu ngoặc

• Bạn có thể sử dụng xác thực để bắt lỗi dữ liệu từ người dùng hoặc các hệ thống khác. Không bao giờ đưa ra giả định về sự khéo léo của người dùng để gây ra sự tàn phá. Bạn có thể mong đợi một số nguyên khi hỏi tuổi của ai đó nhưng họ có thể để trống ô, nhập giá trị âm, sử dụng giá trị phân số hoặc thậm chí nhập đầy đủ “hai mươi mốt” bằng ngôn ngữ mẹ đẻ của họ không

  Hãy nhớ rằng xác thực phía máy chủ là điều cần thiết. Xác thực phía máy khách dựa trên trình duyệt có thể cải thiện giao diện người dùng nhưng người dùng có thể đang sử dụng một ứng dụng mà JavaScript bị tắt, không tải được hoặc không thực thi được. Nó có thể không phải là trình duyệt đang gọi API của bạn

Các lỗi thời gian chạy khác là không thể tránh được

• mạng có thể thất bại
• một máy chủ hoặc ứng dụng bận rộn có thể mất quá nhiều thời gian để phản hồi
• tập lệnh hoặc nội dung khác có thể hết thời gian chờ
• ứng dụng có thể thất bại
• đĩa hoặc cơ sở dữ liệu có thể bị lỗi
• một hệ điều hành máy chủ có thể thất bại
• cơ sở hạ tầng của máy chủ có thể bị lỗi

Đây có thể là tạm thời. Bạn không nhất thiết phải mã hóa theo cách của mình để thoát khỏi những vấn đề này nhưng bạn có thể lường trước các vấn đề, thực hiện các hành động thích hợp và làm cho ứng dụng của bạn linh hoạt hơn

Hiển thị lỗi là phương án cuối cùng

Tất cả chúng ta đều gặp lỗi trong các ứng dụng. Một số hữu ích

“Tệp đã tồn tại. Bạn có muốn ghi đè lên nó không?”

Những người khác thì ít hơn

“LỖI 5969”

Hiển thị lỗi cho người dùng phải là biện pháp cuối cùng sau khi sử dụng hết tất cả các tùy chọn khác

Bạn có thể bỏ qua một số lỗi ít nghiêm trọng hơn như hình ảnh không tải được. Trong các trường hợp khác, có thể thực hiện các hành động khắc phục hoặc phục hồi. Ví dụ: nếu bạn không thể lưu dữ liệu vào máy chủ do lỗi mạng, bạn có thể lưu trữ tạm thời dữ liệu đó trong IndexedDB hoặc localStorage và thử lại sau vài phút. Chỉ cần hiển thị cảnh báo khi lưu nhiều lần không thành công và người dùng có nguy cơ mất dữ liệu. Thậm chí sau đó. đảm bảo người dùng có thể thực hiện các hành động phù hợp. Họ có thể kết nối lại với mạng nhưng điều đó sẽ không hữu ích nếu máy chủ của bạn ngừng hoạt động

Xử lý lỗi trong JavaScript

Xử lý lỗi đơn giản trong JavaScript nhưng nó thường bị che giấu trong bí ẩn và có thể trở nên phức tạp khi xem xét mã không đồng bộ

Một "lỗi" là một đối tượng mà bạn có thể đưa ra để đưa ra một ngoại lệ — ngoại lệ này có thể làm dừng chương trình nếu nó không được nắm bắt và xử lý một cách thích hợp. Bạn có thể tạo một đối tượng

const e = Error('An error has occurred');

8 bằng cách chuyển một thông báo tùy chọn tới hàm tạo

const e = new Error('An error has occurred');

Bạn cũng có thể sử dụng

const e = Error('An error has occurred');

8 giống như một hàm không có

const e = new Error('An error has occurred', 'script.js', 99);

0 — nó vẫn trả về một đối tượng

const e = Error('An error has occurred');

8 giống như ở trên

const e = Error('An error has occurred');

Bạn có thể chuyển tên tệp và số dòng làm tham số thứ hai và thứ ba

const e = new Error('An error has occurred', 'script.js', 99);

Điều này hiếm khi cần thiết vì chúng mặc định cho dòng mà bạn đã tạo đối tượng

const e = Error('An error has occurred');

8 trong tệp hiện tại

Sau khi được tạo, một đối tượng

const e = Error('An error has occurred');

8 có các thuộc tính sau mà bạn có thể đọc và viết

• const e = new Error('An error has occurred', 'script.js', 99);

  4. tên của loại

  const e = Error('An error has occurred');

  8 (trong trường hợp này là ____36)

• const e = new Error('An error has occurred', 'script.js', 99);

  7. thông báo lỗi

Các thuộc tính đọc/ghi sau đây cũng được hỗ trợ trong Firefox

• const e = new Error('An error has occurred', 'script.js', 99);

  8. tập tin xảy ra lỗi

• const e = new Error('An error has occurred', 'script.js', 99);

  9. số dòng nơi xảy ra lỗi

• const e = new Error('An error has occurred');

  50. số cột trên dòng xảy ra lỗi

• const e = new Error('An error has occurred');

  51. theo dõi ngăn xếp - danh sách các lệnh gọi hàm được thực hiện để xử lý lỗi

Các loại lỗi

Cũng như một

const e = Error('An error has occurred');

8 chung, JavaScript hỗ trợ các loại lỗi cụ thể

• const e = new Error('An error has occurred');

  53. gây ra bởi một

  const e = new Error('An error has occurred');

  54

• const e = new Error('An error has occurred');

  55. một giá trị bên ngoài một phạm vi hợp lệ

• const e = new Error('An error has occurred');

  56. xảy ra khi hủy tham chiếu một tham chiếu không hợp lệ

• const e = new Error('An error has occurred');

  57. cú pháp không hợp lệ

• const e = new Error('An error has occurred');

  58. một giá trị không phải là một loại hợp lệ

• const e = new Error('An error has occurred');

  59. thông số không hợp lệ được chuyển đến

  const e = Error('An error has occurred');

  50 hoặc

  const e = Error('An error has occurred');

  51

• const e = Error('An error has occurred');

  52. một số lỗi được bao bọc trong một lỗi đơn lẻ thường xuất hiện khi gọi một thao tác, chẳng hạn như

  const e = Error('An error has occurred');

  53

Trình thông dịch JavaScript sẽ đưa ra các lỗi thích hợp khi cần thiết. Trong hầu hết các trường hợp, bạn sẽ sử dụng

const e = Error('An error has occurred');

8 hoặc có lẽ là

const e = new Error('An error has occurred');

58 trong mã của riêng bạn

Ném một ngoại lệ

Tạo một đối tượng

const e = Error('An error has occurred');

8 không tự làm gì cả. Bạn phải sử dụng câu lệnh

const e = Error('An error has occurred');

57 để, bạn biết đấy, “ném” một

const e = Error('An error has occurred');

8 để đưa ra một ngoại lệ

const e = new Error('An error has occurred');

5

Hàm

const e = Error('An error has occurred');

59 này đưa ra một giá trị

const e = new Error('An error has occurred');

58 khi một trong hai đối số không phải là số — giá trị

const e = new Error('An error has occurred', 'script.js', 99);

71 không bao giờ được thực thi

const e = Error('An error has occurred');

5

Thực tế để

const e = Error('An error has occurred');

57 một đối tượng

const e = Error('An error has occurred');

8 nhưng bạn có thể sử dụng bất kỳ giá trị hoặc đối tượng nào

const e = new Error('An error has occurred', 'script.js', 99);

7

Khi bạn

const e = Error('An error has occurred');

57 một ngoại lệ, nó sẽ tạo bong bóng trong ngăn xếp cuộc gọi - trừ khi nó bị bắt. Các ngoại lệ chưa được xử lý cuối cùng sẽ đạt đến đỉnh của ngăn xếp nơi chương trình sẽ tạm dừng và hiển thị lỗi trong bảng điều khiển DevTools, e. g

const e = Error('An error has occurred');

3

Bắt ngoại lệ

Bạn có thể bắt ngoại lệ trong khối

const e = new Error('An error has occurred', 'script.js', 99);

75

const e = Error('An error has occurred');

5

Điều này thực thi mã trong khối

const e = new Error('An error has occurred', 'script.js', 99);

76, nhưng khi một ngoại lệ xảy ra, khối

const e = new Error('An error has occurred', 'script.js', 99);

77 sẽ nhận đối tượng được trả về bởi

const e = Error('An error has occurred');

57

Một câu lệnh

const e = new Error('An error has occurred', 'script.js', 99);

79 có thể phân tích lỗi và phản ứng tương ứng, e. g

const e = Error('An error has occurred');

0

Bạn có thể xác định một khối

const e = Error('An error has occurred');

30 tùy chọn nếu bạn yêu cầu mã chạy cho dù mã

const e = Error('An error has occurred');

31 hoặc

const e = new Error('An error has occurred', 'script.js', 99);

79 có thực thi hay không. Điều này có thể hữu ích khi dọn dẹp, e. g. để đóng kết nối cơ sở dữ liệu trong Node. js hoặc Deno

const e = Error('An error has occurred');

4

Khối

const e = Error('An error has occurred');

31 yêu cầu khối

const e = new Error('An error has occurred', 'script.js', 99);

79, khối

const e = Error('An error has occurred');

35 hoặc cả hai

Lưu ý rằng khi một khối

const e = Error('An error has occurred');

35 chứa một

const e = new Error('An error has occurred', 'script.js', 99);

71, giá trị đó sẽ trở thành giá trị trả về cho toàn bộ

const e = Error('An error has occurred');

38 bất kể bất kỳ câu lệnh

const e = new Error('An error has occurred', 'script.js', 99);

71 nào trong các khối

const e = Error('An error has occurred');

31 và

const e = new Error('An error has occurred', 'script.js', 99);

79

Phát lại phiên mã nguồn mở

OpenReplay là bộ phát lại phiên mã nguồn mở cho phép bạn xem những gì người dùng làm trên ứng dụng web của bạn, giúp bạn khắc phục sự cố nhanh hơn. OpenReplay tự lưu trữ để kiểm soát hoàn toàn dữ liệu của bạn

Bắt đầu tận hưởng trải nghiệm sửa lỗi của bạn - bắt đầu sử dụng OpenReplay miễn phí

Các khối const e = new Error('An error has occurred', 'script.js', 99);75 lồng nhau và lỗi tính toán lại

Một ngoại lệ nổi bong bóng lên ngăn xếp và chỉ bị bắt một lần bởi khối

const e = new Error('An error has occurred', 'script.js', 99);

79 gần nhất, e. g

const e = Error('An error has occurred');

0

Bất kỳ khối

const e = new Error('An error has occurred', 'script.js', 99);

79 nào cũng có thể

const e = Error('An error has occurred');

57 một ngoại lệ mới bị chặn bởi

const e = new Error('An error has occurred', 'script.js', 99);

79 bên ngoài. Bạn có thể truyền đối tượng

const e = Error('An error has occurred');

8 đầu tiên sang một

const e = Error('An error has occurred');

8 mới trong thuộc tính

const e = Error('An error has occurred');

59 của một đối tượng được truyền cho hàm tạo. Điều này làm cho nó có thể nâng cao và kiểm tra một chuỗi các lỗi

Cả hai khối

const e = new Error('An error has occurred', 'script.js', 99);

79 đều thực thi trong ví dụ này vì lỗi đầu tiên gây ra lỗi thứ hai

const e = Error('An error has occurred');

1

Ném ngoại lệ trong các hàm không đồng bộ

Bạn không thể

const e = new Error('An error has occurred', 'script.js', 99);

79 một ngoại lệ được đưa ra bởi một hàm không đồng bộ vì nó được đưa ra sau khi khối

const e = new Error('An error has occurred', 'script.js', 99);

75 đã hoàn tất thực thi. Điều này sẽ thất bại

const e = Error('An error has occurred');

2

Sau khi một giây trôi qua, bảng điều khiển hiển thị

const e = Error('An error has occurred');

3

Nếu bạn đang sử dụng một cuộc gọi lại, quy ước được coi là trong các khung và thời gian chạy như Node. js là trả về lỗi làm tham số đầu tiên cho hàm đó. Điều này không phải là ngoại lệ mặc dù bạn có thể làm điều đó theo cách thủ công khi cần thiết

const e = Error('An error has occurred');

4

Trong ES6 hiện đại, tốt hơn hết là trả lại Promise khi xác định các hàm không đồng bộ. Khi xảy ra lỗi, phương thức

const e = Error('An error has occurred');

04 của Promise có thể trả về một đối tượng

const e = Error('An error has occurred');

8 mới (mặc dù có thể có bất kỳ giá trị hoặc đối tượng nào)

const e = Error('An error has occurred');

5

Phương thức

const e = Error('An error has occurred');

06 thực thi khi truyền tham số

const e = Error('An error has occurred');

07 không hợp lệ để nó có thể phản ứng với đối tượng

const e = Error('An error has occurred');

8 được trả về

const e = Error('An error has occurred');

6

Bất kỳ hàm nào trả về

const e = Error('An error has occurred');

09 đều có thể được gọi bởi hàm

const e = Error('An error has occurred');

40 bằng cách sử dụng câu lệnh

const e = Error('An error has occurred');

41. Bạn có thể chứa điều này trong một khối

const e = new Error('An error has occurred', 'script.js', 99);

75 chạy giống hệt với ví dụ Lời hứa ________ 543/________ 544 ở trên nhưng có thể dễ đọc hơn một chút

const e = Error('An error has occurred');

7

Lỗi là không thể tránh khỏi

Dễ dàng tạo đối tượng lỗi và tăng ngoại lệ trong JavaScript. Phản ứng thích hợp và xây dựng các ứng dụng linh hoạt có phần khó khăn hơn. Lời khuyên tốt nhất. mong đợi những điều bất ngờ và xử lý lỗi càng sớm càng tốt

lỗi là gì

Làm cách nào để giải quyết lỗi JavaScript?

Làm cách nào để xử lý xử lý ngoại lệ trong JavaScript?

Làm cách nào để đưa ra lỗi trong JavaScript?