update Browser JS quick start guide

Author: inventarSarah

docs/platforms/javascript/common/index.mdx

@@ -1,28 +1,32 @@
-<PlatformContent includePath="getting-started-primer" />
-
 <PlatformSection noGuides>
 
 <PlatformContent includePath="llm-rules-platform" />
 
-<Alert title="Using a framework?">
+<Alert title="Using a framework?" level="warning">
 
-Check out the other SDKs we support in the left-hand dropdown.
+This guide focuses on plain JavaScript. If you're working with React, Next.js, or any other framework, choose the fitting SDK from the left-hand dropdown.
 
 </Alert>
 
 <PlatformContent includePath="getting-started-primer" />
 
 </PlatformSection>
 
-<PlatformSection supported={["javascript", "javascript.angular", "javascript.nextjs", "javascript.remix", "javascript.sveltekit", "javascript.bun", "javascript.ember", "javascript.angular", "javascript.deno","javascript.nuxt", "javascript.react", "javascript.solid", "javascript.svelte", "javascript.vue"]}>
+<PlatformSection supported={["javascript"]}>
+  <PlatformContent includePath="getting-started-complete" />
+</PlatformSection>
+
+<PlatformSection notSupported={["javascript"]}>
+
+<PlatformSection supported={["javascript.angular", "javascript.nextjs", "javascript.remix", "javascript.sveltekit", "javascript.bun", "javascript.ember", "javascript.angular", "javascript.deno","javascript.nuxt", "javascript.react", "javascript.solid", "javascript.svelte", "javascript.vue"]}>
 
 <PlatformContent includePath="getting-started-prerequisites" />
 
 </PlatformSection>
 
 <PlatformSection notSupported={["javascript.deno"]}>
 
-<PlatformSection notSupported={["javascript", "javascript.astro", "javascript.cordova", "javascript.nextjs", "javascript.nuxt", "javascript.remix", "javascript.solidstart", "javascript.sveltekit", "javascript.bun", "javascript.cloudflare", "javascript.react-router"]}>
+<PlatformSection notSupported={["javascript.astro", "javascript.cordova", "javascript.nextjs", "javascript.nuxt", "javascript.remix", "javascript.solidstart", "javascript.sveltekit", "javascript.bun", "javascript.cloudflare", "javascript.react-router"]}>
 
 ## Features
 
@@ -32,27 +36,23 @@ Select which Sentry features you'd like to install in addition to Error Monitori
 
 </PlatformSection>
 
-<PlatformSection supported={["javascript.nextjs"]}>
-
 ## Step 1: Install
 
-</PlatformSection>
-
-<PlatformSection notSupported={["javascript.nextjs"]}>
-
-## Install
-
-</PlatformSection>
-
 <PlatformCategorySection notSupported={["server"]}>
-  <PlatformSection notSupported={["javascript", "javascript.cordova"]}>
+  <PlatformSection notSupported={["javascript"]}>
     <OnboardingOptionButtons
-      options={["error-monitoring", "performance", "session-replay", "user-feedback", "logs"]}
+      options={[
+        "error-monitoring",
+        "performance",
+        "session-replay",
+        "user-feedback",
+        "logs",
+      ]}
     />
   </PlatformSection>
 </PlatformCategorySection>
 
-<PlatformSection notSupported={["javascript", "javascript.astro", "javascript.cordova", "javascript.nextjs", "javascript.nuxt", "javascript.remix", "javascript.sveltekit", "javascript.bun", "javascript.capacitor", "javascript.ember", "javascript.angular", "javascript.react", "javascript.solid", "javascript.solidstart", "javascript.svelte", "javascript.vue", "javascript.cloudflare", "javascript.react-router"]}>
+<PlatformSection notSupported={["javascript.astro", "javascript.cordova", "javascript.nextjs", "javascript.nuxt", "javascript.remix", "javascript.sveltekit", "javascript.bun", "javascript.capacitor", "javascript.ember", "javascript.angular", "javascript.react", "javascript.solid", "javascript.solidstart", "javascript.svelte", "javascript.vue", "javascript.cloudflare", "javascript.react-router"]}>
 
 In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also collect and analyze performance profiles from real users with [profiling](/product/explore/profiling/).
 
@@ -140,3 +140,4 @@ To view and resolve the recorded error, log into [sentry.io](https://sentry.io)
 </PlatformSection>
 
 <PlatformContent includePath="getting-started-next-steps" />
+</PlatformSection>

docs/platforms/javascript/config.yml

@@ -1,4 +1,5 @@
 title: Browser JavaScript
+description: Learn how to manually set up Sentry in your JavaScript app and capture your first errors.
 platformTitle: JavaScript
 sidebar_title: JavaScript
 caseStyle: camelCase

platform-includes/getting-started-complete/javascript.mdx

@@ -0,0 +1,61 @@
+<PlatformContent includePath="getting-started-prerequisites" />
+
+## Step 1: Install
+
+Choose the features you want to configure, and this guide will show you how:
+
+<OnboardingOptionButtons
+  options={[
+    "error-monitoring",
+    "performance",
+    "session-replay",
+    "user-feedback",
+    "logs",
+  ]}
+/>
+
+<PlatformContent includePath="getting-started-features-expandable" />
+
+### Install the Sentry SDK
+
+<PlatformContent includePath="getting-started-install" />
+
+## Step 2: Configure
+
+### Initialize the Sentry SDK
+
+<PlatformContent includePath="getting-started-config" />
+
+## Step 3: Add Readable Stack Traces With Source Maps (Optional)
+
+<PlatformContent includePath="getting-started-sourcemaps-short-version" />
+
+## Step 4: Avoid Ad Blockers With Tunneling (Optional)
+
+<PlatformContent includePath="getting-started-tunneling" />
+
+## Step 5: Verify Your Setup
+
+<PlatformContent includePath="getting-started-verify" />
+
+### View Captured Data in Sentry
+
+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).
+
+<PlatformContent includePath="getting-started-verify-locate-data" />
+
+At this point, you should have integrated Sentry into your JavaScript application and should already be sending data to your Sentry project.
+
+Now's a good time to customize your setup and look into more advanced topics. Our next recommended steps for you are:
+
+- Extend Sentry to your backend using one of our [SDKs](/)
+- Learn how to [manually capture errors](/platforms/javascript/usage/)
+- Continue to [customize your configuration](/platforms/javascript/configuration/)
+- Get familiar with [Sentry's product features](/product) like tracing, insights, and alerts
+
+<Expandable permalink={false} title="Are you having problems setting up the SDK?">
+
+- Find various support topics in <PlatformLink to="/troubleshooting">troubleshooting</PlatformLink>
+- [Get support](https://sentry.zendesk.com/hc/en-us/)
+
+</Expandable>

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

@@ -1,16 +1,4 @@
-<OnboardingOptionButtons
-  options={[
-    "error-monitoring",
-    "performance",
-    "session-replay",
-    "user-feedback",
-    "logs",
-  ]}
-/>
-
-Once this is done, Sentry's JavaScript SDK will capture all unhandled exceptions, transactions, and Session Replays, based on the sample rates set.
-
-Note, that configuration differs slightly depending on how you installed the Sentry SDK. Make sure to follow the instructions in the correct tab, depending on if you installed the Sentry SDK via NPM, using the Loader Script, or via CDN.
+Initialize Sentry as early as possible in your application's lifecycle. The setup differs slightly depending on how you installed the Sentry SDK. Be sure to follow the instructions in the right tab:
 
 ```javascript {tabTitle:npm}
 import * as Sentry from "@sentry/browser";
@@ -39,13 +27,13 @@ Sentry.init({
     }),
     // ___PRODUCT_OPTION_END___ user-feedback
   ],
-
   // ___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 transactions for tracing.
   // We recommend adjusting this value in production
@@ -56,8 +44,8 @@ Sentry.init({
   // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
   tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
   // ___PRODUCT_OPTION_END___ performance
-
   // ___PRODUCT_OPTION_START___ session-replay
+
   // Capture Replay for 10% of all sessions,
   // plus for 100% of sessions with an error
   // Learn more at
@@ -100,13 +88,13 @@ Sentry.init({
         }),
         // ___PRODUCT_OPTION_END___ user-feedback
       ],
-
       // ___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 transactions for tracing.
       // We recommend adjusting this value in production
@@ -117,8 +105,8 @@ Sentry.init({
       // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
       tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
       // ___PRODUCT_OPTION_END___ performance
-
       // ___PRODUCT_OPTION_START___ session-replay
+
       // Capture Replay for 10% of all sessions,
       // plus for 100% of sessions with an error
       // Learn more at
@@ -163,13 +151,13 @@ Sentry.init({
       }),
       // ___PRODUCT_OPTION_END___ user-feedback
     ],
-
     // ___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 transactions for tracing.
     // We recommend adjusting this value in production
@@ -180,8 +168,8 @@ Sentry.init({
     // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
     tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
     // ___PRODUCT_OPTION_END___ performance
-
     // ___PRODUCT_OPTION_START___ session-replay
+
     // Capture Replay for 10% of all sessions,
     // plus for 100% of sessions with an error
     // Learn more at

platform-includes/getting-started-install/javascript.mdx

@@ -1,16 +1,8 @@
-In order to get started using the Sentry JavaScript SDK, add the following code to the top of your application, before all other scripts:
+We recommend installing Sentry via a package manager. If that isn't an option for you, you can use the [Loader Script](/platforms/javascript/install/loader/) or a CDN bundle.
 
+#### Option 1: Packet Manager (Recommended)
 
-```html
-<script
-  src="https://js.sentry-cdn.com/___PUBLIC_KEY___.min.js"
-  crossorigin="anonymous"
-></script>
-```
-
-The Loader Script allows you to configure some SDK features from the Sentry UI, without having to redeploy your application. The [Loader Script documentation](/platforms/javascript/install/loader/) shows more information about how to use it.
-
-Alternatively, you can also install the SDK via a package manager:
+Run the command for your preferred package manager to add the Sentry SDK to your application:
 
 ```bash {tabTitle:npm}
 npm install @sentry/browser --save
@@ -24,12 +16,20 @@ yarn add @sentry/browser
 pnpm add @sentry/browser
 ```
 
-<Alert>
+#### Option 2: Loader Script
 
-We also support installation via [CDN bundles](/platforms/javascript/install/loader/#cdn).
+In Sentry, go to
+**Settings > Projects > (select project) > SDK Setup > Loader Script**.
+Enable the features you want (for example, Tracing or Session Replay), copy the script tag, and place it before all other scripts in your app.
 
-</Alert>
+#### Option 3: CDN Bundle
 
-If you're updating your Sentry SDK to the latest version, check out our [migration guide](https://github.com/getsentry/sentry-javascript/blob/master/MIGRATION.md) to learn more about breaking changes.
+Sentry provides different bundles that include specific feature combinations. Go to our list of [available bundles](/platforms/javascript/install/loader/#cdn) and copy the one that fits your needs.
+Next, place the script tag before all other scripts in your app.
 
-If you are using our previous Browser JavaScript SDK, you can access the <Link rel={`nofollow`} to={`/platforms/javascript/legacy-sdk/`}>legacy SDK documentation</Link>, until further notice.
+<Alert>
+  If you're updating your Sentry SDK to the latest version, check out our
+  [migration
+  guide](https://github.com/getsentry/sentry-javascript/blob/master/MIGRATION.md)
+  to learn more about breaking changes.
+</Alert>

platform-includes/getting-started-verify/javascript.mdx

@@ -1,11 +1,46 @@
-```javascript
-setTimeout(() => {
-  throw new Error("Sentry Test Error");
-});
+Let's test your setup and confirm that data reaches your Sentry project.
+
+### Issues
+
+To verify that Sentry captures errors and creates issues in your Sentry project, add a button that throws an error when clicked:
+
+```html
+<script>
+  function triggerError() {
+    throw new Error("Sentry Test Error");
+  }
+</script>
+
+<button onclick="triggerError()">Break the World</button>
 ```
 
-<Alert>
+<OnboardingOption optionId="performance" hideForThisOption>
+  Open the page in a browser and click the button to throw an error.
+</OnboardingOption>
+
+<PlatformContent includePath="getting-started-browser-sandbox-warning" />
+
+<OnboardingOption optionId="performance">
+### Tracing
+To test your tracing configuration, update the previous code to simulate a longer operation and start a trace:
+
+```html
+<script>
+  function triggerError() {
+       await Sentry.startSpan(
+        { name: "Example Frontend Span", op: "test" },
+        async () => {
+          await new Promise(resolve => setTimeout(resolve, 200));
+
+          throw new Error("Sentry Test Error");
+        },
+      );
+     }
+</script>
+
+<button onclick="triggerError()">Break the World</button>
+```
 
-Errors triggered from within Browser DevTools are sandboxed and won't trigger an error handler. Place the snippet directly in your code instead.
+Open the page in a browser and click the button to throw an error and create a trace.
 
-</Alert>
+</OnboardingOption>