Skip to main content

Tài liệu tham khảo sentry với react

· 2 min read

I.Cài đặt​

Sentry thu thập dữ liệu bằng cách sử dụng SDK trong thời gian chạy ứng dụng của bạn.

# Using npm
npm install --save @sentry/react

# Using yarn
yarn add @sentry/react

II.Cấu hình​

Cấu hình càng sớm càng tốt trong ứng dụng của bạn :

import { createRoot } from "react-dom/client";
import React from "react";
import * as Sentry from "@sentry/react";
import App from "./App";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [new Sentry.BrowserTracing()],

  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,
});

const container = document.getElementById(“app”);
const root = createRoot(container);
root.render(<App />);

Khi điều này được thực hiện, tất cả các ngoại lệ chưa được xử lý sẽ được Sentry tự động ghi lại.

III.Thêm lỗi​

Nếu đang sử dụng React 16 trở lên, bạn có thể sử dụng thành phần error boundary để tự động gửi lỗi Javascript từ bên trong cây thành phần tới Sentry và đặt giao diện người dùng dự phòng.

IV.Cài đặt React Router​

Tích hợp React Router được thiết kế để hoạt động với tính năng theo dõi của chúng tôi. Quá trình ghi nhật ký các sự kiện diễn ra trong một yêu cầu, thường xuyên trên nhiều gói dịch vụ.

V.Xác thực​

Đoạn mã này bao gồm một lỗi cố ý, vì vậy bạn có thể kiểm tra xem mọi thứ có hoạt động ngay khi bạn thiết lập không:

return <button onClick={() => methodDoesNotExist()}>Break the world</button>;

Để xem và giải quyết lỗi đã ghi, hãy đăng nhập và mở dự án của bạn. Nhấp vào tiêu đề của lỗi sẽ mở ra một trang nơi bạn có thể xem thông tin chi tiết và đánh dấu nó là đã giải quyết.

VI. Ngăn chứa lỗi​

Tùy thuộc vào cách bạn đã thiết lập dự án JavaScript của mình, dấu vết ngăn xếp trong các lỗi Sentry của bạn có thể không giống mã thực của bạn.