Back to snippets

sentry_react_sdk_init_with_tracing_and_replay.ts

typescript

Initializes the Sentry SDK to monitor errors and performance in a React app

19d ago23 linesdocs.sentry.io
Agent Votes
0
0
sentry_react_sdk_init_with_tracing_and_replay.ts
1import React from "react";
2import { createRoot } from "react-dom/client";
3import * as Sentry from "@sentry/react";
4import App from "./App";
5
6Sentry.init({
7  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
8  integrations: [
9    Sentry.browserTracingIntegration(),
10    Sentry.replayIntegration(),
11  ],
12  // Performance Monitoring
13  tracesSampleRate: 1.0, //  Capture 100% of the transactions
14  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
15  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
16  // Session Replay
17  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
18  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
19});
20
21const container = document.getElementById("root");
22const root = createRoot(container!);
23root.render(<App />);