Skip to content

Commit 2ca5f9d

Browse files
docs(sentry-javascript): Add @sentry/wasm page (#2923)
* docs(sentry-javascript): Add @sentry/wasm page * Update src/platforms/javascript/guides/wasm/index.mdx Co-authored-by: Rodolfo Carvalho <[email protected]> * Update src/platforms/javascript/guides/wasm/index.mdx Co-authored-by: Rodolfo Carvalho <[email protected]> * Update src/platforms/javascript/guides/wasm/index.mdx * Added keywords and compilation details Co-authored-by: Rodolfo Carvalho <[email protected]>
1 parent 07a764a commit 2ca5f9d

File tree

1 file changed

+71
-0
lines changed
  • src/platforms/javascript/guides/wasm

1 file changed

+71
-0
lines changed
Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
title: Wasm
3+
sdk: sentry.javascript.wasm
4+
description: "Learn how to use Sentry's Wasm integration and how it automatically reports errors and exceptions in your Wasm module."
5+
keywords: ["wasm", "webassembly"]
6+
---
7+
8+
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.
9+
10+
### Install
11+
12+
Install `@sentry/browser` and `@sentry/wasm` using `yarn` or `npm`:
13+
14+
```bash
15+
# Using yarn
16+
yarn add @sentry/browser @sentry/wasm
17+
18+
# Using npm
19+
npm install --save @sentry/browser @sentry/wasm
20+
```
21+
22+
and afterwards use it like this:
23+
24+
```javascript
25+
import * as Sentry from "@sentry/browser";
26+
import { Wasm as WasmIntegration } from "@sentry/wasm";
27+
28+
Sentry.init({
29+
dsn: "___PUBLIC_DSN___",
30+
integrations: [new WasmIntegration()],
31+
});
32+
33+
// Now, whenever any code from WebAssembly module will throw an error,
34+
// it'll get captured and it'll contain all the necessary information.
35+
36+
function executeInternalWasmStuff() {
37+
throw new Error('whoops');
38+
}
39+
40+
const { instance } = await WebAssembly.instantiateStreaming(fetch('very-complex-module.wasm'), {
41+
env: {
42+
external_func: executeInternalWasmStuff,
43+
},
44+
});
45+
46+
instance.exports.internal_func();
47+
```
48+
49+
If you are curious how Wasm modules look from the inside, here's a quick example written in Rust:
50+
51+
```rust
52+
#![no_std]
53+
54+
#[panic_handler]
55+
fn panic(_info: &core::panic::PanicInfo) -> ! {
56+
loop {}
57+
}
58+
59+
extern "C" {
60+
pub fn external_func();
61+
}
62+
63+
#[no_mangle]
64+
pub fn internal_func() {
65+
unsafe {
66+
external_func();
67+
}
68+
}
69+
```
70+
71+
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.

0 commit comments

Comments
 (0)