Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 71 additions & 0 deletions src/platforms/javascript/guides/wasm/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
---
title: Wasm
sdk: sentry.javascript.wasm
description: "Learn how to use Sentry's Wasm integration and how it automatically reports errors and exceptions in your Wasm module."
keywords: ["wasm", "webassembly"]
---

Sentry's Wasm integration enhances the Browser SDK, and allows it to provide more detailed debug information not only for the error itself, but also for the entire module it was executed from. It includes things like Debug IDs, Debug Files, Code IDs, Code Files and memory addresses.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this need its own Getting Started page? Far easier to simply use the guidelines here - https://docs.sentry.io/contributing/approach/write-getting-started/


### Install

Install `@sentry/browser` and `@sentry/wasm` using `yarn` or `npm`:

```bash
# Using yarn
yarn add @sentry/browser @sentry/wasm

# Using npm
npm install --save @sentry/browser @sentry/wasm
```

and afterwards use it like this:

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

Sentry.init({
dsn: "___PUBLIC_DSN___",
integrations: [new WasmIntegration()],
});

// Now, whenever any code from WebAssembly module will throw an error,
// it'll get captured and it'll contain all the necessary information.

function executeInternalWasmStuff() {
throw new Error('whoops');
}

const { instance } = await WebAssembly.instantiateStreaming(fetch('very-complex-module.wasm'), {
env: {
external_func: executeInternalWasmStuff,
},
});

instance.exports.internal_func();
```

If you are curious how Wasm modules look from the inside, here's a quick example written in Rust:

```rust
#![no_std]

#[panic_handler]
fn panic(_info: &core::panic::PanicInfo) -> ! {
loop {}
}

extern "C" {
pub fn external_func();
}

#[no_mangle]
pub fn internal_func() {
unsafe {
external_func();
}
}
```

For more details on how to compile Rust to Wasm, see [Compiling from Rust to WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_wasm) MDN documentation.