index.mdx

title	Capacitor
description	Learn how to set up Sentry in your Capacitor application, capture your first errors and traces, and view them in Sentry.
sdk	sentry.javascript.capacitor
categories	javascript browser mobile

This guide will show you setup instructions for Angular, React, Vue, and Nuxt. If you use any other JavaScript framework (or none at all) with Capacitor, follow the vanilla instructions outlined under "Other".

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

Currently, the Sentry Capacitor SDK only supports Angular 14 and newer. If you're using an older version of Angular, you also need to use an older version of the SDK. See this table for compatibility guidance:

Angular version	Recommended Sentry SDK
14 and newer	@sentry/capacitor @sentry/angular
12 or 13	@sentry/capacitor^0 @sentry/angular-ivy@^7 *
10 or 11	@sentry/capacitor^0 @sentry/angular@^7 *

* These versions of the SDK are no longer maintained or tested. Version 0 might still receive bug fixes, but we don't guarantee support.

React and Vue

Both frameworks are fully compatible with the current and beta versions of Sentry Capacitor.

Configure

Choose the features you want to configure, and this guide will show you how:

<OnboardingOptionButtons options={[ "error-monitoring", "performance", "session-replay", "user-feedback", "logs", ]} />

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.

Add Readable Stack Traces With Source Maps (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.

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.

Open the page in a browser and click the button to trigger a frontend error.

@Component({
    selector: "app-root",
    template: `
      <!-- rest of your page -->
      <button (click)="throwError()">Test Sentry Error</button>`
})
class AppComponent {
  // ...
  throwError(): void {
      throw new Error("Sentry Test Error");
  }
}

<button
  type="button"
  onClick={() => {
    throw new Error("Sentry Test Error");
  }}
>
  Break the world
</button>

<button @click="throwError">Throw error</button>

export default {
  // ...
  methods: {
    throwError() {
      throw new Error('Sentry Error');
    }
  }
};

<template>
  <button type="button" @click="throwError">Break the world</button>
</template>

<script setup>
  function throwError() {
    throw new Error("Sentry Test Error");
  }
</script>

<button type="button" id="break-btn">Break the world</button>

<script type="module">
  const button = document.getElementById("break-btn");

  button.addEventListener("click", () => {
    throw new Error("Sentry Test Error");
  });
</script>

Tracing

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.

import * as Sentry from "@sentry/capacitor";

@Component({
    selector: "app-root",
    template: `
      <!-- rest of your page -->
      <button (click)="throwError()">Test Sentry Error</button>`
})
class AppComponent {
  // ...
  throwError(): void {
    Sentry.startSpan({ op: "test", name: "Example Frontend Span" }, () => {
      throw new Error("Sentry Test Error");
    });
  }
}

import * as Sentry from "@sentry/capacitor";

<button
  type="button"
  onClick={() => {
    Sentry.startSpan({ op: "test", name: "Example Frontend Span" }, () => {
      throw new Error("Sentry Test Error");
    });
  }}
>
  Break the world
</button>;

import * as Sentry from "@sentry/capacitor";

<button @click="throwError">Throw error</button>

export default {
  // ...
  methods: {
    throwError() {
      Sentry.startSpan({ op: "test", name: "Example Frontend Span" }, async () => {
        throw new Error("Sentry Error");
      });
    }
  }
};

<template>
  <button type="button" @click="throwError">Break the world</button>
</template>

<script setup>
  import * as Sentry from "@sentry/capacitor";

  // Trigger from client-side interaction
  function throwError() {
    Sentry.startSpan({ op: "test", name: "Example Frontend Span" }, () => {
      throw new Error("Sentry Test Error");
    });
  }
</script>

<button type="button" id="break-btn">Break the world</button>

<script type="module">
  import * as Sentry from "@sentry/capacitor";

  const button = document.getElementById("break-btn");

  button.addEventListener("click", async () => {
    await Sentry.startSpan(
      { name: "Example Frontend Span", op: "test" },
      async () => {
        throw new Error("Sentry Test Error");
      }
    );
  });
</script>

View Captured Data in Sentry

Now, head over to your project on Sentry.io to view the collected data (it takes a couple of moments for the data to appear).

Next Steps

At this point, you should have integrated Sentry into your Capacitor 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:

• Explore practical guides on what to monitor, log, track, and investigate after setup
• Learn how to use Sentry with Ionic
• Continue to customize your configuration
• Learn how to manually capture errors
• Make use of framework-specific features, such as Angular, Vue, React, or Nuxt

- Find various topics in Troubleshooting - [Get support](https://sentry.zendesk.com/hc/en-us/)