Tích hợp Sentry vào ứng dụng React Native
Sentry được sử dụng để theo dõi lỗi của ứng dụng RN phát sinh trong quá trình sử dụng của người dùng cuối trên môi trường Product, cũng có thể dùng để test trong môi trường Dev ở một số trường hợp mà không thể log được giá trị của biến một cách bình thường như cập nhập version của app, ...
Đầu tiên các bạn cần có tài khoản gmail để đăng ký. Có thể dùng tài khoản cá nhân hoặc tài khoản cung của công ty cũng được. Ở đây TíT dùng tài khoản của cá nhân để đăng nhập.
Các bạn vào https://sentry.io/auth/login/ và đăng nhập với Google nha👏
B1: Sau khi đăng nhập, các bạn tạo mới project, lựa chọn ngôn ngữ. Sau đó sẽ dẫn tới trang để setup, các bạn cài đặt thư viện theo hướng dẫn là được 👇👇👇
B2: Sau khi cài các thư viện cần thiết, các bạn vào file App.js của project để setup Sentry cho project.
👇Import thư viện
import * as Sentry from "@sentry/react-native";
👇Cấu hình dsn
Sentry.init({
dsn:"",
autoSessionTracking: true,
tracesSampleRate: 1.0,
enableNative:true
});
dsn sẽ có khi tạo project trên Sentry ở bước 1 ở trên nha. Cho
enableNative: true để có thêm nhiều thông tin máy bị crash, ví dụ tên iphone, ios của iphone đó, version app, ...
B3: Sau khi setup xong như trên. Muốn dùng thì Sentry sẽ có 1 số hàm như
- captureException: bắn lỗi 1 cách tự động, các bạn có thể dùng trực tiếp hàm này trong catch.
- captureMessage: bắn log có custom lại nội dung của log lên Sentry về giá trị biến cần biết hoặc có thể đặt trong try catch để bắt lỗi ở 1 hàm nào đó. Ví dụ, TíT có một hàm để bắn lỗi lên Sentry để biết khi nào có lỗi và lỗi ở đâu như này👇👇👇
export const sendMessageToSentry = (fileName, methodName, error) => {
Sentry.captureMessage(
`log error on ${fileName} => ${methodName}: ${error} and ${JSON.stringify(error)} END.`
);
}
Dưới đây là một vài ví dụ log lỗi trên Sentry nha. Ấn vào thì sẽ hiển thị chi tiết lỗi, máy nào bị, phiên bản, version app đang dùng ... các thứ. Giúp ích được phần nào các bạn trong quá trình tìm ra cách fix lỗi đang có trên app.👇
👆👆👆Có thể trong 1 số trường hợp bạn không muốn log lên nữa vì Sentry cho dùng free nên cũng có giới hạn. Khi nào bạn muốn dừng hay tự nhiên không thấy log về khi đang test nữa thì check cái mũi tên ở ảnh trên coi đã để như này chưa nha.
Trên đây là bài về Sentry là gì và cách tích hợp vào ứng dụng React Native. Dự án bên TíT sử dụng chỉ cần như này nên TíT sẽ chỉ giới thiệu qua một vài hàm hiện TíT đang dùng thôi. Nếu sau này có update gì thì TíT sẽ cập nhập bài viết sau. Cảm ơn mọi người đã đọc, mọi góp ý TíT các bạn gửi về FB để TíT có thể cải thiện tốt hơn trong quá trình viết blog nha.💖💖💖
