Sentry for Wasm

Install

Install the Sentry SDK

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

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

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

yarn add @sentry/browser @sentry/wasm

pnpm add @sentry/browser @sentry/wasm

Configure

Error Monitoring starts working as soon as you call Sentry.init(). Logs and Application Metrics need no extra configuration, and you'll learn how to send them in steps #3 and #4. This guide also enables Tracing.

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 adds debug information for WebAssembly modules.

The snippet also turns on:

• Tracing: via tracesSampleRate and browserTracingIntegration()

Don't need a feature? Remove its integration and options from the snippet.

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

Sentry.init({
  dsn: "___PUBLIC_DSN___",

  integrations: [
    // enables automatic instrumentation
    Sentry.browserTracingIntegration(),
    wasmIntegration(),
  ],

  // Enables Tracing.
  // Set to 1.0 to capture 100% of spans for tracing.
  // We recommend reducing this value in production.
  tracesSampleRate: 1.0,

  // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
});

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

Sentry.init({
  dsn: "___PUBLIC_DSN___",

  integrations: [
    // enables automatic instrumentation
    Sentry.browserTracingIntegration(),
    wasmIntegration(),
  ],

  // Enables Tracing.
  // Set to 1.0 to capture 100% of spans for tracing.
  // We recommend reducing this value in production.
  tracesSampleRate: 1.0,

  // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
});

Control the Data You Send to Sentry

By default, the SDK sends user identity data (IP address, ID, and similar) and other data like HTTP bodies and URL query parameters. This will give you rich debugging context.

The SDK always filters sensitive values whose keys match a built-in denylist, such as auth or password, and sends [Filtered] instead.

To send less data, turn off the categories you don't need in the dataCollection option. For the full list of categories and their defaults, see the dataCollection options.

Sentry.init({
  dsn: "___PUBLIC_DSN___",
  dataCollection: {
    userInfo: false,
    // other categories
  },
});

Sentry.init({
  dsn: "___PUBLIC_DSN___",
  dataCollection: {
    userInfo: false,
    // other categories
  },
});

Send Logs

Use Sentry.logger to send logs at different levels, such as info, warn, or error. You can pass any attributes you want and search or filter by them later. See Set Up Logs for all available logging methods and the syntax for formatting messages.

Sentry.logger.info("User example action completed");

Sentry.logger.warn("Slow operation detected", {
  operation: "data_fetch",
  duration: 3500,
});

Sentry.logger.error("Validation failed", {
  form_field: "email",
  reason: "Invalid email",
});

Sentry.logger.info("User example action completed");

Sentry.logger.warn("Slow operation detected", {
  operation: "data_fetch",
  duration: 3500,
});

Sentry.logger.error("Validation failed", {
  form_field: "email",
  reason: "Invalid email",
});

If you already use console, capture those calls as Sentry Logs with consoleLoggingIntegration.

Send Application Metrics NEW

Use Sentry.metrics to send counters, gauges, and distributions from your app to Sentry. You can pass any attributes you want and search or filter by them later. See Set Up Metrics for all available metric types and configuration options.

Sentry.metrics.count("checkout.failed", 1);

Sentry.metrics.gauge("time_since_refresh", 4, { unit: "hour" });

Sentry.metrics.distribution("api_latency", 187, {
  unit: "millisecond",
  attributes: { endpoint: "/api/orders" },
});

Sentry.metrics.count("checkout.failed", 1);

Sentry.metrics.gauge("time_since_refresh", 4, { unit: "hour" });

Sentry.metrics.distribution("api_latency", 187, {
  unit: "millisecond",
  attributes: { endpoint: "/api/orders" },
});

Verify Your Setup

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

Call a WebAssembly function that triggers a trap, then capture the exception:

try {
  wasmModule.divide(10, 0);
} catch (error) {
  Sentry.captureException(error);
}

try {
  wasmModule.divide(10, 0);
} catch (error) {
  Sentry.captureException(error);
}

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 JavaScript application with WebAssembly modules. Here's what to explore next:

• Explore practical guides on what to monitor, log, track, and investigate after setup