diff --git a/docs/platforms/javascript/guides/tanstackstart-react/manual-setup/index.mdx b/docs/platforms/javascript/guides/tanstackstart-react/manual-setup/index.mdx index 245302eb94baa..bd0102a4a15f9 100644 --- a/docs/platforms/javascript/guides/tanstackstart-react/manual-setup/index.mdx +++ b/docs/platforms/javascript/guides/tanstackstart-react/manual-setup/index.mdx @@ -81,7 +81,79 @@ pnpm add @sentry/tanstackstart-react -Initialize Sentry in your `src/router.tsx` file: +Initialize Sentry in your [client entry point](https://tanstack.com/start/latest/docs/framework/react/guide/client-entry-point) `src/client.tsx`: + + + + +```tsx {filename:src/client.tsx} +import * as Sentry from "@sentry/tanstackstart-react"; +import { StartClient } from "@tanstack/react-start/client"; +import { StrictMode, startTransition } from "react"; +import { hydrateRoot } from "react-dom/client"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + // Adds request headers and IP for users, for more info visit: + // https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/configuration/options/#sendDefaultPii + sendDefaultPii: true, + + integrations: [ + // ___PRODUCT_OPTION_START___ session-replay + Sentry.replayIntegration(), + // ___PRODUCT_OPTION_END___ session-replay + // ___PRODUCT_OPTION_START___ user-feedback + Sentry.feedbackIntegration({ + // Additional SDK configuration goes in here, for example: + colorScheme: "system", + }), + // ___PRODUCT_OPTION_END___ user-feedback + ], + // ___PRODUCT_OPTION_START___ logs + + // Enable logs to be sent to Sentry + enableLogs: true, + // ___PRODUCT_OPTION_END___ logs + + // ___PRODUCT_OPTION_START___ performance + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for tracing. + // We recommend adjusting this value in production. + // Learn more at https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate + tracesSampleRate: 1.0, + // ___PRODUCT_OPTION_END___ performance + // ___PRODUCT_OPTION_START___ session-replay + + // Capture Replay for 10% of all sessions, + // plus for 100% of sessions with an error. + // Learn more at https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, + // ___PRODUCT_OPTION_END___ session-replay +}); + +startTransition(() => { + hydrateRoot( + document, + + + + ); +}); +``` + + + + + + + + + + + +Then add the TanStack Router browser tracing integration in your `src/router.tsx` file: @@ -95,50 +167,10 @@ export const getRouter = () => { const router = createRouter(); + if (!router.isServer) { -+ Sentry.init({ -+ dsn: "___PUBLIC_DSN___", -+ -+ // Adds request headers and IP for users, for more info visit: -+ // https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/configuration/options/#sendDefaultPii -+ sendDefaultPii: true, -+ -+ integrations: [ -+ // ___PRODUCT_OPTION_START___ performance -+ Sentry.tanstackRouterBrowserTracingIntegration(router), -+ // ___PRODUCT_OPTION_END___ performance -+ // ___PRODUCT_OPTION_START___ session-replay -+ Sentry.replayIntegration(), -+ // ___PRODUCT_OPTION_END___ session-replay -+ // ___PRODUCT_OPTION_START___ user-feedback -+ Sentry.feedbackIntegration({ -+ // Additional SDK configuration goes in here, for example: -+ colorScheme: "system", -+ }), -+ // ___PRODUCT_OPTION_END___ user-feedback -+ ], -+ // ___PRODUCT_OPTION_START___ logs -+ -+ // Enable logs to be sent to Sentry -+ enableLogs: true, -+ // ___PRODUCT_OPTION_END___ logs -+ -+ // ___PRODUCT_OPTION_START___ performance -+ // Set tracesSampleRate to 1.0 to capture 100% -+ // of transactions for tracing. -+ // We recommend adjusting this value in production. -+ // Learn more at https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate -+ tracesSampleRate: 1.0, -+ // ___PRODUCT_OPTION_END___ performance -+ // ___PRODUCT_OPTION_START___ session-replay -+ -+ // Capture Replay for 10% of all sessions, -+ // plus for 100% of sessions with an error. -+ // Learn more at https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration -+ replaysSessionSampleRate: 0.1, -+ replaysOnErrorSampleRate: 1.0, -+ // ___PRODUCT_OPTION_END___ session-replay -+ }); -+ } ++ Sentry.addIntegration( ++ Sentry.tanstackRouterBrowserTracingIntegration(router) ++ ); ++ } return router; } @@ -148,6 +180,8 @@ export const getRouter = () => { + + ### Configure Server-Side Sentry