feat: Update setup docs for JS SDKs

src/platform-includes/configuration/before-breadcrumb-hint/javascript.mdx

@@ -1,7 +1,6 @@
 ```javascript
 Sentry.init({
   // ...
-
   beforeBreadcrumb(breadcrumb, hint) {
     if (breadcrumb.category === "ui.click") {
       const { target } = hint.event;

src/platform-includes/configuration/before-send-fingerprint/javascript.mdx

@@ -1,7 +1,6 @@
 ```javascript
 Sentry.init({
   // ...
-
   beforeSend(event, hint) {
     const error = hint.originalException;
     if (

src/platform-includes/configuration/before-send-hint/javascript.mdx

@@ -1,7 +1,6 @@
 ```javascript
 Sentry.init({
   // ...
-
   beforeSend(event, hint) {
     const error = hint.originalException;
     if (

src/platform-includes/enriching-events/breadcrumbs/before-breadcrumb/javascript.mdx

@@ -1,7 +1,6 @@
 ```javascript
 Sentry.init({
   // ...
-
   beforeBreadcrumb(breadcrumb, hint) {
     return breadcrumb.category === "ui.click" ? null : breadcrumb;
   },

src/platform-includes/enriching-events/user-feedback/example-widget/javascript.mdx

@@ -1,13 +1,3 @@
-Make sure you've got the JavaScript SDK available:
-
-```html
-<script
-  src="https://browser.sentry-cdn.com/{{ packages.version('sentry.javascript.browser') }}/bundle.min.js"
-  integrity="sha384-{{ packages.checksum('sentry.javascript.browser', 'bundle.min.js', 'sha384-base64') }}"
-  crossorigin="anonymous"
-></script>
-```
-
 If you're using a framework like [React](/platforms/javascript/guides/react/) or [Angular](/platforms/javascript/guides/angular/), the best place to collect user feedback is in your error-handling component. (Please see platform-specific docs for examples.) If you're not using a framework, you can collect feedback right before the event is sent, using `beforeSend`:
 
 ```html

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

@@ -16,12 +16,20 @@ Sentry.init({
       tracePropagationTargets: ["localhost", "https://yourserver.io/api"],
       routingInstrumentation: Sentry.routingInstrumentation,
     }),
+    // Registers the Replay integration,
+    // which automatically captures Session Replays
+    new Sentry.Replay(),
   ],
 
   // Set tracesSampleRate to 1.0 to capture 100%
   // of transactions for performance monitoring.
   // We recommend adjusting this value in production
   tracesSampleRate: 1.0,
+
+  // Capture Replay for 10% of all sessions,
+  // plus for 100% of sessions with an error
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
 });
 
 platformBrowserDynamic()

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

@@ -10,11 +10,17 @@ import * as Sentry from "@sentry/ember";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
+  integrations: [new Sentry.Replay()],
 
   // Set tracesSampleRate to 1.0 to capture 100%
   // of transactions for performance monitoring.
   // We recommend adjusting this value in production,
   tracesSampleRate: 1.0,
+
+  // Capture Replay for 10% of all sessions,
+  // plus for 100% of sessions with an error
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
 });
 
 export default class App extends Application {

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

@@ -1,4 +1,4 @@
-Once this is done, Sentry's JavaScript SDK captures all unhandled exceptions and transactions.
+Once this is done, Sentry's JavaScript SDK captures all unhandled exceptions, transactions, and Session Replays, based on the sample rates set.
 
 ```javascript
 import * as Sentry from "@sentry/browser";
@@ -9,11 +9,16 @@ Sentry.init({
   // Alternatively, use `process.env.npm_package_version` for a dynamic release version
   // if your build tool supports it.
   release: "[email protected]",
-  integrations: [new Sentry.BrowserTracing()],
+  integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()],
 
   // Set tracesSampleRate to 1.0 to capture 100%
   // of transactions for performance monitoring.
   // We recommend adjusting this value in production
   tracesSampleRate: 1.0,
+
+  // Capture Replay for 10% of all sessions,
+  // plus for 100% of sessions with an error
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
 });
 ```

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

@@ -6,11 +6,17 @@ import App from "./App";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
-  integrations: [new Sentry.BrowserTracing()],
+  integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()],
 
-  // We recommend adjusting this value in production, or using tracesSampler
-  // for finer control
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
   tracesSampleRate: 1.0,
+
+  // Capture Replay for 10% of all sessions,
+  // plus for 100% of sessions with an error
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
 });
 
 const container = document.getElementById(“app”);

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

@@ -1,13 +1,16 @@
 To use this SDK, initialize Sentry in your Remix entry points for both the client and server.
 
-```typescript {filename: entry.client.tsx}
+Create two files in the root directory of your project, `entry.client.tsx` and `entry.server.tsx` (if they don't exist yet). In these files, add your initialization code for the client-side SDK and server-side SDK, respectively.
+
+The two configuration types are mostly the same, except that some configuration features, like Session Replay, only work in `entry.client.tsx`.
+
+```typescript {tabTitle:Client} {filename: entry.client.tsx}
 import { useLocation, useMatches } from "@remix-run/react";
 import * as Sentry from "@sentry/remix";
 import { useEffect } from "react";
 
 Sentry.init({
   dsn: "___DSN___",
-  tracesSampleRate: 1,
   integrations: [
     new Sentry.BrowserTracing({
       routingInstrumentation: Sentry.remixRouterInstrumentation(
@@ -16,8 +19,43 @@ Sentry.init({
         useMatches
       ),
     }),
+    // Replay is only available in the client
+    new Sentry.Replay(),
   ],
-  // ...
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  tracesSampleRate: 1.0,
+
+  // Capture Replay for 10% of all sessions,
+  // plus for 100% of sessions with an error
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+});
+```
+
+```typescript {tabTitle:Server} {filename: entry.server.tsx}
+import { useLocation, useMatches } from "@remix-run/react";
+import * as Sentry from "@sentry/remix";
+import { useEffect } from "react";
+
+Sentry.init({
+  dsn: "___DSN___",
+  integrations: [
+    new Sentry.BrowserTracing({
+      routingInstrumentation: Sentry.remixRouterInstrumentation(
+        useEffect,
+        useLocation,
+        useMatches
+      ),
+    }),
+  ],
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  tracesSampleRate: 1.0,
 });
 ```
 

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

@@ -9,12 +9,17 @@ import * as Sentry from "@sentry/svelte";
 // Initialize the Sentry SDK here
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
-  integrations: [new Sentry.BrowserTracing()],
+  integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()],
 
   // Set tracesSampleRate to 1.0 to capture 100%
   // of transactions for performance monitoring.
   // We recommend adjusting this value in production
   tracesSampleRate: 1.0,
+
+  // Capture Replay for 10% of all sessions,
+  // plus for 100% of sessions with an error
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
 });
 
 const app = new App({

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

@@ -20,11 +20,18 @@ Sentry.init({
     new Sentry.BrowserTracing({
       routingInstrumentation: Sentry.vueRouterInstrumentation(router),
     }),
+    new Sentry.Replay(),
   ],
+
   // Set tracesSampleRate to 1.0 to capture 100%
   // of transactions for performance monitoring.
   // We recommend adjusting this value in production
   tracesSampleRate: 1.0,
+
+  // Capture Replay for 10% of all sessions,
+  // plus for 100% of sessions with an error
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
 });
 
 // ...

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

@@ -1,7 +1,7 @@
-```bash
-# Using yarn
-yarn add @sentry/electron
+```bash {tabTitle:npm}
+npm install --save @sentry/electron
+```
 
-# Using npm
-npm install @sentry/electron
+```bash {tabTitle:Yarn}
+yarn add @sentry/electron
 ```

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

@@ -1,14 +1,27 @@
-```bash {tabTitle: yarn}
-yarn add @sentry/browser
+In order to get started using the Sentry JavaScript SDK, add the following code to the top of your application, before all other scripts:
+
+```html
+<script
+  src="https://js.sentry-cdn.com/___PUBLIC_KEY___.min.js"
+  crossorigin="anonymous"
+></script>
 ```
 
-```bash {tabTitle: npm}
+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:
+
+```bash {tabTitle:npm}
 npm install --save @sentry/browser
 ```
 
+```bash {tabTitle:Yarn}
+yarn add @sentry/browser
+```
+
 <Note>
 
-We also support alternate [installation methods](/platforms/javascript/install/) such as a CDN and lazy loading.
+We also support installation via [CDN bundles](/platforms/javascript/install/loader/#cdn).
 
 </Note>
 

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

@@ -1,7 +1,7 @@
-```bash
-# Using npm
+```bash {tabTitle:npm}
 npm install --save @sentry/react
+```
 
-# Using yarn
+```bash {tabTitle:Yarn}
 yarn add @sentry/react
 ```

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

@@ -2,6 +2,6 @@
 npm install --save @sentry/remix
 ```
 
-```bash {tabTitle:yarn}
+```bash {tabTitle:Yarn}
 yarn add @sentry/remix
 ```

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

@@ -2,6 +2,6 @@
 npm install --save @sentry/svelte
 ```
 
-```bash {tabTitle:yarn}
+```bash {tabTitle:Yarn}
 yarn add @sentry/svelte
 ```

src/platform-includes/getting-started-install/node.mdx

@@ -1,6 +1,7 @@
-```bash
-# Using yarn
-yarn add @sentry/node
-# Using npm
+```bash {tabTitle:npm}
 npm install --save @sentry/node
 ```
+
+```bash {tabTitle:Yarn}
+yarn add @sentry/node
+```

src/platform-includes/performance/configure-sample-rate/javascript.mdx

@@ -1,15 +1,16 @@
 ```javascript
-// If you're using one of our framework SDK packages, like `@sentry/angular`,
+// If you're using one of our framework SDK packages, like `@sentry/react`,
 // substitute its name for `@sentry/browser` here
 import * as Sentry from "@sentry/browser";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
 
-  // This enables automatic instrumentation (highly recommended), but is not
-  // necessary for purely manual usage.
-  // If you only want to use manual instrumentation, remove the BrowserTracing integration and add
-  // Sentry.addTracingExtensions() above your Sentry.init() call.
+  // This enables automatic instrumentation (highly recommended),
+  // but is not necessary for purely manual usage
+  // If you only want to use manual instrumentation:
+  // * Remove the `BrowserTracing` integration
+  // * add `Sentry.addTracingExtensions()` above your Sentry.init() call
   integrations: [new Sentry.BrowserTracing()],
 
   // We recommend adjusting this value in production, or using tracesSampler

src/platform-includes/performance/configure-sample-rate/javascript.react.mdx

@@ -6,8 +6,9 @@ Sentry.init({
 
   // This enables automatic instrumentation (highly recommended), but is not
   // necessary for purely manual usage.
-  // If you only want to use manually, remove the BrowserTracing integration and add
-  // Sentry.addTracingExtensions() above your Sentry.init() call.
+  // If you only want to use manual instrumentation:
+  // * Remove the `BrowserTracing` integration
+  // * add `Sentry.addTracingExtensions()` above your Sentry.init() call
   integrations: [new Sentry.BrowserTracing()],
 
   // We recommend adjusting this value in production, or using tracesSampler

src/platform-includes/performance/configure-sample-rate/javascript.vue.mdx

@@ -7,10 +7,11 @@ Sentry.init({
   Vue: Vue,
   dsn: "___PUBLIC_DSN___",
 
-  // This enables automatic instrumentation (highly recommended), but is not
-  // necessary for purely manual usage
-  // If you only want to use manually, remove the BrowserTracing integration and add
-  // Sentry.addTracingExtensions() above your Sentry.init() call.
+  // This enables automatic instrumentation (highly recommended),
+  // but is not necessary for purely manual usage
+  // If you only want to use manual instrumentation:
+  // * Remove the `BrowserTracing` integration
+  // * add `Sentry.addTracingExtensions()` above your Sentry.init() call
   integrations: [new Sentry.BrowserTracing()],
 
   // We recommend adjusting this value in production, or using tracesSampler

src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx

@@ -3,7 +3,7 @@ To enable tracing, include the `BrowserTracing` integration in your SDK configur
 After configuration, you will see both `pageload` and `navigation` transactions in the Sentry UI.
 
 ```javascript
-// If you're using one of our framework SDK packages, like `@sentry/angular`,
+// If you're using one of our framework SDK packages, like `@sentry/react`,
 // substitute its name for `@sentry/browser` here
 import * as Sentry from "@sentry/browser";
 

src/platform-includes/performance/enable-tracing/javascript.mdx

@@ -1,4 +1,4 @@
-Tracing is included by default in the Sentry JavaScript npm packages.
+Tracing is available by default in the Sentry JavaScript npm packages.
 
 If you are using the Loader Script, make sure to enable "Performance" under **Settings > Projects > Client Keys (DSN)**.
 

src/platform-includes/performance/opentelemetry-install/javascript.nextjs.mdx

@@ -8,7 +8,7 @@ OpenTelemetry support is only supported for server-side instrumentation.
 npm install @sentry/nextjs @sentry/opentelemetry-node
 ```
 
-```bash {tabTitle:yarn}
+```bash {tabTitle:Yarn}
 yarn add @sentry/nextjs @sentry/opentelemetry-node
 ```
 

src/platform-includes/performance/opentelemetry-install/node.mdx

@@ -2,7 +2,7 @@
 npm install @sentry/node @sentry/opentelemetry-node
 ```
 
-```bash {tabTitle:yarn}
+```bash {tabTitle:Yarn}
 yarn add @sentry/node @sentry/opentelemetry-node
 ```