---
title: "Wasm"
description: "Learn how to manually set up Sentry in your JavaScript application with WebAssembly modules and capture your first errors."
url: https://docs.sentry.io/platforms/javascript/guides/wasm/
---

# Wasm | Sentry for Wasm

##### Are you using a JavaScript framework?

This guide focuses on configuring Sentry for WebAssembly modules. If your application uses a specific framework, start by following that framework's guide to set up the SDK. Then return here to add the WebAssembly-specific configuration.

## [Prerequisites](https://docs.sentry.io/platforms/javascript/guides/wasm.md#prerequisites)

You need:

* A Sentry [account](https://sentry.io/signup/) and [project](https://docs.sentry.io/product/projects.md)
* Your application with WebAssembly modules up and running

## [Step 1: Install](https://docs.sentry.io/platforms/javascript/guides/wasm.md#step-1-install)

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

Error Monitoring\[ ]Tracing\[ ]Logs

Want to learn more about these features?

* [**Issues**](https://docs.sentry.io/product/issues.md) (always enabled)
  <!-- -->
  :
  <!-- -->
  Sentry's core error monitoring product that automatically reports errors, uncaught exceptions, and unhandled rejections. If you have something that looks like an exception, Sentry can capture it.
* [**Tracing**](https://docs.sentry.io/product/tracing.md):
  <!-- -->
  Track software performance while seeing the impact of errors across multiple systems. For example, distributed tracing allows you to follow a request from the frontend to the backend and back.
* [**Logs**](https://docs.sentry.io/product/explore/logs.md):
  <!-- -->
  Centralize and analyze your application logs to correlate them with errors and performance issues. Search, filter, and visualize log data to understand what's happening in your applications.

### [Install the Sentry SDK](https://docs.sentry.io/platforms/javascript/guides/wasm.md#install-the-sentry-sdk)

Run the command for your preferred package manager to add the Sentry SDK to your application:

```bash
npm install @sentry/browser @sentry/wasm --save
```

## [Step 2: Configure](https://docs.sentry.io/platforms/javascript/guides/wasm.md#step-2-configure)

To use the SDK, initialize it in your application's entry point before loading your WebAssembly modules. Sentry's Wasm integration enhances the Browser SDK and allows it to provide more detailed debug information for WebAssembly modules, including Debug IDs, Debug Files, Code IDs, Code Files and memory addresses.

```javascript
import * as Sentry from "@sentry/browser";
import { wasmIntegration } from "@sentry/wasm";

Sentry.init({
  dsn: "___PUBLIC_DSN___",

  // Adds request headers and IP for users, for more info visit:
  // https://docs.sentry.io/platforms/javascript/guides/wasm/configuration/options/#sendDefaultPii
  sendDefaultPii: true,

  integrations: [
    // ___PRODUCT_OPTION_START___ performance
    Sentry.browserTracingIntegration(),
    // ___PRODUCT_OPTION_END___ performance
    wasmIntegration(),
  ],
  // ___PRODUCT_OPTION_START___ performance

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for tracing.
  // We recommend adjusting this value in production
  // Learn more at
  // https://docs.sentry.io/platforms/javascript/guides/wasm/configuration/options/#tracesSampleRate
  tracesSampleRate: 1.0,

  // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
  // ___PRODUCT_OPTION_END___ performance
  // ___PRODUCT_OPTION_START___ logs

  // Enable logs to be sent to Sentry
  enableLogs: true,
  // ___PRODUCT_OPTION_END___ logs
});
```

## [Step 3: Verify Your Setup](https://docs.sentry.io/platforms/javascript/guides/wasm.md#step-3-verify-your-setup)

Let's test your setup and confirm that Sentry is working correctly and sending data from your WebAssembly modules to your Sentry project.

### [Issues](https://docs.sentry.io/platforms/javascript/guides/wasm.md#issues)

To verify that Sentry captures errors from WebAssembly modules and creates issues in your Sentry project, add a function to your WebAssembly module that you can then call to cause an error (for example, division by zero).

Here's what this could look like in Rust:

```rust
#[no_mangle]
pub extern "C" fn divide(a: i32, b: i32) -> i32 {
    // This will cause a division by zero trap when b is 0
    a / b
}
```

Then add a button to one of your app pages that, when pressed, calls the WebAssembly function to throw an error. Here's a simple HTML button:

```html
<button type="button" onclick="testWasmError()">
  Trigger WebAssembly error
</button>
```

Here's the JavaScript that calls the WebAssembly function. Make sure that you adjust it for your JavaScript framework. Note that, depending on how you compile modules, you can either call the function directly or access it through the WebAssembly API.

```javascript
function testWasmError() {
  try {
    // Assuming you already have your WebAssembly module loaded as 'wasmModule'
    // Replace this with your actual WebAssembly module instance

    // depending on how your module is compiled, call function directly
    const result = wasmModule.divide(10, 0);
    // or via WebAssembly API
    //const result = wasmModule.instance.exports.divide(10, 0);
  } catch (e) {
    Sentry.captureException(e);
  }
}
```

Open your app in the browser and click the button you just created to trigger an error in your WebAssembly module.

##### Important

Errors triggered from within your browser's developer tools (like the browser console) are sandboxed, so they will not trigger Sentry's error monitoring.

### [Tracing](https://docs.sentry.io/platforms/javascript/guides/wasm.md#tracing)

To test your tracing configuration, add a function to your WebAssembly module that does some calculations. Here's what it could look like in Rust:

```rust
#[no_mangle]
pub extern "C" fn compute_intensive_function(iterations: i32) -> i32 {
    // Add some computation to make tracing more visible
    let mut sum = 0;
    for i in 0..iterations * 1000 {
        sum += i;
    }
    sum
}
```

Next, add a new button to your app:

```html
<button type="button" onclick="testWasmTracing()">
  Test WebAssembly with tracing
</button>
```

Finally, create the JavaScript function that wraps your WebAssembly function calls in a Sentry span to measure the execution time. Again, make sure to adapt the code to fit your setup:

```javascript
function testWasmTracing() {
  Sentry.startSpan({ op: "test", name: "Example Span" }, () => {
    try {
      // Assuming you already have your WebAssembly module loaded as 'wasmModule'
      // Replace this with your actual WebAssembly module instance

      // depending on how your module is compiled, call function directly
      const result = wasmModule.compute_intensive_function(1000);
      // or via WebAssembly API
      // const result = wasmModule.instance.exports.compute_intensive_function(1000);
      console.log("Result:", result);
    } catch (e) {
      Sentry.captureException(e);
    }
  });
}
```

### [Logs NEW](https://docs.sentry.io/platforms/javascript/guides/wasm.md#logs-)

To verify that Sentry catches your logs, add some log statements to your application:

```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",
});
```

### [View Captured Data in Sentry](https://docs.sentry.io/platforms/javascript/guides/wasm.md#view-captured-data-in-sentry)

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

Need help locating the captured errors in your Sentry project?

* Open the
  <!-- -->
  [**Issues**](https://sentry.io/orgredirect/organizations/:orgslug/issues/)
  <!-- -->
  page and select an error from the issues list to view the full details and context of this error. For more details, see this
  <!-- -->
  [interactive walkthrough](https://docs.sentry.io/product/sentry-basics/integrate-frontend/generate-first-error.md#ui-walkthrough).
* Open the
  <!-- -->
  [**Traces**](https://sentry.io/orgredirect/organizations/:orgslug/explore/traces/)
  <!-- -->
  page and select a trace to reveal more information about each span, its duration, and any errors. For an interactive UI walkthrough, click
  <!-- -->
  [here](https://docs.sentry.io/product/sentry-basics/distributed-tracing/generate-first-error.md#ui-walkthrough).
* Open the
  <!-- -->
  [**Logs**](https://sentry.io/orgredirect/organizations/:orgslug/explore/logs/)
  <!-- -->
  page and filter by service, environment, or search keywords to view log entries from your application. For an interactive UI walkthrough, click
  <!-- -->
  [here](https://docs.sentry.io/product/explore/logs.md#overview).

## [Next Steps](https://docs.sentry.io/platforms/javascript/guides/wasm.md#next-steps)

At this point, you should have integrated Sentry into your JavaScript application with WebAssembly modules 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](https://docs.sentry.io/guides.md) on what to monitor, log, track, and investigate after setup
* Instrument your frontend and backend using our [SDKs](https://docs.sentry.io/.md)
* Continue to [customize your configuration](https://docs.sentry.io/platforms/javascript/guides/wasm/configuration.md)
* Learn how to [manually capture errors](https://docs.sentry.io/platforms/javascript/guides/wasm/usage.md)

Are you having problems setting up the SDK?

* Find various topics in [Troubleshooting](https://docs.sentry.io/platforms/javascript/guides/wasm/troubleshooting.md)
* [Get support](https://sentry.zendesk.com/hc/en-us/)

## Other JavaScript Frameworks

- [Angular](https://docs.sentry.io/platforms/javascript/guides/angular.md)
- [Astro](https://docs.sentry.io/platforms/javascript/guides/astro.md)
- [AWS Lambda](https://docs.sentry.io/platforms/javascript/guides/aws-lambda.md)
- [Azure Functions](https://docs.sentry.io/platforms/javascript/guides/azure-functions.md)
- [Bun](https://docs.sentry.io/platforms/javascript/guides/bun.md)
- [Capacitor](https://docs.sentry.io/platforms/javascript/guides/capacitor.md)
- [Cloud Functions for Firebase](https://docs.sentry.io/platforms/javascript/guides/firebase.md)
- [Cloudflare](https://docs.sentry.io/platforms/javascript/guides/cloudflare.md)
- [Connect](https://docs.sentry.io/platforms/javascript/guides/connect.md)
- [Cordova](https://docs.sentry.io/platforms/javascript/guides/cordova.md)
- [Deno](https://docs.sentry.io/platforms/javascript/guides/deno.md)
- [Effect](https://docs.sentry.io/platforms/javascript/guides/effect.md)
- [Electron](https://docs.sentry.io/platforms/javascript/guides/electron.md)
- [Elysia](https://docs.sentry.io/platforms/javascript/guides/elysia.md)
- [Ember](https://docs.sentry.io/platforms/javascript/guides/ember.md)
- [Express](https://docs.sentry.io/platforms/javascript/guides/express.md)
- [Fastify](https://docs.sentry.io/platforms/javascript/guides/fastify.md)
- [Gatsby](https://docs.sentry.io/platforms/javascript/guides/gatsby.md)
- [Google Cloud Functions](https://docs.sentry.io/platforms/javascript/guides/gcp-functions.md)
- [Hapi](https://docs.sentry.io/platforms/javascript/guides/hapi.md)
- [Hono](https://docs.sentry.io/platforms/javascript/guides/hono.md)
- [Koa](https://docs.sentry.io/platforms/javascript/guides/koa.md)
- [Nest.js](https://docs.sentry.io/platforms/javascript/guides/nestjs.md)
- [Next.js](https://docs.sentry.io/platforms/javascript/guides/nextjs.md)
- [Node.js](https://docs.sentry.io/platforms/javascript/guides/node.md)
- [Nuxt](https://docs.sentry.io/platforms/javascript/guides/nuxt.md)
- [React](https://docs.sentry.io/platforms/javascript/guides/react.md)
- [React Router Framework](https://docs.sentry.io/platforms/javascript/guides/react-router.md)
- [Remix](https://docs.sentry.io/platforms/javascript/guides/remix.md)
- [Solid](https://docs.sentry.io/platforms/javascript/guides/solid.md)
- [SolidStart](https://docs.sentry.io/platforms/javascript/guides/solidstart.md)
- [Svelte](https://docs.sentry.io/platforms/javascript/guides/svelte.md)
- [SvelteKit](https://docs.sentry.io/platforms/javascript/guides/sveltekit.md)
- [TanStack Start React](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react.md)
- [Vue](https://docs.sentry.io/platforms/javascript/guides/vue.md)

## Topics

- [Capturing Errors](https://docs.sentry.io/platforms/javascript/guides/wasm/usage.md)
- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/wasm/sourcemaps.md)
- [Logs](https://docs.sentry.io/platforms/javascript/guides/wasm/logs.md)
- [Tracing](https://docs.sentry.io/platforms/javascript/guides/wasm/tracing.md)
- [AI Agent Monitoring](https://docs.sentry.io/platforms/javascript/guides/wasm/ai-agent-monitoring-browser.md)
- [Metrics](https://docs.sentry.io/platforms/javascript/guides/wasm/metrics.md)
- [Profiling](https://docs.sentry.io/platforms/javascript/guides/wasm/profiling.md)
- [User Feedback](https://docs.sentry.io/platforms/javascript/guides/wasm/user-feedback.md)
- [Sampling](https://docs.sentry.io/platforms/javascript/guides/wasm/sampling.md)
- [Enriching Events](https://docs.sentry.io/platforms/javascript/guides/wasm/enriching-events.md)
- [Extended Configuration](https://docs.sentry.io/platforms/javascript/guides/wasm/configuration.md)
- [Feature Flags](https://docs.sentry.io/platforms/javascript/guides/wasm/feature-flags.md)
- [Data Management](https://docs.sentry.io/platforms/javascript/guides/wasm/data-management.md)
- [Security Policy Reporting](https://docs.sentry.io/platforms/javascript/guides/wasm/security-policy-reporting.md)
- [Special Use Cases](https://docs.sentry.io/platforms/javascript/guides/wasm/best-practices.md)
- [Migration Guide](https://docs.sentry.io/platforms/javascript/guides/wasm/migration.md)
- [Troubleshooting](https://docs.sentry.io/platforms/javascript/guides/wasm/troubleshooting.md)