From ea7fd3a82506c351989d52b1a9bc0530a07795bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kamil=20Og=C3=B3rek?= Date: Wed, 20 Jan 2021 10:47:52 +0100 Subject: [PATCH 1/5] docs(sentry-javascript): Add @sentry/wasm page --- .../javascript/guides/wasm/index.mdx | 73 +++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 src/platforms/javascript/guides/wasm/index.mdx diff --git a/src/platforms/javascript/guides/wasm/index.mdx b/src/platforms/javascript/guides/wasm/index.mdx new file mode 100644 index 0000000000000..f0d826e4faaf3 --- /dev/null +++ b/src/platforms/javascript/guides/wasm/index.mdx @@ -0,0 +1,73 @@ +--- +title: Wasm +sdk: sentry.javascript.wasm +redirect_from: + - /platforms/javascript/wasm/ + - /clients/wasm/ + - /sdks/react/ + - /platforms/wasm/ +description: "Learn how to use Sentry's Wasm integration and how it automatically reports errors and exceptions in your Wasm module." +--- + +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. + +### 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 using 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(); + } +} +``` From 693c39832dadda776fdf1029775c6b925b0b28cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kamil=20Og=C3=B3rek?= Date: Wed, 20 Jan 2021 12:52:52 +0100 Subject: [PATCH 2/5] Update src/platforms/javascript/guides/wasm/index.mdx Co-authored-by: Rodolfo Carvalho --- src/platforms/javascript/guides/wasm/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platforms/javascript/guides/wasm/index.mdx b/src/platforms/javascript/guides/wasm/index.mdx index f0d826e4faaf3..0063581ce8f35 100644 --- a/src/platforms/javascript/guides/wasm/index.mdx +++ b/src/platforms/javascript/guides/wasm/index.mdx @@ -9,7 +9,7 @@ redirect_from: description: "Learn how to use Sentry's Wasm integration and how it automatically reports errors and exceptions in your Wasm module." --- -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. +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. ### Install From 1c779e64e7a6dc8d26d5077877a098a7def3bbb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kamil=20Og=C3=B3rek?= Date: Wed, 20 Jan 2021 12:52:58 +0100 Subject: [PATCH 3/5] Update src/platforms/javascript/guides/wasm/index.mdx Co-authored-by: Rodolfo Carvalho --- src/platforms/javascript/guides/wasm/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platforms/javascript/guides/wasm/index.mdx b/src/platforms/javascript/guides/wasm/index.mdx index 0063581ce8f35..600d1f318d275 100644 --- a/src/platforms/javascript/guides/wasm/index.mdx +++ b/src/platforms/javascript/guides/wasm/index.mdx @@ -23,7 +23,7 @@ yarn add @sentry/browser @sentry/wasm npm install --save @sentry/browser @sentry/wasm ``` -and afterwards using it like this: +and afterwards use it like this: ```javascript import * as Sentry from "@sentry/browser"; From 52ac5855b1b0aeb494bd328898d8f8ae2dbf4715 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kamil=20Og=C3=B3rek?= Date: Wed, 20 Jan 2021 19:03:23 +0100 Subject: [PATCH 4/5] Update src/platforms/javascript/guides/wasm/index.mdx --- src/platforms/javascript/guides/wasm/index.mdx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/platforms/javascript/guides/wasm/index.mdx b/src/platforms/javascript/guides/wasm/index.mdx index 600d1f318d275..bac1a46e72def 100644 --- a/src/platforms/javascript/guides/wasm/index.mdx +++ b/src/platforms/javascript/guides/wasm/index.mdx @@ -1,11 +1,6 @@ --- title: Wasm sdk: sentry.javascript.wasm -redirect_from: - - /platforms/javascript/wasm/ - - /clients/wasm/ - - /sdks/react/ - - /platforms/wasm/ description: "Learn how to use Sentry's Wasm integration and how it automatically reports errors and exceptions in your Wasm module." --- From 31a12983e7f4b0b85112ec8aefc1b43e11d7c337 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kamil=20Og=C3=B3rek?= Date: Thu, 21 Jan 2021 11:38:38 +0100 Subject: [PATCH 5/5] Added keywords and compilation details --- src/platforms/javascript/guides/wasm/index.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/platforms/javascript/guides/wasm/index.mdx b/src/platforms/javascript/guides/wasm/index.mdx index bac1a46e72def..390ab28c13ed7 100644 --- a/src/platforms/javascript/guides/wasm/index.mdx +++ b/src/platforms/javascript/guides/wasm/index.mdx @@ -2,6 +2,7 @@ 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. @@ -66,3 +67,5 @@ pub fn internal_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.