Update cloudflare config snippets to use jsonc (#13257)

AbhiPrasad · web-flow · commit 901895da9de8 · 2025-04-07T16:56:54.000+02:00
* Update cloudflare config snippets to use jsonc

* use jsonc everywhere

* more re-ordering
diff --git a/docs/platforms/javascript/guides/cloudflare/features/d1.mdx b/docs/platforms/javascript/guides/cloudflare/features/d1.mdx
@@ -9,7 +9,7 @@ Cloudflare's serverless SQL database with Sentry.
 ```javascript
 import * as Sentry from "@sentry/cloudflare";
 
-// env.DB is the D1 DB binding configured in your `wrangler.toml`
+// env.DB is the D1 DB binding configured in your `wrangler.jsonc`/`wrangler.toml` config
 const db = Sentry.instrumentD1WithSentry(env.DB);
 // Now you can use the database as usual
 await db.prepare("SELECT * FROM table WHERE id = ?").bind(1).run();
diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/astro.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/astro.mdx
@@ -11,10 +11,24 @@ After installing the Sentry Astro SDK, you can now install the Sentry Cloudflare
 
 <PlatformContent includePath="getting-started-install" />
 
-To use the SDK, you'll need to set either the `nodejs_compat` or `nodejs_als` compatibility flags in your `wrangler.toml`. This is because the SDK
+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.
 
-```toml {filename:wrangler.toml}
+```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"]
 ```
@@ -30,7 +44,7 @@ export const onRequest = [
     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
+    // 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/remix.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/remix.mdx
@@ -23,12 +23,21 @@ Now you can install the Sentry Cloudflare SDK. First, install the SDK with your
 
 <PlatformContent includePath="getting-started-install" />
 
-To use the SDK, you'll need to set either the `nodejs_compat` or `nodejs_als` compatibility flags in your `wrangler.toml`. This is because the SDK
+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.
 
-```toml {filename:wrangler.toml}
-compatibility_flags = ["nodejs_compat"]
-# compatibility_flags = ["nodejs_als"]
+```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:
diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/sveltekit.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/sveltekit.mdx
@@ -23,12 +23,21 @@ If you installed the SDK before, make sure that `@sentry/sveltekit` version `9.2
 
 ## 2. Cloudflare configuration
 
-To use the SDK, you'll need to set either the `nodejs_compat` or `nodejs_als` compatibility flags in your `wrangler.toml`. This is because the SDK
+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.
 
-```toml {filename:wrangler.toml}
-compatibility_flags = ["nodejs_compat"]
-# compatibility_flags = ["nodejs_als"]
+```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
diff --git a/docs/platforms/javascript/guides/cloudflare/index.mdx b/docs/platforms/javascript/guides/cloudflare/index.mdx
@@ -1,6 +1,6 @@
 ---
 title: Cloudflare
-description: 'Official Sentry SDK for Cloudflare Workers and Cloudflare Pages.'
+description: "Official Sentry SDK for Cloudflare Workers and Cloudflare Pages."
 sdk: sentry.javascript.cloudflare
 categories:
   - javascript
@@ -11,7 +11,9 @@ categories:
 
 ## Install
 
-<OnboardingOptionButtons options={["error-monitoring", "performance", "profiling"]} />
+<OnboardingOptionButtons
+  options={["error-monitoring", "performance", "profiling"]}
+/>
 
 In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/).
 
@@ -35,24 +37,23 @@ pnpm add @sentry/cloudflare
 
 Configuration should happen as early as possible in your application's lifecycle.
 
-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
+To use the SDK, you'll need to set either the `nodejs_compat` or `nodejs_als` compatibility flags in your `wrangler.jsonc`/`wrangler.toml` config. This is because the SDK
 needs access to the `AsyncLocalStorage` API to work correctly.
 
-
-```toml {tabTitle:Toml} {filename:wrangler.toml}
-compatibility_flags = ["nodejs_compat"]
-# compatibility_flags = ["nodejs_als"]
-```
-
-```json {tabTitle:JSON} {filename:wrangler.json}
+```jsonc {tabTitle:JSON} {filename:wrangler.jsonc}
 {
   "compatibility_flags": [
-    "nodejs_compat",
-    // "nodejs_als"
-  ]
+    "nodejs_als",
+    // "nodejs_compat"
+  ],
 }
 ```
 
+```toml {tabTitle:Toml} {filename:wrangler.toml}
+compatibility_flags = ["nodejs_als"]
+# compatibility_flags = ["nodejs_compat"]
+```
+
 Then you can install the SDK and add it to your project:
 
 You can either setup up the SDK for [Cloudflare Pages](#setup-cloudflare-pages) or [Cloudflare Workers](#setup-cloudflare-workers).
@@ -89,7 +90,7 @@ environment. Note that you can turn off almost all side effects using the respec
 import * as Sentry from "@sentry/cloudflare";
 
 export default Sentry.withSentry(
-  env => ({
+  (env) => ({
     dsn: "___PUBLIC_DSN___",
     // Set tracesSampleRate to 1.0 to capture 100% of spans for tracing.
     // Learn more at
@@ -100,7 +101,7 @@ export default Sentry.withSentry(
     async fetch(request, env, ctx) {
       return new Response("Hello World!");
     },
-  } satisfies ExportedHandler<Env>,
+  } satisfies ExportedHandler<Env>
 );
 ```
 
diff --git a/docs/platforms/javascript/guides/hono/index.mdx b/docs/platforms/javascript/guides/hono/index.mdx
@@ -20,7 +20,9 @@ In addition to capturing errors, you can monitor interactions between multiple s
 
 Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below.
 
-<OnboardingOptionButtons options={["error-monitoring", "performance", "profiling"]} />
+<OnboardingOptionButtons
+  options={["error-monitoring", "performance", "profiling"]}
+/>
 
 ## Setup
 
@@ -40,23 +42,23 @@ yarn add @sentry/cloudflare
 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.
+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.
 
-```toml {tabTitle:Toml} {filename:wrangler.toml}
-compatibility_flags = ["nodejs_compat"]
-# compatibility_flags = ["nodejs_als"]
-```
-
-```json {tabTitle:JSON} {filename:wrangler.json}
+```jsonc {tabTitle:JSON} {filename:wrangler.jsonc}
 {
   "compatibility_flags": [
-    "nodejs_compat"
-    // "nodejs_als"
-  ]
+    "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.
 
@@ -101,20 +103,20 @@ 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.
 
-```toml {tabTitle:Toml} {filename:wrangler.toml}
-compatibility_flags = ["nodejs_compat"]
-# compatibility_flags = ["nodejs_als"]
-```
-
-```json {tabTitle:JSON} {filename:wrangler.json}
+```jsonc {tabTitle:JSON} {filename:wrangler.jsonc}
 {
   "compatibility_flags": [
-    "nodejs_compat"
+    "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/).
 
diff --git a/platform-includes/sourcemaps/primer/javascript.cloudflare.mdx b/platform-includes/sourcemaps/primer/javascript.cloudflare.mdx
@@ -3,4 +3,14 @@ Learn how to unminify your JavaScript code by watching this video or reading the
 
 <VimeoEmbed id="956055420?h=f428eeda43" />
 
-If you are using plain Cloudflare Workers, set `upload_source_maps = true` to your `wrangler.toml` file to enable source map generation.
+If you are using plain Cloudflare Workers, set `upload_source_maps = true` in your `wrangler.jsonc`/`wrangler.toml` config file to enable source map generation.
+
+```jsonc {tabTitle:JSON} {filename:wrangler.jsonc}
+{
+  "upload_source_maps": true,
+}
+```
+
+```toml {tabTitle:Toml} {filename:wrangler.toml}
+upload_source_maps = true
+```
