diff --git a/docs/platforms/javascript/guides/ember/index.mdx b/docs/platforms/javascript/guides/ember/index.mdx
index b6bbd83d70dba..cacc1c7e31755 100644
--- a/docs/platforms/javascript/guides/ember/index.mdx
+++ b/docs/platforms/javascript/guides/ember/index.mdx
@@ -9,15 +9,28 @@ categories:
-## Step 1: Install
+
+
+## Install
### Install the Sentry SDK
+
+
+
+
Run the command for your preferred package manager to add the Sentry SDK to your application:
+
+
+
-## Step 2: Configure
+
+
+
+
+## Configure
Choose the features you want to configure, and this guide will show you how:
@@ -35,8 +48,15 @@ Choose the features you want to configure, and this guide will show you how:
### Initialize the SDK
+
+
+
+
Configuration should happen as early as possible in your application's lifecycle. Add the following to your `app/app.js` file:
+
+
+
```javascript {filename:app.js}
import Application from "@ember/application";
import Resolver from "ember-resolver";
@@ -95,21 +115,34 @@ export default class App extends Application {
}
```
-## Step 3: Add Readable Stack Traces With Source Maps (Optional)
+
+
+
+
+### Add Readable Stack Traces With Source Maps (Optional)
-
+
-## Step 4: Avoid Ad Blockers With Tunneling (Optional)
+### Avoid Ad Blockers With Tunneling (Optional)
-
+
-## Step 5: Verify Your Setup
+## Verify Your Setup
Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
### Issues
-To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your templates, which will trigger an error that Sentry will capture when you click it:
+
+
+
+
+To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your templates, which will trigger an error that Sentry will capture when you click it.
+
+
+
+
+
```handlebars {filename: application.hbs}
{{! rest of your page }}
@@ -118,7 +151,19 @@ To verify that Sentry captures errors and creates issues in your Sentry project,
```
-Next, add the corresponding action to your controller or component:
+
+
+
+
+
+Next, add the corresponding action to your controller or component.
+
+
+ Open the page in a browser and click the button to trigger a frontend error.
+
+
+
+
```javascript {filename: application.js}
import Controller from "@ember/controller";
@@ -132,15 +177,22 @@ export default class ApplicationController extends Controller {
}
```
-
- Open the page in a browser and click the button to trigger a frontend error.
-
-
-
+
+
+
### Tracing
-To test your tracing configuration, update the previous code snippet to start a trace to measure the time it takes to execute your code:
+
+
+
+
+
+To test your tracing configuration, update the previous code snippet to start a trace to measure the time it takes to execute your code.
+Then, open the page in a browser and click the button to trigger a frontend error and a trace.
+
+
+
```javascript {filename: application.js} {3,8-12}
import Controller from "@ember/controller";
@@ -159,13 +211,15 @@ export default class ApplicationController extends Controller {
}
```
-Open the page in a browser and click the button to trigger a frontend error and a trace.
+
+
+
-
+
@@ -193,3 +247,5 @@ Our next recommended steps for you are:
- [Get support](https://sentry.zendesk.com/hc/en-us/)
+
+
diff --git a/docs/platforms/javascript/guides/gatsby/index.mdx b/docs/platforms/javascript/guides/gatsby/index.mdx
index bff36acdc743b..69b9db6c56799 100644
--- a/docs/platforms/javascript/guides/gatsby/index.mdx
+++ b/docs/platforms/javascript/guides/gatsby/index.mdx
@@ -9,11 +9,26 @@ categories:
-## Step 1: Install
+
+
+## Install
### Install the Sentry SDK
-Run the command for your preferred package manager to add the Sentry SDK to your application:
+
+
+
+
+Run the command for your preferred package manager to add the Sentry SDK to your application.
+
+
+
+`@sentry/gatsby` is a wrapper around the `@sentry/react` package, with additional Gatsby-specific functionality. This means that you can import all methods available in the `@sentry/react` package from `@sentry/gatsby`.
+
+
+
+
+
```bash {tabTitle:npm}
npm install @sentry/gatsby --save
@@ -27,16 +42,21 @@ yarn add @sentry/gatsby
pnpm add @sentry/gatsby
```
-
-
-`@sentry/gatsby` is a wrapper around the `@sentry/react` package, with additional Gatsby-specific functionality. This means that you can import all methods available in the `@sentry/react` package from `@sentry/gatsby`.
-
-
+
+
+
### Register the Sentry SDK
+
+
+
+
Register `@sentry/gatsby` in your Gatsby configuration file (typically `gatsby-config.(js|ts)`).
+
+
+
```javascript {tabTitle: CommonJS}{filename:gatsby-config.(js|ts)}
module.exports = {
plugins: [
@@ -62,7 +82,11 @@ const config: GatsbyConfig = {
export default config;
```
-## Step 2: Configure
+
+
+
+
+## Configure
Choose the features you want to configure, and this guide will show you how:
@@ -80,8 +104,15 @@ Choose the features you want to configure, and this guide will show you how:
### Initialize the Sentry SDK
+
+
+
+
Initialize Sentry as early as possible in your application. For this, create a new file `sentry.config.(js|ts)` in your project root and add the following:
+
+
+
```javascript {filename:sentry.config.(js|ts)}
import * as Sentry from "@sentry/gatsby";
@@ -132,21 +163,39 @@ Sentry.init({
});
```
-## Step 3: Add Readable Stack Traces With Source Maps (Optional)
+
+
+
+
+### Add Readable Stack Traces With Source Maps (Optional)
-
+
-## Step 4: Avoid Ad Blockers With Tunneling (Optional)
+### Avoid Ad Blockers With Tunneling (Optional)
-
+
-## Step 6: Verify Your Setup
+## Verify Your Setup
Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
### Issues
-To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your pages:
+
+
+
+
+To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your pages.
+
+
+ Then, open the page in a browser and click the button to trigger a frontend
+ error.
+
+
+
+
+
+
```javascript {filename:index.(jsx|tsx)}
+
+
### Tracing
-To test your tracing configuration, update the previous code snippet and wrap the error in a custom span:
+
+
+
+
+
+To test your tracing configuration, update the previous code snippet and wrap the error in a custom span.
+
+Then, open the page in a browser and click the button to trigger a frontend error and trace.
+
+
+
```javascript {filename:index.(jsx|tsx)}
+
+
-
+
@@ -214,3 +273,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/)
+
+
diff --git a/docs/platforms/javascript/guides/vue/index.mdx b/docs/platforms/javascript/guides/vue/index.mdx
index dcf83089c37ee..385f3bc807a2a 100644
--- a/docs/platforms/javascript/guides/vue/index.mdx
+++ b/docs/platforms/javascript/guides/vue/index.mdx
@@ -9,12 +9,19 @@ categories:
-## Step 1: Install
+
-### Install the Sentry SDK
+## Install
+
+
+
+
Run the command for your preferred package manager to add the Sentry SDK to your application:
+
+
+
```bash {tabTitle:npm}
npm install @sentry/vue --save
```
@@ -27,7 +34,11 @@ yarn add @sentry/vue
pnpm add @sentry/vue
```
-## Step 2: Configure
+
+
+
+
+## Configure
Choose the features you want to configure, and this guide will show you how:
@@ -43,7 +54,20 @@ Choose the features you want to configure, and this guide will show you how:
-To initialize Sentry in your Vue application, add the following code snippet to your `main.js`:
+
+
+
+
+To initialize Sentry in your Vue application, add the following code snippet to your `main.js`.
+
+
+
+If you're creating more than one Vue 3 app within your application, check out how to initialize the SDK for [multiple apps](./features/multiple-apps).
+
+
+
+
+
```javascript {tabTitle:Vue 3} {filename:main.js} {3, 12-41}
import { createApp } from "vue";
@@ -175,17 +199,22 @@ new Vue({
}).$mount("#app");
```
-
-
-If you're creating more than one Vue 3 app within your application, check out how to initialize the SDK for [multiple apps](./features/multiple-apps).
-
-
+
+
+
### Configuration for Late-Defined Vue Apps
+
+
+
+
If your Vue application is not defined from the start, you can add error monitoring for Vue-specific errors later on.
To manually add the integration for late-defined Vue applications, update your `main.js` file:
+
+
+
```javascript {filename:main.js}
import * as Sentry from "@sentry/vue";
@@ -204,9 +233,22 @@ const app = createApp({
Sentry.addIntegration(Sentry.vueIntegration({ app }));
```
+
+
+
+
### Configuration for Pinia
-To capture Pinia state data, use `Sentry.createSentryPiniaPlugin()` and add it to your Pinia store instance:
+
+
+
+
+To capture Pinia state data, use `Sentry.createSentryPiniaPlugin()` and add it to your Pinia store instance.
+
+Learn more about the [Pinia Plugin](./features/pinia) and its options.
+
+
+
```javascript
import { createPinia } from "pinia";
@@ -217,23 +259,39 @@ const pinia = createPinia();
pinia.use(createSentryPiniaPlugin());
```
-Learn more about the [Pinia Plugin](./features/pinia) and its options.
+
+
+
-## Step 3: Add Readable Stack Traces With Source Maps (Optional)
+### Add Readable Stack Traces With Source Maps (Optional)
-
+
-## Step 4: Avoid Ad Blockers With Tunneling (Optional)
+### Avoid Ad Blockers With Tunneling (Optional)
-
+
-## Step 5: Verify Your Setup
+## Verify Your Setup
Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
### Issues
-To verify that Sentry is capturing errors and creating issues in your Sentry project, add the following test button to one of your pages, which will trigger an error that Sentry will capture when you click it:
+
+
+
+
+To verify that Sentry is capturing errors and creating issues in your Sentry project, add the following test button to one of your pages, which will trigger an error that Sentry will capture when you click it.
+
+
+ Then, open the page in a browser and click the button to trigger a frontend
+ error.
+
+
+
+
+
+
```javascript {filename:App.vue}
// ...
@@ -250,16 +308,23 @@ export default {
};
```
-
- Open the page in a browser and click the button to trigger a frontend error.
-
-
-
+
+
+
### Tracing
-To test your tracing configuration, update the previous code snippet to start a performance trace to measure the time it takes for your code to execute:
+
+
+
+
+To test your tracing configuration, update the previous code snippet to start a performance trace to measure the time it takes for your code to execute.
+
+Then, open the page in a browser and click the button to trigger a frontend error and performance trace.
+
+
+
```javascript {filename:App.vue}
// ...
@@ -282,13 +347,15 @@ export default {
```
-Open the page in a browser and click the button to trigger a frontend error and performance trace.
+
+
+
-
+
@@ -316,3 +383,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/)
+
+