diff --git a/docs/platforms/javascript/guides/cloudflare/features/vite-plugin.mdx b/docs/platforms/javascript/guides/cloudflare/features/vite-plugin.mdx new file mode 100644 index 0000000000000..d2b225f8f6124 --- /dev/null +++ b/docs/platforms/javascript/guides/cloudflare/features/vite-plugin.mdx @@ -0,0 +1,128 @@ +--- +title: Vite Plugin +description: "Learn how to use the Sentry Cloudflare Vite plugin to instrument bundled dependencies at build time." +--- + + + + + The Sentry Cloudflare Vite plugin has **experimental** stability. Configuration + options and behavior may change or be removed in any release. + + +The Sentry Cloudflare Vite plugin (`sentryCloudflareVitePlugin`) instruments your Worker at build time. It can: + +1. **Instrument bundled dependencies** — automatically instruments supported packages in your bundle (such as database clients like `mysql`) at build time, giving you more traces out of the box. +2. **Auto-instrument your Worker entry** — optionally wraps your default export with `Sentry.withSentry()` and Durable Objects with `instrumentDurableObjectWithSentry()` at build time, so you don't need to modify your code. + +**We recommend building your Cloudflare Worker with Vite and the `sentryCloudflareVitePlugin` plugin.** It's the most complete way to get tracing for bundled dependencies in the Workers runtime. If you already deploy with `wrangler` directly, see [Migrating From Wrangler](#migrating-from-wrangler). + +## Install + +The Vite plugin ships with `@sentry/cloudflare`, so there's no extra package to install. It's designed to run alongside the [Cloudflare Vite plugin](https://developers.cloudflare.com/workers/vite-plugin/). + +## Prerequisites + +The plugin relies on Node.js APIs (`diagnostics_channel`) at runtime, so your Worker must have the `nodejs_compat` compatibility flag enabled. See Node.js Compatibility Entrypoint for setup. + +## Configure + +Enable `useDiagnosticsChannelInjection` to trace supported bundled dependencies, and wrap your handler with `withSentry` as usual: + +```typescript {filename:vite.config.ts} +import { cloudflare } from "@cloudflare/vite-plugin"; +import { sentryCloudflareVitePlugin } from "@sentry/cloudflare/vite"; +import { defineConfig } from "vite"; + +export default defineConfig({ + plugins: [ + cloudflare(), + sentryCloudflareVitePlugin({ + _experimental: { + useDiagnosticsChannelInjection: true, + }, + }), + ], +}); +``` + +```typescript {filename:index.ts} +import * as Sentry from "@sentry/cloudflare"; + +export default Sentry.withSentry( + (env) => ({ + dsn: "___PUBLIC_DSN___", + tracesSampleRate: 1.0, + }), + { + async fetch(request, env) { + // Spans from bundled dependencies (such as mysql) are captured automatically + return new Response("..."); + }, + } +); +``` + +### Auto-instrumentation (Experimental) + +Alternatively, the plugin can wrap your Worker for you at build time, so you don't need `withSentry` in your code. Enable `autoInstrumentation` and the plugin reads your `wrangler.(jsonc|toml)` to find the entry point, Durable Objects, and workflows: + +```typescript {filename:vite.config.ts} +import { cloudflare } from "@cloudflare/vite-plugin"; +import { sentryCloudflareVitePlugin } from "@sentry/cloudflare/vite"; +import { defineConfig } from "vite"; + +export default defineConfig({ + plugins: [ + cloudflare(), + sentryCloudflareVitePlugin({ + _experimental: { + autoInstrumentation: true, + useDiagnosticsChannelInjection: true, + }, + }), + ], +}); +``` + +With auto-instrumentation, you can optionally provide Sentry options via a co-located `instrument.server.*` file (`.ts`, `.mts`, `.js`, `.mjs`, or `.cjs`) next to your Worker entry. Use `defineCloudflareOptions` for full type-checking: + +```typescript {filename:instrument.server.ts} +import { defineCloudflareOptions } from "@sentry/cloudflare"; + +export default defineCloudflareOptions((env) => ({ + dsn: env.SENTRY_DSN, + tracesSampleRate: 1.0, +})); +``` + +If no `instrument.server.*` file exists, the SDK reads all configuration (DSN, release, environment, sample rate, etc.) from the Worker's `env` bindings at runtime. + +## Options + + + +Experimental options that may change or be removed without notice. + + + + + +Automatically wraps your Worker at build time so you don't have to edit your entry. The plugin reads your wrangler config, wraps the default export with `Sentry.withSentry()` (sourcing options from a co-located `instrument.server.*` file, falling back to `env`), and wraps any configured Durable Object and Workflow classes with the matching `instrument*WithSentry` helper. Both `vite build` and `vite dev` are instrumented. + + + + + +Enables build-time automatic instrumentation of supported dependencies. When enabled, the plugin injects `diagnostics_channel` calls into bundled packages during both `vite build` and `vite dev`. When disabled or omitted, the plugin is a no-op. + + + +## Migrating From Wrangler + +If you deploy with `wrangler` directly, moving to Vite is straightforward: + +1. Set up the [Cloudflare Vite plugin](https://developers.cloudflare.com/workers/vite-plugin/get-started/) and add a `vite.config.ts` with the `cloudflare()` and `sentryCloudflareVitePlugin()` plugins as shown above. +2. Run `vite build` before `wrangler deploy`, and use `vite dev` in place of `wrangler dev` for local development. + +Your existing `wrangler.jsonc` becomes the input config — the plugin generates the deployed output during the build. For the full list of fields that change or become redundant, see Cloudflare's [Migrating from Wrangler](https://developers.cloudflare.com/workers/vite-plugin/reference/migrating-from-wrangler-dev/) guide. diff --git a/docs/platforms/javascript/guides/cloudflare/index.mdx b/docs/platforms/javascript/guides/cloudflare/index.mdx index 28d35e561bc56..7a8a48c268208 100644 --- a/docs/platforms/javascript/guides/cloudflare/index.mdx +++ b/docs/platforms/javascript/guides/cloudflare/index.mdx @@ -68,6 +68,39 @@ Importing Sentry from the `@sentry/cloudflare/nodejs_compat` entrypoint unlocks The main Sentry configuration should happen as early as possible in your app's lifecycle. +### Build Tooling + +We recommend building your Worker with **Vite** and the Sentry Cloudflare Vite plugin. It instruments bundled dependencies (like database clients) at build time, giving you more traces in the Cloudflare Workers runtime, where runtime monkey-patching isn't available. If you deploy with `wrangler` directly, everything below still works — you just miss out on that build-time instrumentation. + +With Vite, add the plugin to your `vite.config.ts`, then run `vite build` before `wrangler deploy`. With plain Wrangler, there's no extra build step. + +```typescript {tabTitle:Vite (Recommended)} {filename:vite.config.ts} {mdExpandTabs} +import { cloudflare } from "@cloudflare/vite-plugin"; +import { sentryCloudflareVitePlugin } from "@sentry/cloudflare/vite"; +import { defineConfig } from "vite"; + +export default defineConfig({ + plugins: [ + cloudflare(), + sentryCloudflareVitePlugin({ + _experimental: { + useDiagnosticsChannelInjection: true, + }, + }), + ], +}); +``` + +```bash {tabTitle:Wrangler} +# No extra build tooling — deploy with wrangler as usual: +wrangler deploy + +# You can switch to Vite later. See the Migrating From Wrangler guide: +# https://docs.sentry.io/platforms/javascript/guides/cloudflare/features/vite-plugin/#migrating-from-wrangler +``` + +See the Vite plugin docs for options and migration steps. + ### Wrangler Configuration + + + + +Wrap your exported handler with `Sentry.withSentry()` to start capturing errors and traces from your Worker: + + + + +```typescript {filename:index.ts} +import * as Sentry from "@sentry/cloudflare"; + +export default Sentry.withSentry( + (env: Env) => ({ + dsn: "___PUBLIC_DSN___", + + dataCollection: { + // To disable sending user data and HTTP bodies, uncomment the lines below. For more info visit: + // https://docs.sentry.io/platforms/javascript/guides/cloudflare/configuration/options/#dataCollection + // userInfo: false, + // httpBodies: [], + }, + // ___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. + // Learn more at + // https://docs.sentry.io/platforms/javascript/guides/cloudflare/configuration/options/#tracesSampleRate + tracesSampleRate: 1.0, + // ___PRODUCT_OPTION_END___ performance + }), + { + async fetch(request, env, ctx) { + // Your worker logic here + return new Response("Hello World!"); + }, + } +); +``` + + + + + +If you're using the Sentry Cloudflare Vite plugin, its experimental `autoInstrumentation` option can wrap your Worker for you at build time, so you don't need `withSentry` in your code. ### Setup for Cloudflare Pages