Back to snippets
sentry_react_sdk_init_with_tracing_and_replay.ts
typescriptInitializes the Sentry SDK to monitor errors and performance in a React app
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 />);