---
title: "TanStack Start on Cloudflare"
description: "Learn how to instrument your TanStack Start app on Cloudflare Workers and capture your first errors with Sentry."
url: https://docs.sentry.io/platforms/javascript/guides/cloudflare/frameworks/tanstack-start/
---

# TanStack Start on Cloudflare | Sentry for Cloudflare

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](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react.md).

## [Install](https://docs.sentry.io/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.md#install)

Choose the features you want to configure, and this guide will show you how:

Error Monitoring\[ ]Tracing\[ ]Session Replay\[ ]Logs\[ ]User Feedback

Want to learn more about these features?

* [**Issues**](https://docs.sentry.io/product/issues.md) (always enabled)
  <!-- -->
  :
  <!-- -->
  Sentry's core error monitoring product that automatically reports errors, uncaught exceptions, and unhandled rejections. If you have something that looks like an exception, Sentry can capture it.
* [**Tracing**](https://docs.sentry.io/product/tracing.md):
  <!-- -->
  Track software performance while seeing the impact of errors across multiple systems. For example, distributed tracing allows you to follow a request from the frontend to the backend and back.
* [**Session Replay**](https://docs.sentry.io/product/explore/session-replay/web.md):
  <!-- -->
  Get to the root cause of an issue faster by viewing a video-like reproduction of what was happening in the user's browser before, during, and after the problem.
* [**Logs**](https://docs.sentry.io/product/explore/logs.md):
  <!-- -->
  Centralize and analyze your application logs to correlate them with errors and performance issues. Search, filter, and visualize log data to understand what's happening in your applications.
* [**User Feedback**](https://docs.sentry.io/product/user-feedback.md):
  <!-- -->
  Collect feedback directly from users when they encounter errors, allowing them to describe what happened and provide context that helps you understand and resolve issues faster.

### [Install the Sentry SDK](https://docs.sentry.io/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.md#install-the-sentry-sdk)

Run the command for your preferred package manager to add the Sentry SDK to your application:

```bash
npm install @sentry/cloudflare --save
```

## [Configure](https://docs.sentry.io/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.md#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](https://docs.sentry.io/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.md#wrangler-configuration)

### [Create a Custom Server Entry](https://docs.sentry.io/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.md#create-a-custom-server-entry)

Create a `src/server.ts` file that wraps the TanStack Start handler with Sentry.

Use `wrapFetchWithSentry` from `@sentry/tanstackstart-react` to instrument TanStack Start server functions with tracing.

Due to type differences between TanStack Start and Cloudflare Workers, you'll need to add a `// @ts-expect-error` comment as shown in the example. This is expected and doesn't affect functionality.

`src/server.ts`

```typescript
import * as Sentry from "@sentry/cloudflare";
import { wrapFetchWithSentry } from "@sentry/tanstackstart-react";
import handler from "@tanstack/react-start/server-entry";

export default Sentry.withSentry(
  () => ({
    dsn: "___PUBLIC_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
  }),
  // @ts-expect-error - handler is not typed as a Cloudflare handler
  wrapFetchWithSentry(handler),
);
```

### [Update Wrangler Configuration](https://docs.sentry.io/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.md#update-wrangler-configuration)

Update your `wrangler.jsonc` (or `wrangler.toml`) to use your custom server entry:

`wrangler.jsonc`

```json
 {
   "name": "my-tanstack-app",
     "main": "src/server.ts",
   // ... rest of config
 }
```

### [Configure Client-Side Sentry](https://docs.sentry.io/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.md#configure-client-side-sentry)

Initialize Sentry in your `src/router.tsx` file for client-side error tracking:

`src/router.tsx`

```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___",
+
+     // 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 spans for tracing.
+     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.
+     replaysSessionSampleRate: 0.1,
+     replaysOnErrorSampleRate: 1.0,
+     // ___PRODUCT_OPTION_END___ session-replay
+   });
+ }

  return router;
}
```

### [Capture Server-Side Errors](https://docs.sentry.io/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.md#capture-server-side-errors)

To capture server-side errors from HTTP requests and server function calls, add Sentry's global middlewares to `createStart()` in your `src/start.ts` file.

The Sentry middleware should be the first middleware in the arrays to ensure all errors are captured.

SSR rendering exceptions are not captured by the middleware. Use `captureException` to manually capture those errors.

`src/start.ts`

```tsx
import {
  sentryGlobalFunctionMiddleware,
  sentryGlobalRequestMiddleware,
} from "@sentry/tanstackstart-react";
import { createStart } from "@tanstack/react-start";

export const startInstance = createStart(() => {
  return {
    requestMiddleware: [sentryGlobalRequestMiddleware],
    functionMiddleware: [sentryGlobalFunctionMiddleware],
  };
});
```

### [Add Readable Stack Traces With Source Maps (Optional)](https://docs.sentry.io/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.md#add-readable-stack-traces-with-source-maps-optional)

## [Verify Your Setup](https://docs.sentry.io/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.md#verify-your-setup)

To verify Sentry is capturing errors, add a test button to one of your pages:

```tsx
<button
  type="button"
  onClick={() => {
    throw new Error("Sentry Test Error");
  }}
>
  Break the world
</button>;
```

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.

Need help locating the captured errors in your Sentry project?

* Open the
  <!-- -->
  [**Issues**](https://sentry.io/orgredirect/organizations/:orgslug/issues/)
  <!-- -->
  page and select an error from the issues list to view the full details and context of this error. For more details, see this
  <!-- -->
  [interactive walkthrough](https://docs.sentry.io/product/sentry-basics/integrate-frontend/generate-first-error.md#ui-walkthrough).
* Open the
  <!-- -->
  [**Traces**](https://sentry.io/orgredirect/organizations/:orgslug/explore/traces/)
  <!-- -->
  page and select a trace to reveal more information about each span, its duration, and any errors. For an interactive UI walkthrough, click
  <!-- -->
  [here](https://docs.sentry.io/product/sentry-basics/distributed-tracing/generate-first-error.md#ui-walkthrough).
* Open the
  <!-- -->
  [**Logs**](https://sentry.io/orgredirect/organizations/:orgslug/explore/logs/)
  <!-- -->
  page and filter by service, environment, or search keywords to view log entries from your application. For an interactive UI walkthrough, click
  <!-- -->
  [here](https://docs.sentry.io/product/explore/logs.md#overview).

## [Next Steps](https://docs.sentry.io/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.md#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](https://docs.sentry.io/platforms/javascript/guides/cloudflare/usage.md)
* Continue to [customize your configuration](https://docs.sentry.io/platforms/javascript/guides/cloudflare/configuration.md)
* Make use of [Cloudflare-specific features](https://docs.sentry.io/platforms/javascript/guides/cloudflare/features.md)
* Get familiar with [Sentry's product features](https://docs.sentry.io/product.md) like tracing, insights, and alerts

Are you having problems setting up the SDK?

* Check out setup instructions for other popular [frameworks on Cloudflare](https://docs.sentry.io/platforms/javascript/guides/cloudflare/frameworks.md)
* Find various support topics in [troubleshooting](https://docs.sentry.io/platforms/javascript/guides/cloudflare/troubleshooting.md)
* [Get support](https://sentry.zendesk.com/hc/en-us/)