Wasm

Prerequisites

You need:

• A Sentry account and project
• Your application with WebAssembly modules up and running

Step 1: Install

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

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

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.

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

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0
example-org / example-project",

  // 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: [
    //  performance
    Sentry.browserTracingIntegration(),
    //  performance
    wasmIntegration(),
  ],
  //  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/],
  //  performance
  //  logs

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

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

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:

#[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:

<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.

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

    // depening 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);
  }
}

#[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
}

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

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

      // depening 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);
    }
  });
}

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 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:

• Instrument your frontend and backend using our SDKs
• Continue to customize your configuration
• Learn how to manually capture errors