docs(js): Create general Cloudflare Quick Start guide (#14541)

<!-- Use this checklist to make sure your PR is ready for merge. You may
delete any sections you don't need. -->

## DESCRIBE YOUR PR
This PR contains the updated Cloudflare Quick Start guide (for
general/non-framework setup).

I removed the parts about Durable Objects and Workflows (they were
mostly links) and instead added a link to the Cloudflare-specific
feature page in the Next Steps section. Let me know if you think it
makes sense for the Quick Start Guide to add these removed parts back.

Note: I made small changes to the framework-specific guides -> they'll
get a quick start guide update later in separate PRs.

Closes: #14484 

## IS YOUR CHANGE URGENT?  

Help us prioritize incoming PRs by letting us know when the change needs
to go live.
- [ ] Urgent deadline (GA date, etc.): <!-- ENTER DATE HERE -->
- [ ] Other deadline: <!-- ENTER DATE HERE -->
- [x] None: Not urgent, can wait up to 1 week+

## SLA

- Teamwork makes the dream work, so please add a reviewer to your PRs.
- Please give the docs team up to 1 week to review your PR unless you've
added an urgent due date to it.
Thanks in advance for your help!

## PRE-MERGE CHECKLIST

*Make sure you've checked the following before merging your changes:*

- [ ] Checked Vercel preview for correctness, including links
- [ ] PR was reviewed and approved by any necessary SMEs (subject matter
experts)
- [ ] PR was reviewed and approved by a member of the [Sentry docs
team](https://github.com/orgs/getsentry/teams/docs)

## EXTRA RESOURCES

- [Sentry Docs contributor guide](https://docs.sentry.io/contributing/)

Author: inventarSarah

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

@@ -15,6 +15,8 @@ After installing the Sentry Astro SDK, you can now install the Sentry Cloudflare
 
 ## Setup
 
+The main Sentry configuration should happen as early as possible in your app's lifecycle.
+
 <PlatformContent includePath="getting-started-config" />
 
 Then create a `functions` directory and add a `_middleware.js` file to it with the following code:
@@ -33,4 +35,4 @@ export const onRequest = [
   })),
   // Add more middlewares here
 ];
-```
+```

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

@@ -11,12 +11,23 @@ This guide explains how to set up Sentry in your Hono application running on Clo
 
 ## Setup
 
+The main Sentry configuration should happen as early as possible in your app's lifecycle.
+
 <PlatformContent includePath="getting-started-config" />
 
-<PlatformContent includePath="getting-started-config" platform="javascript.cloudflare.workers" />
+<PlatformContent
+  includePath="getting-started-config"
+  platform="javascript.cloudflare.workers"
+/>
 
-<PlatformContent includePath="getting-started-config" platform="javascript.hono" />
+<PlatformContent
+  includePath="getting-started-config"
+  platform="javascript.hono"
+/>
 
 ## Verify
 
-<PlatformContent includePath="getting-started-verify" platform="javascript.hono" />
+<PlatformContent
+  includePath="getting-started-verify"
+  platform="javascript.hono"
+/>

docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx

@@ -24,6 +24,8 @@ If you installed the SDK before, make sure that `@sentry/nuxt` version `9.37.0`
 
 ## Setup
 
+The main Sentry configuration should happen as early as possible in your app's lifecycle.
+
 <PlatformContent includePath="getting-started-config" />
 
 ### Adding the Nitro Plugin
@@ -56,5 +58,3 @@ export default defineNitroPlugin(sentryCloudflareNitroPlugin((nitroApp: NitroApp
   }
 }))
 ```
-
-

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

@@ -23,6 +23,8 @@ Now you can install the Sentry Cloudflare SDK. First, install the SDK with your
 
 ## Setup
 
+The main Sentry configuration should happen as early as possible in your app's lifecycle.
+
 <PlatformContent includePath="getting-started-config" />
 
 Then create a `_middleware.js` file in your `functions` directory and add the following code:
@@ -39,4 +41,4 @@ export const onRequest = [
   })),
   // Add more middlewares here
 ];
-```
+```

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

@@ -23,6 +23,8 @@ If you installed the SDK before, make sure that `@sentry/sveltekit` version `9.2
 
 ## Setup
 
+The main Sentry configuration should happen as early as possible in your app's lifecycle.
+
 <PlatformContent includePath="getting-started-config" />
 
 Next, 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`.

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

@@ -1,6 +1,6 @@
 ---
 title: Cloudflare
-description: "Official Sentry SDK for Cloudflare Workers and Cloudflare Pages."
+description: "Learn how to manually set up Sentry for Cloudflare Workers and Cloudflare Pages and capture your first errors."
 sdk: sentry.javascript.cloudflare
 categories:
   - javascript
@@ -9,7 +9,7 @@ categories:
   - serverless
 ---
 
-You can use the Sentry Cloudflare SDK with popular frameworks running on Cloudflare:
+Use this guide for general instructions on using the Sentry SDK with Cloudflare. If you're using any of the listed frameworks, follow their specific setup instructions:
 
 - **[Astro](frameworks/astro/)**
 - **[Hono](frameworks/hono/)**
@@ -18,36 +18,41 @@ You can use the Sentry Cloudflare SDK with popular frameworks running on Cloudfl
 - **[Remix](frameworks/remix/)**
 - **[SvelteKit](frameworks/sveltekit/)**
 
-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/).
+<PlatformContent includePath="getting-started-prerequisites" />
 
-If you're not using one of these frameworks, or are just looking for general instructions for Cloudflare usage, you're in the right place.
+## Step 1: Install
 
-## Features
-
-In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/).
-
-Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below.
+Choose the features you want to configure, and this guide will show you how:
 
 <OnboardingOptionButtons
   options={["error-monitoring", "performance", "logs"]}
 />
 
-## Install
+<PlatformContent includePath="getting-started-features-expandable" />
+
+### Install the Sentry SDK
+
+Run the command for your preferred package manager to add the Sentry SDK to your application:
 
 <PlatformContent includePath="getting-started-install" />
 
-## Setup
+## Step 2: Configure
+
+The main Sentry configuration should happen as early as possible in your app's lifecycle.
+
+### Wrangler Configuration
 
 <PlatformContent includePath="getting-started-config" />
 
-### Setup (Cloudflare Workers)
+### Setup for Cloudflare Workers
 
 <PlatformContent
   includePath="getting-started-config"
   platform="javascript.cloudflare.workers"
 />
 
-If you do not have access to the `onRequest` middleware API, you can use the `wrapRequestHandler` API instead. For example:
+<Expandable title="Don't have access to onRequest?">
+If you don't have access to the `onRequest` middleware API, you can use the `wrapRequestHandler` API instead. For example:
 
 ```javascript
 // hooks.server.js
@@ -66,12 +71,12 @@ export const handle = ({ event, resolve }) => {
 };
 ```
 
-### Setup (Cloudflare Pages)
+</Expandable>
 
-To use this SDK, add the `sentryPagesPlugin` as [middleware to your Cloudflare Pages application](https://developers.cloudflare.com/pages/functions/middleware/).
+### Setup for Cloudflare Pages
 
-We recommend adding a `functions/_middleware.js` for the middleware setup so that Sentry is initialized for your entire
-app.
+To use the Sentry SDK, add the `sentryPagesPlugin` as [middleware to your Cloudflare Pages application](https://developers.cloudflare.com/pages/functions/middleware/).
+For this, we recommend you create a `functions/_middleware.js` file to set up the middleware for your entire app:
 
 ```javascript {filename:functions/_middleware.js}
 import * as Sentry from "@sentry/cloudflare";
@@ -94,11 +99,11 @@ export const onRequest = [
       // 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/configuration/options/#traces-sample-rate
+      // https://docs.sentry.io/platforms/javascript/guides/cloudflare/configuration/options/#tracesSampleRate
       tracesSampleRate: 1.0,
       // ___PRODUCT_OPTION_END___ performance
     };
@@ -107,58 +112,135 @@ export const onRequest = [
 ];
 ```
 
-### Cloudflare Durable Objects
+## Step 3: Add Readable Stack Traces With Source Maps (Optional)
 
-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.
+The stack traces in your Sentry errors probably won't look like your actual code. To fix this, upload your source maps to Sentry.
 
-See the [Cloudflare Durable Objects](features/durableobject/) guide for more information.
+First, set the `upload_source_maps` option to `true` in your `wrangler.(jsonc|toml)` config file to enable source map uploading:
 
-### Cloudflare Workflows
+```jsonc {tabTitle:JSON} {filename:wrangler.jsonc}
+{
+  "upload_source_maps": true,
+}
+```
 
-You can use the `instrumentWorkflowWithSentry` method to instrument [Cloudflare Workflows](https://developers.cloudflare.com/workflows/). This will need to be done alongside the worker setup.
+```toml {tabTitle:Toml} {filename:wrangler.toml}
+upload_source_maps = true
+```
 
-See the [Cloudflare Workflows](features/workflows/) guide for more information.
+Next, run the Sentry Wizard to finish your setup:
 
-## Add Readable Stack Traces to Errors
+```bash
+npx @sentry/wizard@latest -i sourcemaps
+```
 
-Depending on how you've set up your project, the stack traces in your Sentry errors probably don't look like your actual code.
+## Step 4: Verify Your Setup
 
-To fix this, upload your source maps to Sentry.
+Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
 
-To start, set the `upload_source_maps` option to `true` in your wrangler config file to enable source map uploading.
+### Issues
 
-```jsonc {tabTitle:JSON} {filename:wrangler.jsonc}
-{
-  "upload_source_maps": true,
+First, let's make sure Sentry is correctly capturing errors and creating issues in your project.
+
+#### Cloudflare Workers
+
+Add the following code snippet to your main worker file to create a `/debug-sentry` route that triggers an error when called:
+
+```javascript {filename:index.js}
+export default {
+  async fetch(request) {
+    const url = new URL(request.url);
+
+    if (url.pathname === "/debug-sentry") {
+      throw new Error("My first Sentry error!");
+    }
+
+    // Your existing routes and logic here...
+    return new Response("...");
+  },
+};
+```
+
+#### Cloudflare Pages
+
+Create a new route that throws an error when called by adding the following code snippet to a file in your `functions` directory, such as `functions/debug-sentry.js`:
+
+```javascript {filename:debug-sentry.js}
+export async function onRequest(context) {
+  throw new Error("My first Sentry error!");
 }
 ```
 
-```toml {tabTitle:Toml} {filename:wrangler.toml}
-upload_source_maps = true
+<OnboardingOption optionId="performance">
+### Tracing
+To test your tracing configuration, update the previous code snippet by starting a trace to measure the time it takes to run your code.
+
+#### Cloudflare Workers
+
+```javascript {filename:index.js}
+export default {
+  async fetch(request) {
+    const url = new URL(request.url);
+
+    if (url.pathname === "/debug-sentry") {
+      await Sentry.startSpan(
+        {
+          op: "test",
+          name: "My First Test Transaction",
+        },
+        async () => {
+          await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for 100ms
+          throw new Error("My first Sentry error!");
+        }
+      );
+    }
+
+    // Your existing routes and logic here...
+    return new Response("...");
+  },
+};
+```
+
+#### Cloudflare Pages
+
+```javascript {filename:debug-sentry.js}
+export async function onRequest(context) {
+  await Sentry.startSpan(
+    {
+      op: "test",
+      name: "My First Test Transaction",
+    },
+    async () => {
+      await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for 100ms
+      throw new Error("My first Sentry error!");
+    }
+  );
+}
 ```
 
-Then run the Sentry Wizard to finish your setup:
+</OnboardingOption>
 
-<Include name="sourcemaps-wizard-instructions.mdx" />
+### View Captured Data in Sentry
 
-For more information on source maps or for more options to upload them, head over to our <PlatformLink to="/sourcemaps/">Source Maps</PlatformLink> documentation.
+Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear).
 
-## Verify
+<PlatformContent includePath="getting-started-verify-locate-data" />
 
-This snippet includes an intentional error, so you can test that everything is working as soon as you set it up.
+## Next Steps
 
-Verify your setup by adding the following snippet anywhere in your code and running it:
+At this point, you should have integrated Sentry and should already be sending data to your Sentry project.
 
-```javascript
-setTimeout(() => {
-  throw new Error();
-});
-```
+Now's a good time to customize your setup and look into more advanced topics. Our next recommended steps for you are:
 
-<Alert>
+- Learn how to [manually capture errors](/platforms/javascript/guides/cloudflare/usage/)
+- Continue to [customize your configuration](/platforms/javascript/guides/cloudflare/configuration/)
+- Make use of [Cloudflare-specific features](/platforms/javascript/guides/cloudflare/features)
+- Get familiar with [Sentry's product features](/product) like tracing, insights, and alerts
 
-Learn more about manually capturing an error or message in our <PlatformLink to="/usage/">Usage documentation</PlatformLink>.
+<Expandable permalink={false} title="Are you having problems setting up the SDK?">
 
-</Alert>
+- Check out setup instructions for popular [frameworks on Cloudflare](/platforms/javascript/guides/cloudflare/frameworks/)
+- Find various support topics in <PlatformLink to="/troubleshooting">troubleshooting</PlatformLink>
+- [Get support](https://sentry.zendesk.com/hc/en-us/)
 
-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.
+</Expandable>

platform-includes/getting-started-config/javascript.cloudflare.mdx

@@ -1,6 +1,4 @@
-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.jsonc` / `wrangler.toml` config. This is because the SDK needs access to the `AsyncLocalStorage` API to work correctly.
+Since the SDK needs access to the `AsyncLocalStorage` API, you need to set either the `nodejs_compat` or `nodejs_als` compatibility flags in your `wrangler.(jsonc|toml)` configuration file:
 
 ```jsonc {tabTitle:JSON} {filename:wrangler.jsonc}
 {
@@ -16,13 +14,13 @@ compatibility_flags = ["nodejs_als"]
 # compatibility_flags = ["nodejs_compat"]
 ```
 
-You will also want to add the `CF_VERSION_METADATA` binding:
+Additionally, add the `CF_VERSION_METADATA` binding in the same file:
 
 ```jsonc {tabTitle:JSON} {filename:wrangler.jsonc}
 {
   // ...
   "version_metadata": {
-    "binding": "CF_VERSION_METADATA"
+    "binding": "CF_VERSION_METADATA",
   },
 }
 ```