Skip to content

Commit 6a97429

Browse files
codydecodyde
authored
Fix - Restoring Cloudflare Framework Guides (#13947)
Adding back sveltekit, remix, and astro Cloudflare guides
1 parent 2031834 commit 6a97429

File tree

5 files changed

+185
-3
lines changed

5 files changed

+185
-3
lines changed

‎docs/platforms/javascript/guides/cloudflare/frameworks/astro.mdx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
title: Cloudflare Astro Framework Guide
3+
description: "Learn how to add Cloudflare instrumentation to your Astro app."
4+
---
5+
6+
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.
7+
8+
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.
9+
10+
After installing the Sentry Astro SDK, you can now install the Sentry Cloudflare SDK. First, install the SDK with your package manager:
11+
12+
<PlatformContent includePath="getting-started-install" />
13+
14+
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
15+
needs access to the `AsyncLocalStorage` API to work correctly.
16+
17+
```jsonc {tabTitle:JSON} {filename:wrangler.jsonc}
18+
{
19+
"compatibility_flags": [
20+
"nodejs_als",
21+
// "nodejs_compat"
22+
],
23+
}
24+
```
25+
26+
```toml {tabTitle:Toml} {filename:wrangler.toml}
27+
compatibility_flags = ["nodejs_als"]
28+
# compatibility_flags = ["nodejs_compat"]
29+
```
30+
31+
```toml {tabTitle:Toml} {filename:wrangler.toml}
32+
compatibility_flags = ["nodejs_compat"]
33+
# compatibility_flags = ["nodejs_als"]
34+
```
35+
36+
Then create a `functions` directory and add a `_middleware.js` file to it with the following code:
37+
38+
```javascript {filename:functions/_middleware.js}
39+
import * as Sentry from "@sentry/cloudflare";
40+
41+
export const onRequest = [
42+
// Make sure Sentry is the first middleware
43+
Sentry.sentryPagesPlugin((context) => ({
44+
dsn: "___PUBLIC_DSN___",
45+
// Set tracesSampleRate to 1.0 to capture 100% of spans for tracing.
46+
// Learn more at
47+
// https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
48+
tracesSampleRate: 1.0,
49+
})),
50+
// Add more middlewares here
51+
];
52+
```

‎docs/platforms/javascript/guides/cloudflare/frameworks/hono.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2-
title: Hono on Cloudflare
3-
description: Learn how to set up Hono with Sentry on Cloudflare.
2+
title: Cloudflare Hono Framework Guide
3+
description: "Learn how to add Cloudflare instrumentation to your Hono app."
44
---
55

66
This guide explains how to set up Sentry in your Hono application running on Cloudflare Workers.

‎docs/platforms/javascript/guides/cloudflare/frameworks/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Frameworks on Cloudflare
3-
description: "Learn how to set up the Cloudflare SDK with popular Frameworks like SvelteKit or Remix."
3+
description: "Learn how to set up the Cloudflare SDK with popular Frameworks like Astro, SvelteKit, Remix, and Hono."
44
---
55

66
You can use the Sentry Cloudlare SDK in combination with Sentry meta-framework SDKs like SvelteKit or Remix to instrument your Cloudflare Pages applications that use these frameworks.

‎docs/platforms/javascript/guides/cloudflare/frameworks/remix.mdx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: Cloudflare Remix Framework Guide
3+
description: "Learn how to add Cloudflare instrumentation to your Remix app."
4+
---
5+
6+
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.
7+
8+
## 1. Installing Sentry Remix SDK
9+
10+
First, install the Sentry Remix SDK in your application. We recommend using the Sentry wizard to automatically install the SDK:
11+
12+
```bash
13+
npx @sentry/wizard@latest -i remix
14+
```
15+
16+
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/).
17+
18+
## 2. Installing Sentry Cloudflare SDK
19+
20+
After installing the Sentry Remix SDK, delete the newly generated `instrumentation.server.mjs` file. This instrumentation is not needed when using the Cloudflare SDK.
21+
22+
Now you can install the Sentry Cloudflare SDK. First, install the SDK with your package manager:
23+
24+
<PlatformContent includePath="getting-started-install" />
25+
26+
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
27+
needs access to the `AsyncLocalStorage` API to work correctly.
28+
29+
```jsonc {tabTitle:JSON} {filename:wrangler.jsonc}
30+
{
31+
"compatibility_flags": [
32+
"nodejs_als",
33+
// "nodejs_compat"
34+
],
35+
}
36+
```
37+
38+
```toml {tabTitle:Toml} {filename:wrangler.toml}
39+
compatibility_flags = ["nodejs_als"]
40+
# compatibility_flags = ["nodejs_compat"]
41+
```
42+
43+
Then create a `_middleware.js` file in your `functions` directory and add the following code:
44+
45+
```javascript {filename:functions/_middleware.js}
46+
import * as Sentry from "@sentry/cloudflare";
47+
48+
export const onRequest = [
49+
// Make sure Sentry is the first middleware
50+
Sentry.sentryPagesPlugin((context) => ({
51+
dsn: "___PUBLIC_DSN___",
52+
// Set tracesSampleRate to 1.0 to capture 100% of spans for tracing.
53+
tracesSampleRate: 1.0,
54+
})),
55+
// Add more middlewares here
56+
];
57+
```

‎docs/platforms/javascript/guides/cloudflare/frameworks/sveltekit.mdx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
title: Cloudflare Sveltekit Framework Guide
3+
description: "Learn how to add Cloudflare instrumentation to your SvelteKit app."
4+
---
5+
6+
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.
7+
8+
## 1. Install the SDK
9+
10+
First, install the Sentry SvelteKit SDK in your application. We recommend using the Sentry wizard to automatically install the SDK:
11+
12+
```bash
13+
npx @sentry/wizard@latest -i sveltekit
14+
```
15+
16+
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/).
17+
18+
<Alert>
19+
20+
If you installed the SDK before, make sure that `@sentry/sveltekit` version `9.2.0` or newer is installed.
21+
22+
</Alert>
23+
24+
## 2. Cloudflare configuration
25+
26+
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
27+
needs access to the `AsyncLocalStorage` API to work correctly.
28+
29+
```jsonc {tabTitle:JSON} {filename:wrangler.jsonc}
30+
{
31+
"compatibility_flags": [
32+
"nodejs_als",
33+
// "nodejs_compat"
34+
],
35+
}
36+
```
37+
38+
```toml {tabTitle:Toml} {filename:wrangler.toml}
39+
compatibility_flags = ["nodejs_als"]
40+
# compatibility_flags = ["nodejs_compat"]
41+
```
42+
43+
## 3. Update Your Server Hooks File
44+
45+
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`.
46+
47+
```typescript diff {filename:hooks.server.(ts|js)}
48+
-import { handleErrorWithSentry, sentryHandle } from "@sentry/sveltekit";
49+
+import { handleErrorWithSentry, sentryHandle, initCloudflareSentryHandle } from "@sentry/sveltekit";
50+
+import { sequence } from "@sveltejs/kit/hooks";
51+
import * as Sentry from '@sentry/sveltekit';
52+
53+
-Sentry.init({
54+
- dsn: '___PUBLIC_DSN___',
55+
- tracesSampleRate: 1.0,
56+
-
57+
- // uncomment the line below to enable Spotlight (https://spotlightjs.com)
58+
- // spotlight: import.meta.env.DEV,
59+
-});
60+
-
61+
-export const handle = sentryHandle();
62+
+export const handle = sequence(
63+
+ initCloudflareSentryHandle({
64+
+ dsn: '___PUBLIC_DSN___',
65+
+ tracesSampleRate: 1.0,
66+
+ }),
67+
+ sentryHandle()
68+
+);
69+
70+
export const handleError = handleErrorWithSentry(myErrorHandler);
71+
```
72+
73+
If you need to use environmental variables, you can access them using `event.platform.env`.

0 commit comments

Comments
 (0)