diff --git a/.cursor/rules/contribution-guidelines.mdc b/.cursor/rules/contribution-guidelines.mdc new file mode 100644 index 00000000000000..031e738e20421c --- /dev/null +++ b/.cursor/rules/contribution-guidelines.mdc @@ -0,0 +1,310 @@ +--- +description: LLM Contribution Guidelines for Sentry Documentation +globs: +alwaysApply: false +--- +# LLM Contribution Guidelines for Sentry Documentation + +## Overview + +This is a Next.js documentation site using MDX for content management. The codebase serves SDK documentation for multiple platforms and frameworks with a sophisticated shared content system. + +## File Structure & Organization + +### Core Directories + +``` +docs/ # All documentation content +├── platforms/ # Platform-specific documentation +│ ├── javascript/ +│ │ ├── config.yml # Platform configuration +│ │ ├── common/ # Shared content for JS platform +│ │ └── guides/ # Framework-specific guides +│ │ ├── hono/ +│ │ ├── express/ +│ │ └── react/ +│ ├── python/ +│ └── ... +├── product/ # Product documentation +├── api/ # API documentation +└── concepts/ # Conceptual documentation + +platform-includes/ # Shared content across platforms +├── getting-started-install/ +├── getting-started-config/ +└── getting-started-verify/ + +includes/ # General shared content +src/ # Application source code +├── components/ # React components +├── mdx.ts # MDX processing logic +└── types/ # TypeScript types +``` + +## Content Creation Rules + +### 1. MDX File Structure + +All documentation files must use MDX format with YAML frontmatter: + +```mdx +--- +title: "Framework Name" +description: "Learn how to set up Framework with Sentry." +sdk: sentry.javascript.framework +categories: + - javascript + - server +sidebar_order: 10 +--- + + + +Content goes here... +``` + +### 2. Required Frontmatter Fields + +- `title`: Page title (used in navigation and SEO) +- `description`: Meta description for SEO +- `sdk`: SDK identifier (format: `sentry.{platform}.{guide}`) +- `categories`: Array of category tags + +### 3. Optional Frontmatter Fields + +- `sidebar_order`: Controls navigation order (lower = higher in list) +- `sidebar_title`: Override sidebar display name +- `sidebar_hidden`: Hide from sidebar navigation +- `draft`: Mark as draft (hidden from navigation) +- `supported`: Array of platforms/guides this content supports +- `notSupported`: Array of platforms/guides this content doesn't support + +## Component Usage + +### Platform-Specific Content + +Use `` for shared, platform-specific content: + +```mdx + + +``` + +### Onboarding Options + +For feature selection interfaces: + +```mdx + +``` + +### Code Blocks with Tabs + +For package manager instructions: + +```mdx +```bash {tabTitle:npm} +npm install @sentry/node --save +``` + +```bash {tabTitle:yarn} +yarn add @sentry/node +``` + +```bash {tabTitle:pnpm} +pnpm add @sentry/node +``` +``` + +### Code Highlighting + +Use filename annotations and highlighting: + +```mdx +```typescript {filename:index.ts} +import * as Sentry from "@sentry/node"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", +}); +``` +``` + +### Alerts and Callouts + +```mdx + +Content here... + + + +Warning content... + +``` + +### Links + +```mdx +Configuration +``` + +### Expandable Sections + +```mdx + +Additional details... + +``` + +## Platform-Specific Guidelines + +### JavaScript Guides + +1. **Location**: Place under `docs/platforms/javascript/guides/{framework}/` +2. **Naming**: Use lowercase, hyphenated names (e.g., `next-js`, `react-native`) +3. **Structure**: Most guides should be simple and leverage shared content: + +```mdx +--- +title: "Framework Name" +description: "Learn how to set up Framework with Sentry." +sdk: sentry.javascript.framework +fallbackGuide: javascript.node # For server-side frameworks +categories: + - javascript + - server # or 'browser' for client-side +--- + + + +Brief framework-specific introduction... + + +``` + +### Shared Content Creation + +Create shared content in `platform-includes/` when: +- Content applies to multiple frameworks within a platform +- Installation/configuration steps are similar +- Verification steps are identical + +### Content Resolution Priority + +The system resolves content in this order: +1. Guide-specific: `platform-includes/path/{platform}.{guide}.mdx` +2. Platform-specific: `platform-includes/path/{platform}.mdx` +3. Default: `platform-includes/path/_default.mdx` + +## Content Standards + +### Writing Style + +1. **Be concise**: Avoid unnecessary explanations +2. **Use active voice**: "Install the SDK" not "The SDK should be installed" +3. **Provide working examples**: All code samples must be functional +4. **Include all imports**: Don't assume imports are obvious + +### Code Samples + +1. **Complete examples**: Include all necessary imports and setup +2. **Use placeholders**: Use `___PUBLIC_DSN___` for DSN values +3. **Add context**: Use filename annotations +4. **Test functionality**: Ensure examples work as written + +### Error Handling + +Always include error handling examples: + +```typescript +app.onError((err, c) => { + Sentry.captureException(err); + if (err instanceof HTTPException) { + return err.getResponse() + } + return c.json({ error: "Internal server error" }, 500) +}) +``` + +## File Naming Conventions + +- Guide directories: lowercase with hyphens (`react-native`, `next-js`) +- MDX files: `index.mdx` for main content +- Versioned files: `index__v{version}.mdx` for version-specific content +- Images: descriptive names in local `img/` directories + +## Navigation & Discovery + +### Sidebar Order + +Control navigation order with `sidebar_order`: +- Getting started: 1-10 +- Configuration: 11-20 +- Advanced topics: 21-30 +- Troubleshooting: 90+ + +### Page Grids + +For overview pages, use `` to auto-generate child page listings: + +```mdx + +``` + +## Validation Checklist + +Before submitting content: + +- [ ] Frontmatter includes required fields +- [ ] All code examples are complete and functional +- [ ] Platform-specific content uses appropriate includes +- [ ] Links use proper components (`` for internal) +- [ ] Content follows established patterns for similar platforms +- [ ] Sidebar navigation order is appropriate +- [ ] All placeholders use standard format (`___PUBLIC_DSN___`) + +## Common Anti-Patterns + +### ❌ Avoid + +```mdx +# Don't repeat boilerplate content +Install Sentry by running: npm install @sentry/node + +# Don't use hardcoded links +[Configuration](mdc:https:/docs.sentry.io/platforms/javascript/configuration) + +# Don't skip imports in examples +Sentry.init({ dsn: "..." }); // Missing import +``` + +### ✅ Do + +```mdx +# Use shared content for common steps + + +# Use proper link components +Configuration + +# Include complete examples +import * as Sentry from "@sentry/node"; + +Sentry.init({ dsn: "___PUBLIC_DSN___" }); +``` + +## Testing Content + +1. **Build locally**: Run `npm run dev` to test content rendering +2. **Check navigation**: Verify sidebar placement and ordering +3. **Test links**: Ensure all internal links resolve correctly +4. **Validate components**: Confirm all MDX components render properly + +## Version Management + +- Use versioned includes for breaking changes: `file__v{version}.mdx` +- Maintain backward compatibility when possible +- Document version-specific differences clearly +- Test across supported SDK versions diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/astro.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/astro.mdx deleted file mode 100644 index 1d61fb0ff6f46b..00000000000000 --- a/docs/platforms/javascript/guides/cloudflare/frameworks/astro.mdx +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Cloudflare Astro Framework Guide -description: "Learn how to add Cloudflare instrumentation to your Astro app." ---- - -If you're running your Astro app on Cloudflare Pages, you can use the Sentry Astro SDK in combination with the Sentry Cloudflare SDK to add Sentry instrumentation. - -First, install the Sentry Astro SDK in your application. We recommend [setting up the Astro SDK manually](/platforms/javascript/guides/astro/manual-setup/) and manually initializing the SDK. Make sure you have a `sentry.client.config.js` file created, but do not add a `sentry.server.config.js` file. - -After installing the Sentry Astro SDK, you can now install the Sentry Cloudflare SDK. First, install the SDK with your package manager: - - - -To use the SDK, you'll need to set either the `nodejs_als` or `nodejs_compat` compatibility flags in your `wrangler.jsonc`/`wrangler.toml` config. This is because the SDK -needs access to the `AsyncLocalStorage` API to work correctly. - -```jsonc {tabTitle:JSON} {filename:wrangler.jsonc} -{ - "compatibility_flags": [ - "nodejs_als", - // "nodejs_compat" - ], -} -``` - -```toml {tabTitle:Toml} {filename:wrangler.toml} -compatibility_flags = ["nodejs_als"] -# compatibility_flags = ["nodejs_compat"] -``` - -```toml {tabTitle:Toml} {filename:wrangler.toml} -compatibility_flags = ["nodejs_compat"] -# compatibility_flags = ["nodejs_als"] -``` - -Then create a `functions` directory and add a `_middleware.js` file to it with the following code: - -```javascript {filename:functions/_middleware.js} -import * as Sentry from "@sentry/cloudflare"; - -export const onRequest = [ - // Make sure Sentry is the first middleware - Sentry.sentryPagesPlugin((context) => ({ - dsn: "___PUBLIC_DSN___", - // Set tracesSampleRate to 1.0 to capture 100% of spans for tracing. - // Learn more at - // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate - tracesSampleRate: 1.0, - })), - // Add more middlewares here -]; -``` diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/hono.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/hono.mdx new file mode 100644 index 00000000000000..2befa99c1ea71e --- /dev/null +++ b/docs/platforms/javascript/guides/cloudflare/frameworks/hono.mdx @@ -0,0 +1,82 @@ +--- +title: Hono on Cloudflare +description: Learn how to set up Hono with Sentry on Cloudflare. +--- + +This guide explains how to set up Sentry in your Hono application running on Cloudflare Workers. + +## Setup + +To use the SDK, you'll need to set either the `nodejs_als` or `nodejs_compat` compatibility flags in your `wrangler.jsonc`/`wrangler.toml` config. This is because the SDK +needs access to the `AsyncLocalStorage` API to work correctly. + +```jsonc {tabTitle:JSON} {filename:wrangler.jsonc} +{ + "compatibility_flags": [ + "nodejs_als", + // "nodejs_compat" + ], +} +``` + +```toml {tabTitle:Toml} {filename:wrangler.toml} +compatibility_flags = ["nodejs_als"] +# compatibility_flags = ["nodejs_compat"] +``` + +You will also want to add the `CF_VERSION_METADATA` binding: + +```jsonc {tabTitle:JSON} {filename:wrangler.jsonc} +{ + // ... + "version_metadata": { + "binding": "CF_VERSION_METADATA" + }, +} +``` + +```toml {tabTitle:Toml} {filename:wrangler.toml} +version_metadata = { binding = "CF_VERSION_METADATA" } +``` + +## Config + +Next, wrap your worker handler with the `withSentry` function. This will initialize the SDK and hook into the +environment. Note that you can turn off almost all side effects using the respective options. + +```typescript {filename:index.ts} +import { Hono, HTTPException } from "hono"; +import * as Sentry from "@sentry/cloudflare"; + +// Wrap your Worker binding with Sentry to ensure tracing instrumentation is enabled, +// and Sentry telemetry is flushed at the end of requests. +export default Sentry.withSentry( + (env) => { + const { id: versionId } = env.CF_VERSION_METADATA; + + return { + dsn: "___PUBLIC_DSN___", + + release: versionId, + + // 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___ performance + // Set tracesSampleRate to 1.0 to capture 100% of spans for tracing. + // Learn more at + // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate + tracesSampleRate: 1.0, + // ___PRODUCT_OPTION_END___ performance + } + }, + app +); +``` + + + +## Verify + + diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/index.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/index.mdx index a895bac706b40c..4b8331b1fa7b1b 100644 --- a/docs/platforms/javascript/guides/cloudflare/frameworks/index.mdx +++ b/docs/platforms/javascript/guides/cloudflare/frameworks/index.mdx @@ -1,5 +1,5 @@ --- -title: Cloudflare SDK Framework Guide +title: Frameworks on Cloudflare description: "Learn how to set up the Cloudflare SDK with popular Frameworks like SvelteKit or Remix." --- diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/remix.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/remix.mdx deleted file mode 100644 index 271c9281f45190..00000000000000 --- a/docs/platforms/javascript/guides/cloudflare/frameworks/remix.mdx +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Cloudflare Remix Framework Guide -description: "Learn how to add Cloudflare instrumentation to your Remix app." ---- - -If you're running your Remix app on Cloudflare Pages, you can use the Sentry Remix SDK in combination with the Sentry Cloudflare SDK to add Sentry instrumentation. - -## 1. Installing Sentry Remix SDK - -First, install the Sentry Remix SDK in your application. We recommend using the Sentry wizard to automatically install the SDK: - -```bash -npx @sentry/wizard@latest -i remix -``` - -If the setup through the wizard doesn't work for you, you can also [set up the Remix SDK manually](/platforms/javascript/guides/remix/manual-setup/). - -## 2. Installing Sentry Cloudflare SDK - -After installing the Sentry Remix SDK, delete the newly generated `instrumentation.server.mjs` file. This instrumentation is not needed when using the Cloudflare SDK. - -Now you can install the Sentry Cloudflare SDK. First, install the SDK with your package manager: - - - -To use the SDK, you'll need to set either the `nodejs_als` or `nodejs_compat` compatibility flags in your `wrangler.jsonc`/`wrangler.toml` config. This is because the SDK -needs access to the `AsyncLocalStorage` API to work correctly. - -```jsonc {tabTitle:JSON} {filename:wrangler.jsonc} -{ - "compatibility_flags": [ - "nodejs_als", - // "nodejs_compat" - ], -} -``` - -```toml {tabTitle:Toml} {filename:wrangler.toml} -compatibility_flags = ["nodejs_als"] -# compatibility_flags = ["nodejs_compat"] -``` - -Then create a `_middleware.js` file in your `functions` directory and add the following code: - -```javascript {filename:functions/_middleware.js} -import * as Sentry from "@sentry/cloudflare"; - -export const onRequest = [ - // Make sure Sentry is the first middleware - Sentry.sentryPagesPlugin((context) => ({ - dsn: "___PUBLIC_DSN___", - // Set tracesSampleRate to 1.0 to capture 100% of spans for tracing. - tracesSampleRate: 1.0, - })), - // Add more middlewares here -]; -``` diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/sveltekit.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/sveltekit.mdx deleted file mode 100644 index 3a3823df566d03..00000000000000 --- a/docs/platforms/javascript/guides/cloudflare/frameworks/sveltekit.mdx +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Cloudflare Sveltekit Framework Guide -description: "Learn how to add Cloudflare instrumentation to your SvelteKit app." ---- - -If you're running your SvelteKit app on Cloudflare Pages, you need to configure the SDK a little differently to the default setup. This guide will show you how to set up the Sentry SvelteKit SDK for Cloudflare Pages. - -## 1. Install the SDK - -First, install the Sentry SvelteKit SDK in your application. We recommend using the Sentry wizard to automatically install the SDK: - -```bash -npx @sentry/wizard@latest -i sveltekit -``` - -If the setup through the wizard doesn't work for you, you can also [set up the SvelteKit SDK manually](/platforms/javascript/guides/sveltekit/manual-setup/). - - - -If you installed the SDK before, make sure that `@sentry/sveltekit` version `9.2.0` or newer is installed. - - - -## 2. Cloudflare configuration - -To use the SDK, you'll need to set either the `nodejs_als` or `nodejs_compat` compatibility flags in your `wrangler.jsonc`/`wrangler.toml` config. This is because the SDK -needs access to the `AsyncLocalStorage` API to work correctly. - -```jsonc {tabTitle:JSON} {filename:wrangler.jsonc} -{ - "compatibility_flags": [ - "nodejs_als", - // "nodejs_compat" - ], -} -``` - -```toml {tabTitle:Toml} {filename:wrangler.toml} -compatibility_flags = ["nodejs_als"] -# compatibility_flags = ["nodejs_compat"] -``` - -## 3. Update Your Server Hooks File - -To use this SDK, update your `src/hooks.server.(ts|js)` file to use the `initCloudflareSentryHandle` method from the Sentry Cloudflare SDK and remove the `Sentry.init` call from `@sentry/sveltekit`. - -```typescript diff {filename:hooks.server.(ts|js)} --import { handleErrorWithSentry, sentryHandle } from "@sentry/sveltekit"; -+import { handleErrorWithSentry, sentryHandle, initCloudflareSentryHandle } from "@sentry/sveltekit"; -+import { sequence } from "@sveltejs/kit/hooks"; - import * as Sentry from '@sentry/sveltekit'; - --Sentry.init({ -- dsn: '___PUBLIC_DSN___', -- tracesSampleRate: 1.0, -- -- // uncomment the line below to enable Spotlight (https://spotlightjs.com) -- // spotlight: import.meta.env.DEV, --}); -- --export const handle = sentryHandle(); -+export const handle = sequence( -+ initCloudflareSentryHandle({ -+ dsn: '___PUBLIC_DSN___', -+ tracesSampleRate: 1.0, -+ }), -+ sentryHandle() -+); - - export const handleError = handleErrorWithSentry(myErrorHandler); -``` - -If you need to use environmental variables, you can access them using `event.platform.env`. diff --git a/docs/platforms/javascript/guides/cloudflare/index.mdx b/docs/platforms/javascript/guides/cloudflare/index.mdx index df4490598f1c39..fb9257eb4d7bc8 100644 --- a/docs/platforms/javascript/guides/cloudflare/index.mdx +++ b/docs/platforms/javascript/guides/cloudflare/index.mdx @@ -133,6 +133,14 @@ export const handle = ({ event, resolve }) => { }; ``` +### Frameworks + +You can use the Sentry Cloudflare SDK with popular frameworks running on Cloudflare: + +- **[Hono](frameworks/hono/)** - A lightweight web framework for Cloudflare Workers + +Take a look at your framework of choice, as there are likely additional instructions for setting up Sentry with it. For more framework-specific guidance, see the [frameworks section](frameworks/). + ### Cloudflare Durable Objects You can use the `instrumentDurableObjectWithSentry` method to instrument [Cloudflare Durable Objects](https://developers.cloudflare.com/durable-objects/). This will need to be done alongside the worker setup. diff --git a/docs/platforms/javascript/guides/hono/index.mdx b/docs/platforms/javascript/guides/hono/index.mdx index 998b4545be6b79..5a20e282487ea0 100644 --- a/docs/platforms/javascript/guides/hono/index.mdx +++ b/docs/platforms/javascript/guides/hono/index.mdx @@ -26,9 +26,9 @@ Select which Sentry features you'd like to install in addition to Error Monitori ## Setup -Since Hono is a framework designed to run in all kinds of JavaScript runtimes, different setups for different platforms are outlined below. +For setup instructions on Cloudflare Workers, see the dedicated [Hono on Cloudflare guide](/platforms/javascript/guides/cloudflare/frameworks/hono/). -### Setup On Node.js +This guide assumes you're using the Node.js runtime. Start by installing the Sentry dependency: ```bash {tabTitle:npm} npm install @sentry/node --save @@ -42,184 +42,8 @@ yarn add @sentry/node pnpm add @sentry/node ``` -From there, you'll need to bind an `onError` hook to report unhandled exceptions to Sentry: - -```typescript {filename:index.ts} -import { Hono, HTTPException } from "hono"; -import * as Sentry from "@sentry/node"; - -const app = new Hono() - // Add an onError hook to report unhandled exceptions to Sentry. - .onError((err, c) => { - // Report _all_ unhandled errors. - Sentry.captureException(err); - if (err instanceof HTTPException) { - return err.getResponse() - } - // Or just report errors which are not instances of HTTPException - // Sentry.captureException(err); - return c.json({ error: "Internal server error" }, 500) - }) - // Your routes... - app.get("/", () => { - // ... - }); - -export default app; -``` - -Note: We don't currently support automatic tracing instrumentation for Hono within the Node.js adapter. - -### Setup On Cloudflare Workers - -```bash {tabTitle:npm} -npm install @sentry/cloudflare --save -``` - -```bash {tabTitle:yarn} -yarn add @sentry/cloudflare -``` - -```bash {tabTitle:pnpm} -pnpm add @sentry/cloudflare -``` - -To use the SDK, you'll need to set either the `nodejs_als` or `nodejs_compat` compatibility flags in your `wrangler.jsonc`/`wrangler.toml` config. This is because the SDK -needs access to the `AsyncLocalStorage` API to work correctly. - -```jsonc {tabTitle:JSON} {filename:wrangler.jsonc} -{ - "compatibility_flags": [ - "nodejs_als", - // "nodejs_compat" - ], -} -``` - -```toml {tabTitle:Toml} {filename:wrangler.toml} -compatibility_flags = ["nodejs_als"] -# compatibility_flags = ["nodejs_compat"] -``` - -Next, wrap your handler with the `withSentry` function. This will initialize the SDK and hook into the -environment. Note that you can turn off almost all side effects using the respective options. - -```typescript {filename:index.ts} -import { Hono, HTTPException } from "hono"; -import * as Sentry from "@sentry/cloudflare"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - - - // Adds request headers and IP for users, for more info visit: - // https://docs.sentry.io/platforms/javascript/guides/hono/configuration/options/#sendDefaultPii - sendDefaultPii: true, - - // ___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/configuration/options/#traces-sample-rate - tracesSampleRate: 1.0, - // ___PRODUCT_OPTION_END___ performance -}); - -const app = new Hono() - // Add an onError hook to report unhandled exceptions to Sentry. - .onError((err, c) => { - // Report _all_ unhandled errors. - Sentry.captureException(err); - if (err instanceof HTTPException) { - return err.getResponse() - } - // Or just report errors which are not instances of HTTPException - // Sentry.captureException(err); - return c.json({ error: "Internal server error" }, 500) - }) - // Your routes... - app.get("/", () => { - // ... - }); - -// Wrap your Worker binding with Sentry to ensure tracing instrumentation is enabled, -// and Sentry telemetry is flushed at the end of requests. -export default Sentry.withSentry( - (env) => ({ - dsn: "___PUBLIC_DSN___", - - - // Adds request headers and IP for users, for more info visit: - // https://docs.sentry.io/platforms/javascript/guides/hono/configuration/options/#sendDefaultPii - sendDefaultPii: true, - - // ___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/configuration/options/#traces-sample-rate - tracesSampleRate: 1.0, - // ___PRODUCT_OPTION_END___ performance - }), - app -); -``` - -### Setup On Cloudflare Pages - -```bash {tabTitle:npm} -npm install @sentry/cloudflare --save -``` - -```bash {tabTitle:yarn} -yarn add @sentry/cloudflare -``` - -```bash {tabTitle:pnpm} -pnpm add @sentry/cloudflare -``` - -To use the SDK, you'll need to set either the `nodejs_compat` or `nodejs_als` compatibility flags in your `wrangler.toml`/`wrangler.json`. -This is because the SDK needs access to the `AsyncLocalStorage` API to work correctly. - -```jsonc {tabTitle:JSON} {filename:wrangler.jsonc} -{ - "compatibility_flags": [ - "nodejs_compat", - // "nodejs_als" - ], -} -``` - -```toml {tabTitle:Toml} {filename:wrangler.toml} -compatibility_flags = ["nodejs_compat"] -# compatibility_flags = ["nodejs_als"] -``` - -Next, add the `sentryPagesPlugin` as -[middleware to your Cloudflare Pages application](https://developers.cloudflare.com/pages/functions/middleware/). - -We recommend adding a `functions/_middleware.js` for the middleware setup so that Sentry is initialized for your entire -app. - -```javascript {filename:functions/_middleware.js} -import * as Sentry from "@sentry/cloudflare"; - -export const onRequest = [ - // Make sure Sentry is the first middleware - Sentry.sentryPagesPlugin((context) => ({ - dsn: "___PUBLIC_DSN___", - // ___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/configuration/options/#traces-sample-rate - tracesSampleRate: 1.0, - // ___PRODUCT_OPTION_END___ performance - })), - // Add more middlewares here -]; -``` + -### Setup On Other Runtimes +## Verify -We currently limit support for Hono to Cloudflare. -If you need support for other runtimes [reach out on GitHub with a feature request](https://github.com/getsentry/sentry-javascript/issues/new/choose). + diff --git a/platform-includes/getting-started-config/javascript.hono.mdx b/platform-includes/getting-started-config/javascript.hono.mdx new file mode 100644 index 00000000000000..c09377b1f3d230 --- /dev/null +++ b/platform-includes/getting-started-config/javascript.hono.mdx @@ -0,0 +1,32 @@ +Now bind an `onError` hook to report unhandled exceptions to Sentry: + +```javascript +const app = new Hono() + // Add an onError hook to report unhandled exceptions to Sentry. + .onError((err, c) => { + // Report _all_ unhandled errors. + Sentry.captureException(err); + if (err instanceof HTTPException) { + return err.getResponse() + } + // Or just report errors which are not instances of HTTPException + // Sentry.captureException(err); + return c.json({ error: "Internal server error" }, 500) + }) + + // Bind global context via Hono middleware + .use((c, next) => { + Sentry.setUser({ + email: c.session.user.email, + }) + + Sentry.setTag("project_id", c.session.projectId); + + return next(); + }) + + // Your routes... + .get("/", () => { + // ... + }); +``` diff --git a/platform-includes/getting-started-verify/javascript.hono.mdx b/platform-includes/getting-started-verify/javascript.hono.mdx new file mode 100644 index 00000000000000..8411931c4c0173 --- /dev/null +++ b/platform-includes/getting-started-verify/javascript.hono.mdx @@ -0,0 +1,9 @@ +This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. + +```typescript +app.get("/debug-sentry", async (c) => { + throw new Error("My first Sentry error!"); +}); +``` + +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved.