From 30e82e7a57a635792f3975ce4c3bc70b7097153c Mon Sep 17 00:00:00 2001
From: Sarah Mischinger <sarah@codingwriter.com>
Date: Tue, 24 Mar 2026 10:27:46 +0100
Subject: [PATCH] use split layout in browser JS quick start guide

---
 .../getting-started-complete/javascript.mdx   | 67 +++++++++++++---
 .../getting-started-config/javascript.mdx     | 16 ++++
 .../getting-started-install/javascript.mdx    | 14 ++++
 .../getting-started-verify/javascript.mdx     | 77 +++++++++++++++++--
 4 files changed, 155 insertions(+), 19 deletions(-)

diff --git a/platform-includes/getting-started-complete/javascript.mdx b/platform-includes/getting-started-complete/javascript.mdx
index 3cc6257b3b8d7..7ddf515703df2 100644
--- a/platform-includes/getting-started-complete/javascript.mdx
+++ b/platform-includes/getting-started-complete/javascript.mdx
@@ -1,7 +1,4 @@
 <PlatformContent includePath="getting-started-prerequisites" />
-
-## Step 1: Install
-
 Choose the features you want to configure, and this guide will show you how:
 
 <OnboardingOptionButtons
@@ -13,28 +10,72 @@ Choose the features you want to configure, and this guide will show you how:
     "logs",
   ]}
 />
-
 <Include name="quick-start-features-expandable" />
 
-### Install the Sentry SDK
+<StepConnector selector="h2" showNumbers={true}>
+
+## Install
 
 <PlatformContent includePath="getting-started-install" />
 
-## Step 2: Configure
+## Configure
 
 ### Initialize the Sentry SDK
 
 <PlatformContent includePath="getting-started-config" />
 
-## Step 3: Add Readable Stack Traces With Source Maps (Optional)
+### Add Readable Stack Traces With Source Maps (Optional)
+
+<SplitLayout>
+
+<SplitSection>
+
+<SplitSectionText>
+  The stack traces in your Sentry errors probably won't look like your actual
+  code without unminifying them. To fix this, upload your{" "}
+  <PlatformLink to="/sourcemaps/">source maps</PlatformLink> to Sentry. The
+  easiest way to do this is by using the Sentry Wizard.
+</SplitSectionText>
+
+<SplitSectionCode>
+
+```bash
+npx @sentry/wizard@latest -i sourcemaps
+```
+
+</SplitSectionCode>
 
-<PlatformContent includePath="getting-started-sourcemaps-short-version" />
+</SplitSection>
 
-## Step 4: Avoid Ad Blockers With Tunneling (Optional)
+</SplitLayout>
 
-<PlatformContent includePath="getting-started-tunneling" />
+### Avoid Ad Blockers With Tunneling (Optional)
 
-## Step 5: Verify Your Setup
+<SplitLayout>
+
+<SplitSection>
+
+<SplitSectionText>
+You can prevent ad blockers from blocking Sentry events using tunneling. Use the `tunnel` option in `Sentry.init` to add an API endpoint in your application that forwards Sentry events to Sentry servers.
+
+This will send all events to the `tunnel` endpoint. However, the events need to be parsed and redirected to Sentry, so you'll need to do additional configuration on the server. You can find a detailed explanation on how to do this on our <PlatformLink to="/troubleshooting/#using-the-tunnel-option"> Troubleshooting page</PlatformLink>.
+
+</SplitSectionText>
+
+<SplitSectionCode>
+```javascript {3}
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  tunnel: "/tunnel",
+});
+```
+</SplitSectionCode>
+
+</SplitSection>
+
+</SplitLayout>
+
+## Verify Your Setup
 
 <PlatformContent includePath="getting-started-verify" />
 
@@ -44,6 +85,8 @@ Now, head over to your project on [Sentry.io](https://sentry.io) to view the col
 
 <Include name="quick-start-locate-data-expandable" />
 
+## Next Steps
+
 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:
@@ -60,3 +103,5 @@ Now's a good time to customize your setup and look into more advanced topics. Ou
 - [Get support](https://sentry.zendesk.com/hc/en-us/)
 
 </Expandable>
+
+</StepConnector>
diff --git a/platform-includes/getting-started-config/javascript.mdx b/platform-includes/getting-started-config/javascript.mdx
index 14bf38cc7df69..e737f651cf9e4 100644
--- a/platform-includes/getting-started-config/javascript.mdx
+++ b/platform-includes/getting-started-config/javascript.mdx
@@ -1,5 +1,15 @@
+<SplitLayout>
+
+<SplitSection>
+
+<SplitSectionText>
+
 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 related tab (npm, Loader, CDN):
 
+</SplitSectionText>
+
+<SplitSectionCode>
+
 ```javascript {tabTitle:npm}
 import * as Sentry from "___SDK_PACKAGE___";
 
@@ -180,3 +190,9 @@ Sentry.init({
   });
 </script>
 ```
+
+</SplitSectionCode>
+
+</SplitSection>
+
+</SplitLayout>
diff --git a/platform-includes/getting-started-install/javascript.mdx b/platform-includes/getting-started-install/javascript.mdx
index 30f28af534aa6..355ae0efad4ae 100644
--- a/platform-includes/getting-started-install/javascript.mdx
+++ b/platform-includes/getting-started-install/javascript.mdx
@@ -1,9 +1,17 @@
 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.
 
+<SplitLayout>
+
+<SplitSection>
+
+<SplitSectionText>
 #### Option 1: Package Manager (Recommended)
 
 Run the command for your preferred package manager to add the Sentry SDK to your application:
 
+</SplitSectionText>
+<SplitSectionCode>
+
 ```bash {tabTitle:npm}
 npm install @sentry/browser --save
 ```
@@ -16,6 +24,12 @@ yarn add @sentry/browser
 pnpm add @sentry/browser
 ```
 
+</SplitSectionCode>
+
+</SplitSection>
+
+</SplitLayout>
+
 #### Option 2: Loader Script
 
 In Sentry, go to
diff --git a/platform-includes/getting-started-verify/javascript.mdx b/platform-includes/getting-started-verify/javascript.mdx
index fb6115f8f53a3..32e3492a2fd11 100644
--- a/platform-includes/getting-started-verify/javascript.mdx
+++ b/platform-includes/getting-started-verify/javascript.mdx
@@ -2,7 +2,22 @@ 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:
+<SplitLayout>
+
+<SplitSection>
+
+<SplitSectionText>
+To verify that Sentry captures errors and creates issues in your Sentry project, add a button that throws an error when clicked.
+
+<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" />
+
+</SplitSectionText>
+
+<SplitSectionCode>
 
 ```html
 <script>
@@ -14,15 +29,26 @@ To verify that Sentry captures errors and creates issues in your Sentry project,
 <button onclick="triggerError()">Break the World</button>
 ```
 
-<OnboardingOption optionId="performance" hideForThisOption>
-  Open the page in a browser and click the button to throw an error.
-</OnboardingOption>
+</SplitSectionCode>
 
-<PlatformContent includePath="getting-started-browser-sandbox-warning" />
+</SplitSection>
+
+</SplitLayout>
 
 <OnboardingOption optionId="performance">
 ### Tracing
-To test your tracing configuration, update the previous code to simulate a longer operation and start a trace:
+<SplitLayout>
+
+<SplitSection>
+
+<SplitSectionText>
+To test your tracing configuration, update the previous code to simulate a longer operation and start a trace.
+
+Open the page in a browser and click the button to throw an error and create a trace.
+
+</SplitSectionText>
+
+<SplitSectionCode>
 
 ```html
 <script>
@@ -41,12 +67,47 @@ To test your tracing configuration, update the previous code to simulate a longe
 <button onclick="triggerError()">Break the World</button>
 ```
 
-Open the page in a browser and click the button to throw an error and create a trace.
+</SplitSectionCode>
+
+</SplitSection>
+
+</SplitLayout>
 
 </OnboardingOption>
 
 <OnboardingOption optionId="logs">
 
-<Include name="logs/javascript-quick-start-verify-logs" />
+### Logs <FeatureBadge type="new" size="small" />
+
+<SplitLayout>
+
+<SplitSection>
+
+<SplitSectionText>
+To verify that Sentry catches your logs, add some log statements to your application:
+
+</SplitSectionText>
+
+<SplitSectionCode>
+
+```javascript
+Sentry.logger.info("User example action completed");
+
+Sentry.logger.warn("Slow operation detected", {
+  operation: "data_fetch",
+  duration: 3500,
+});
+
+Sentry.logger.error("Validation failed", {
+  field: "email",
+  reason: "Invalid email",
+});
+```
+
+</SplitSectionCode>
+
+</SplitSection>
+
+</SplitLayout>
 
 </OnboardingOption>