> This page is for Webflow Cloud.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Sentry

> Add Sentry error tracking and logging to a Webflow Cloud app, including the framework-specific wiring and runtime caveats.

[Sentry](https://sentry.io) adds error tracking, structured logs, and tracing on top of the [runtime logs](/webflow-cloud/observability) you already get with Webflow Cloud. Reach for it when you want alerts, grouped error reports, or traces that follow a request from the browser into your server code.

Setup is close to Sentry's standard framework guides. The differences come from running on the Cloudflare Workers runtime, and they're the kind of thing that silently breaks if you don't know about them, so they're called out in [Webflow Cloud caveats](#webflow-cloud-caveats) at the end.

> **Tip**
>
> Every framework has a ready-to-run example on the `sentry` branch of its starter repo. If you just want to see Sentry working, deploy one and set your DSN. See [Example branches](#example-branches).

## Set up Sentry

#### Create a Sentry project

In Sentry, create a project and copy its **DSN**. Pick the platform that matches your framework (for example, Next.js) so you get the best stack traces.

#### Add the Sentry SDK

The browser side is the same everywhere: initialize `@sentry/browser` with your public DSN. The server side depends on your framework.

#### Next.js

Use `@sentry/nextjs`, following Sentry's manual setup and its [Cloudflare/OpenNext guidance](https://docs.sentry.io/platforms/javascript/guides/cloudflare/frameworks/nextjs/). One extra step matters on Webflow Cloud: give the server a `fetch`-based transport in `sentry.server.config.ts`, or server events get dropped. See [Webflow Cloud caveats](#webflow-cloud-caveats).

To see the full wiring, look at the [`sentry` branch](https://github.com/Webflow-Examples/hello-world-next-app/tree/sentry) of the Next.js starter.

#### Astro

Wire Sentry through Astro **middleware** with `@sentry/cloudflare`, not by wrapping the worker entry (Webflow Cloud owns that entry). `Sentry.wrapRequestHandler` in `src/middleware.ts` gives you traces and error capture on every request.

See the [`sentry` branch](https://github.com/Webflow-Examples/hello-world-astro-app/tree/sentry) of the Astro starter for the complete setup.

#### Vite (React, Vue, Svelte, JS)

The Vite starters serve from a Cloudflare Worker entry wrapped with `Sentry.withSentry` from `@sentry/cloudflare`. Because `@sentry/cloudflare` sends events with `fetch`, you don't need a transport override.

See the [`sentry` branch](https://github.com/Webflow-Examples/hello-world-js-app/tree/sentry) of the Vite starter for the complete setup.

#### Set the DSN environment variables

Sentry needs your DSN in two places: in the browser bundle at build time, and available to the server at runtime. Set these in your app's [environment variables](/webflow-cloud/environment/configuration).

#### Next.js

Set `NEXT_PUBLIC_SENTRY_DSN`. Next.js inlines `NEXT_PUBLIC_` variables into both the browser and server bundles, so this one covers both sides.

Optional: set `SENTRY_ORG`, `SENTRY_PROJECT`, and `SENTRY_AUTH_TOKEN` to upload source maps during the build and get readable stack traces.

#### Astro

Set two variables: `PUBLIC_SENTRY_DSN` for the browser bundle, and `SENTRY_DSN` for the server at runtime.

#### Vite (React, Vue, Svelte, JS)

Set two variables: `VITE_SENTRY_DSN` for the browser bundle, and `SENTRY_DSN` for the worker at runtime.

#### Deploy and verify

Deploy your app:

```bash
webflow cloud deploy
```

Then open your Sentry project's **Issues** and **Logs** views. Trigger an error in your app (the example branches include a button that throws one), and confirm it shows up in Sentry within a few seconds.

## Webflow Cloud caveats

These come from running on the Cloudflare Workers runtime (`workerd`) instead of Node. They're what trips people up when they follow Sentry's stock framework docs.

> **Node-transport SDKs drop server events silently**
>
> Sentry's default server transport (used by `@sentry/nextjs` and other Node SDKs) sends events with Node's `https.request`, which `workerd` only supports at newer compatibility dates. Webflow Cloud currently deploys with an older one, so out of the box **server-side events are dropped with no error**. Fix it by overriding the transport with a `fetch`-based one, the way the Next.js example does in `sentry.server.config.ts`. SDKs built for Cloudflare (`@sentry/cloudflare`, used by the Astro and Vite examples) already use `fetch`, so they work as-is.

> **Astro: use middleware, not the worker entry**
>
> Sentry's Cloudflare docs point `wrangler.json#main` at a wrapper file, but Webflow Cloud owns the worker entrypoint and discards that wrapper at deploy time. Wire Sentry through Astro middleware (`Sentry.wrapRequestHandler`) instead, so it runs inside whatever entry the platform uses.

> **Don't use Sentry's \`tunnelRoute\`**
>
> `tunnelRoute` registers the tunnel at a fixed path that ignores the mount path your app is served under, so it won't resolve. Leave it off.

## Example branches

Each starter repo has a `sentry` branch with a working setup, validated on the Workers runtime Webflow Cloud deploys with:

| Framework  | Sentry branch                                                                                      |
| ---------- | -------------------------------------------------------------------------------------------------- |
| Next.js    | [`hello-world-next-app`](https://github.com/Webflow-Examples/hello-world-next-app/tree/sentry)     |
| Astro      | [`hello-world-astro-app`](https://github.com/Webflow-Examples/hello-world-astro-app/tree/sentry)   |
| React      | [`hello-world-react-app`](https://github.com/Webflow-Examples/hello-world-react-app/tree/sentry)   |
| Vue        | [`hello-world-vue-app`](https://github.com/Webflow-Examples/hello-world-vue-app/tree/sentry)       |
| Svelte     | [`hello-world-svelte-app`](https://github.com/Webflow-Examples/hello-world-svelte-app/tree/sentry) |
| Vanilla JS | [`hello-world-js-app`](https://github.com/Webflow-Examples/hello-world-js-app/tree/sentry)         |

> **Note**
>
> The Astro example currently targets Astro 6. An Astro 7 version is in progress.