Fix bug dễ dàng cùng với Sentry.io

5236

Sentry.io là gì? Tại sao lại cần dùng tới Sentry

Sentry.io là một ứng dụng giúp chúng ta tracking lại những error xảy ra bên trong ứng dụng trong quá trình người dùng sử dụng, gửi thông báo lỗi thông qua email, SMS.

Trên trang chủ Sentry.io, nói rằng:

When your code breaks. Sentry is here to help you fix it.

Mỗi developer viết ra hàng tấn các bugs, và không thể tránh khỏi có rất nhiều bugs còn tồn tại trên production. Sentry giúp bạn tìm ra những bugs đó trước khi customer nhận ra chúng.

Tạo một Organization mới trên Sentry.io

Đầu tiên các bạn vào đây để tạo 1 Organization cho các dự án của mình,

 sau khi tạo Organization xong, trang sẽ chuyển tới giao diện cho bạn tạo Project của mình. Có rất nhiều ngôn ngữ được Sentry hỗ trợ, việc của bạn là chỉ cần chọn 1 cái, điền tên và Sentry sẽ đưa bạn tới giao diện hướng dẫn integration và cung cấp cho bạn 1 DSN key để bạn sử dụng ở trong ứng dụng của mình.

Thêm Sentry vào dự án Laravel để ghi lại lỗi

Laravel được support bởi Sentry thông qua package sentry-laravel, để sử dụng Sentry trong dự án bạn chỉ cần cài nói thông qua Composer:

Nếu bạn đang dùng Laravel 5.5 trở lên thì bỏ qua bước này:

Thêm Sentry vào App/Exceptions/Handler.php để ứng dụng của bạn report tới Sentry.io mỗi khi có Exception xảy ra:

Tạo file config của Sentry bằng command

Cuối cùng, bạn cần bổ sung vào .env DSN key của dự án mà bạn đã tạo ở trên:


Để kiểm tra xem Sentry đã nhận được lỗi trong ứng dụng Laravel chưa, bạn có thể test bằng việc vào tạo 1 route throw ra 1 exception:

và đây Sentry đã capture lại Exception vừa rồi: 

Thêm Sentry vào dự án React

Để sử dụng Sentry trong React, bạn sử dụng package @sentry/browser:

Trước kia, mỗi khi xảy ra một Javascript error trong 1 phần của UI, nó sẽ gây crash toàn bộ app. Để giải quyết vấn đề này cho React user, từ phiên bản 16 trở lên, React giới thiệu một concept mới Error Boundary. Error boundaries là một React component sẽ catch Javascript errors xảy ra bên trong các child component, log lại error và hiển thị lỗi ở phần UI đó thay vì crash toàn bộ app.

Sentry tận dụng nó để capture các error trên client.

Đầu tiên mình tạo 1 instance của Sentry:

Cuối cùng bạn chỉ cần bọc toàn bộ các Component trong app của bạn bằng ErrorBoundary ở trên

Có thể bạn quan tâm:

TopDev via viblo

  Đánh cắp Cookie bằng cách lợi dụng lỗi bảo mật XSS
  Bài học cho các Developer sau lỗi bug video từ Facebook