Skip to content

feat(tanstackstart-react): Move client-side init to client entry point #17876

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nicohrubec wants to merge 1 commit into
base: master
Choose a base branch
from
+79 −45
Open

feat(tanstackstart-react): Move client-side init to client entry point #17876

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 79 additions & 45 deletions docs/platforms/javascript/guides/tanstackstart-react/manual-setup/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,79 @@ pnpm add @sentry/tanstackstart-react
<SplitSection>
<SplitSectionText>

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`:

</SplitSectionText>
<SplitSectionCode>

```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,
<StrictMode>
<StartClient />
</StrictMode>
);
});
```

</SplitSectionCode>
</SplitSection>
</SplitLayout>

<OnboardingOption optionId="performance">

<SplitLayout>
<SplitSection>
<SplitSectionText>

Then add the TanStack Router browser tracing integration in your `src/router.tsx` file:

</SplitSectionText>
<SplitSectionCode>
Expand All @@ -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;
}
Expand All @@ -148,6 +180,8 @@ export const getRouter = () => {
</SplitSection>
</SplitLayout>

</OnboardingOption>

### Configure Server-Side Sentry

<SplitLayout>
Expand Down
Loading