diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.mdx new file mode 100644 index 00000000000000..53753275f6ecea --- /dev/null +++ b/docs/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.mdx @@ -0,0 +1,213 @@ +--- +title: TanStack Start on Cloudflare +description: "Learn how to instrument your TanStack Start app on Cloudflare Workers and capture your first errors with Sentry." +--- + + + + + +This guide is for TanStack Start deployed to **Cloudflare Workers** using the `@cloudflare/vite-plugin`. For Node.js-based deployments, see our [TanStack Start guide](/platforms/javascript/guides/tanstackstart-react/). + + + + + +## Install + +Choose the features you want to configure, and this guide will show you how: + + + + + +### Install the Sentry SDK + + + + + +Run the command for your preferred package manager to add the Sentry SDK to your application: + + + + + + + + + + +## Configure + +When deploying TanStack Start to Cloudflare Workers, you need to wrap the server entry point with `Sentry.withSentry` from `@sentry/cloudflare`. TanStack Start allows you to create a custom server entry file for this purpose. + +### Wrangler Configuration + + + +### Create a Custom Server Entry + + + + + +Create a `src/server.ts` file that wraps the TanStack Start handler with Sentry: + + + + +```typescript {filename:src/server.ts} +import * as Sentry from "@sentry/cloudflare"; +import handler from "@tanstack/react-start/server-entry"; + +export default Sentry.withSentry( + (env) => ({ + dsn: env.SENTRY_DSN, + // Adds request headers and IP for users, for more info visit: + // https://docs.sentry.io/platforms/javascript/guides/cloudflare/configuration/options/#sendDefaultPii + sendDefaultPii: true, + // ___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 spans for tracing. + tracesSampleRate: 1.0, + // ___PRODUCT_OPTION_END___ performance + }), + handler +); +``` + + + + + +### Update Wrangler Configuration + + + + + +Update your `wrangler.jsonc` (or `wrangler.toml`) to use your custom server entry: + + + + +```json {diff} {filename:wrangler.jsonc} + { + "name": "my-tanstack-app", ++ "main": "src/server.ts", + // ... rest of config + } +``` + + + + + +### Configure Client-Side Sentry + + + + + +Initialize Sentry in your `src/router.tsx` file for client-side error tracking: + + + + +```tsx {diff} {filename:src/router.tsx} ++import * as Sentry from "@sentry/tanstackstart-react"; + import { createRouter } from '@tanstack/react-router' + +export const getRouter = () => { + const router = createRouter(); + ++ if (!router.isServer) { ++ Sentry.init({ ++ dsn: "___PUBLIC_DSN___", ++ integrations: [ ++ // ___PRODUCT_OPTION_START___ performance ++ Sentry.browserTracingIntegration(), ++ // ___PRODUCT_OPTION_END___ performance ++ ], ++ // ___PRODUCT_OPTION_START___ performance ++ tracesSampleRate: 1.0, ++ // ___PRODUCT_OPTION_END___ performance ++ }); ++ } + + return router; +} +``` + + + + + +### Add Readable Stack Traces With Source Maps (Optional) + + + +## Verify Your Setup + + + + + +To verify Sentry is capturing errors, add a test button to one of your pages: + + + + +```tsx + +``` + + + + + +Run your app with `wrangler dev` (or through your Vite build with Cloudflare plugin), click the button, and check your Sentry project for the error. + + + +## Next Steps + +At this point, you should have integrated Sentry and should already be sending data to your Sentry project. + +Now's a good time to customize your setup and look into more advanced topics. Our next recommended steps for you are: + +- Learn how to [manually capture errors](/platforms/javascript/guides/cloudflare/usage/) +- Continue to [customize your configuration](/platforms/javascript/guides/cloudflare/configuration/) +- Make use of [Cloudflare-specific features](/platforms/javascript/guides/cloudflare/features) +- Get familiar with [Sentry's product features](/product) like tracing, insights, and alerts + + + +- Check out setup instructions for other popular [frameworks on Cloudflare](/platforms/javascript/guides/cloudflare/frameworks/) +- Find various support topics in troubleshooting +- [Get support](https://sentry.zendesk.com/hc/en-us/) + + + + diff --git a/docs/platforms/javascript/guides/cloudflare/index.mdx b/docs/platforms/javascript/guides/cloudflare/index.mdx index 91b792cbd2e87b..ebf4066e7e4e25 100644 --- a/docs/platforms/javascript/guides/cloudflare/index.mdx +++ b/docs/platforms/javascript/guides/cloudflare/index.mdx @@ -18,6 +18,7 @@ Use this guide for general instructions on using the Sentry SDK with Cloudflare. - **[Nuxt](/platforms/javascript/guides/cloudflare/frameworks/nuxt/)** - **[Remix](/platforms/javascript/guides/cloudflare/frameworks/remix/)** - **[SvelteKit](/platforms/javascript/guides/cloudflare/frameworks/sveltekit/)** +- **[TanStack Start](/platforms/javascript/guides/cloudflare/frameworks/tanstack-start/)** The Cloudflare Workers runtime has some platform-specific limitations that diff --git a/docs/platforms/javascript/guides/tanstackstart-react/index.mdx b/docs/platforms/javascript/guides/tanstackstart-react/index.mdx index dfbbdefd160669..dc11fde0bc619d 100644 --- a/docs/platforms/javascript/guides/tanstackstart-react/index.mdx +++ b/docs/platforms/javascript/guides/tanstackstart-react/index.mdx @@ -332,7 +332,7 @@ You can only instrument native Node.js APIs (such as `fetch` and the `http` modu This means that the Sentry SDK will not capture data from database calls, queues, ORMs, third-party libraries, or other framework-specific data. Thus, we recommend you follow the [`--import` flag setup instructions](#with---import-flag-eg-nodejs-server) if possible. -This setup doesn't work for Cloudflare deployments. +For Cloudflare Workers deployments, see our [TanStack Start on Cloudflare](/platforms/javascript/guides/cloudflare/frameworks/tanstack-start/) guide.