diff --git a/docs/platforms/javascript/guides/capacitor/index.mdx b/docs/platforms/javascript/guides/capacitor/index.mdx
index 23be2a1570658..f1ae4bb1dde54 100644
--- a/docs/platforms/javascript/guides/capacitor/index.mdx
+++ b/docs/platforms/javascript/guides/capacitor/index.mdx
@@ -16,14 +16,27 @@ This guide will show you setup instructions for Angular, React, Vue, and Nuxt. I
-## Step 1: Install
+
+
+## Install
### Install the Sentry SDK
+
+
+
+
Run the command for your preferred package manager to add Sentry's Capacitor SDK and the SDK for the framework you're using to your application:
+
+
+
+
+
+
+
#### Angular
@@ -44,7 +57,7 @@ Both frameworks are fully compatible with the current and beta versions of Sentr
-## Step 2: Configure
+## Configure
Choose the features you want to configure, and this guide will show you how:
@@ -62,27 +75,51 @@ 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's lifecycle.
If you're using Angular, React, Vue, or Nuxt, make sure to forward the `init` method from the framework's Sentry SDK, as you can see in these code snippets. If you're following the vanilla setup, you don't need to do this.
+
+
+
-## Step 3: Add Readable Stack Traces With Source Maps (Optional)
+
+
+
-
+### Add Readable Stack Traces With Source Maps (Optional)
-## Step 4: Provide Native Debug Information for iOS (Optional)
+
+
+### Provide Native Debug Information for iOS (Optional)
You need to provide debug information to Sentry to make the stack-trace information for native crashes on iOS easier to understand. You can provide debug information by [uploading dSYM files](/platforms/javascript/guides/capacitor/dsym).
-## Step 5: Verify
+## Verify
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 and logic:
+
+
+
+
+To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button and logic.
+
+
+ Open the page in a browser and click the button to trigger a frontend error.
+
+
+
+
+
+
```javascript {tabTitle: Angular 12, 13, 14+}
@Component({
@@ -147,17 +184,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 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 {tabTitle: Angular 12, 13, 14+}
import * as Sentry from "@sentry/capacitor";
@@ -246,13 +289,15 @@ export default {
```
-Open the page in a browser and click the button to trigger a frontend error and trace.
+
+
+
-
+
@@ -279,3 +324,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/cordova/index.mdx b/docs/platforms/javascript/guides/cordova/index.mdx
index 6a29eb915ed11..2f19cc53eec97 100644
--- a/docs/platforms/javascript/guides/cordova/index.mdx
+++ b/docs/platforms/javascript/guides/cordova/index.mdx
@@ -9,7 +9,11 @@ categories:
---
-Cordova is being superseded by modern alternatives like [Capacitor](https://ionic.io/resources/articles/capacitor-vs-cordova-modern-hybrid-app-development). This SDK is no longer maintained by Sentry. If you are starting a new project or planning a [migration](https://capacitorjs.com/docs/cordova/migration-strategy), consider using [Sentry Capacitor](/platforms/javascript/guides/capacitor/), [Sentry React Native](/platforms/react-native/), or [Sentry Flutter](/platforms/flutter/) instead.
+
+Cordova is being superseded by modern alternatives like [Capacitor](https://ionic.io/resources/articles/capacitor-vs-cordova-modern-hybrid-app-development).
+This SDK is no longer maintained by Sentry. If you are starting a new project or planning a [migration](https://capacitorjs.com/docs/cordova/migration-strategy), consider
+using [Sentry Capacitor](/platforms/javascript/guides/capacitor/), [Sentry React Native](/platforms/react-native/), or [Sentry Flutter](/platforms/flutter/) instead.
+
@@ -35,15 +39,17 @@ Cordova is being superseded by modern alternatives like [Capacitor](https://ioni
-## Step 1: Install
+
+
+## Install
### Install the Sentry SDK
-Run this `cordova` command to add the Sentry SDK to your application:
+
+
+
-```bash
-cordova plugin add sentry-cordova
-```
+Run this `cordova` command to add the Sentry SDK to your application:
This command starts the Sentry Wizard, which will patch your project (you need to do this only once).
The wizard helps configure your project by:
@@ -52,12 +58,30 @@ The wizard helps configure your project by:
- Adding a build step to Xcode to upload debug symbols for iOS crashes
- Configuring source map uploads so you can see your original JavaScript code in Sentry instead of minified production code
-## Step 2: Configure
+
+
+
+```bash
+cordova plugin add sentry-cordova
+```
+
+
+
+
+
+## Configure
### Initialize the Sentry SDK
+
+
+
+
Initialize Sentry as early as possible in your application. For this, `init` the SDK in the `deviceready` event:
+
+
+
```javascript
onDeviceReady: function() {
var Sentry = cordova.require("sentry-cordova.Sentry");
@@ -71,22 +95,48 @@ onDeviceReady: function() {
}
```
+
+
+
+
### Allow the Sentry Domain
+
+
+
+
Make sure your app can talk to Sentry by adding this to your `config.xml`:
+
+
+
```xml {filename:config.xml}
```
-## Step 3: 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.
+
+
+
+
This snippet includes an intentional error, so you can test that everything is working as soon as you set it up.
+
+
+
+
+
+
+
### View Captured Data in Sentry
To view and resolve the recorded error, log in to [sentry.io](https://sentry.io) and select your project. Clicking the error's title opens a page where you can view detailed information and mark it as resolved.
@@ -108,3 +158,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/electron/index.mdx b/docs/platforms/javascript/guides/electron/index.mdx
index 0404534bf3298..38cd6da9fc96f 100644
--- a/docs/platforms/javascript/guides/electron/index.mdx
+++ b/docs/platforms/javascript/guides/electron/index.mdx
@@ -9,12 +9,21 @@ 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:
+
+
+
```bash {tabTitle:npm}
npm install @sentry/electron --save
```
@@ -27,7 +36,11 @@ yarn add @sentry/electron
pnpm add @sentry/electron
```
-## Step 2: Configure
+
+
+
+
+## Configure
Choose the features you want to configure, and this guide will show you how:
@@ -47,8 +60,15 @@ You should initialize the SDK in both the `main` process and every `renderer` pr
### Configure the Main Process
+
+
+
+
Initialize the SDK in your Electron `main` process as early as possible:
+
+
+
```javascript
import * as Sentry from "@sentry/electron/main";
@@ -72,10 +92,21 @@ Sentry.init({
});
```
+
+
+
+
### Configure the Renderer Process
+
+
+
+
Initialize the SDK in your Electron renderer processes as early as possible. All renderer events are sent through the main process so passing `dsn`, `release` or `environment` to renderer `init` will have no effect.
+
+
+
```javascript
import * as Sentry from "@sentry/electron/renderer";
@@ -123,7 +154,20 @@ Sentry.init({
});
```
-### Configure any Utility Processes
+
+
+
+
+### Configure Any Utility Processes
+
+
+
+
+
+If your app uses utility processes, initialize Sentry in each one.
+
+
+
```javascript
import * as Sentry from "@sentry/electron/utility";
@@ -136,20 +180,43 @@ Sentry.init({
});
```
-
+
+
+
+
+
+
+
+
+
If your app uses a preload script and `contextIsolation: true`, Sentry can't automatically capture errors that occur in the preload context. To include those, initialize Sentry in your preload script as well:
+
+
+
```javascript
import * as Sentry from "@sentry/electron/renderer";
Sentry.init(); // don't forget to add your configuration options
```
+
+
+
+
+
+
+
+
+
If you change the `userData` directory used by your app, ensure this change is made before you configure the SDK as this path is used to cache scope and events between application restarts.
+
+
+
```javascript
import { app } from "electron";
import * as Sentry from "@sentry/electron/main";
@@ -158,12 +225,23 @@ app.setPath("userData", "~/.config/my-app");
Sentry.init({ dsn: "___PUBLIC_DSN___" });
```
+
+
+
+
### Using Framework-Specific SDKs
+
+
+
+
If you're using a framework in your renderers, you can combine the Electron SDK with the framework SDK:
+
+
+
```javascript
import { init } from "@sentry/electron/renderer";
import { init as reactInit } from "@sentry/react";
@@ -180,20 +258,31 @@ init(
);
```
-## Step 3: Add Readable Stack Traces With Source Maps (Optional)
+
+
+
+
+### Add Readable Stack Traces With Source Maps (Optional)
-
+
-## Step 4: Verify Your Setup
+## Verify Your Setup
Let's test your setup and confirm that Sentry is working correctly.
### Issues
+
+
+
+
**Main process error**
Add an event listener that throws an error in your main process:
+
+
+
```javascript
import { app } from "electron";
import * as Sentry from "@sentry/electron/main";
@@ -203,32 +292,63 @@ app.on("ready", () => {
});
```
+
+
+
+
+
+
**Renderer process error**
Add a test button in one of your HTML pages:
+
+
+
```html {filename: index.html}
```
+
+
+
+
+
+
Then, in your renderer, add the following:
+
+ Finally, start your app and trigger two errors that Sentry will capture: one from the
+ main process and one from the renderer.
+
+
+
+
```javascript
document.getElementById("testError").addEventListener("click", () => {
throw new Error("Sentry test error in renderer process");
});
```
-
- Start your app and trigger two errors that Sentry will capture: one from the
- main process and one from the renderer.
-
+
+
+
### Tracing
-To test tracing in your renderer, start a trace to measure the time it takes to execute your code:
+
+
+
+
+
+To test tracing in your renderer, start a trace to measure the time it takes to execute your code.
+
+Then, start your app and trigger two errors that Sentry will capture: one from the main process and one from the renderer. It will also start a trace with the defined name.
+
+
+
```javascript
document.getElementById("testError").addEventListener("click", () => {
@@ -238,13 +358,15 @@ document.getElementById("testError").addEventListener("click", () => {
});
```
-Start your app and trigger two errors that Sentry will capture: one from the main process and one from the renderer. It will also start a trace with the defined name.
+
+
+
-
+
@@ -272,3 +394,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/)
+
+