Skip to main content

Send Telemetry to Lightstep from WebAssembly in the Browser

Observability in Lightstep from WebAssembly


Enables the extraction of traces/spans from Wasm modules executing in a browser and emits them to Lightstep.


Install the Lightstep Adapter via npm:

npm i @dylibso/observe-sdk-lightstep


A basic web application that loads a Wasm module and executes it using the native WebAssembly runtime with a WASI browser shim. This assumes you are using a bundler such as esbuild or Webpack.

import { LightstepAdapter } from "@dylibso/observe-sdk-lightstep";
import { File, OpenFile, WASI } from "@bjorn3/browser_wasi_shim";

// setup some custom configuration for the adapter
const config = {
serviceName: "web",
emitTracesInterval: 1000,
traceBatchMax: 100,
host: "",

// create a new instance of the adapter with the config
const adapter = new LightstepAdapter(config);

// create an optional filter that instructs the adapter to throw away any
// spans below a configured threshold
const opts = {
spanFilter: {
minDurationMicroseconds: 100,

// fetch a wasm module and load up the bytes
const resp = await fetch("count_vowels.instr.wasm");
const bytes = await resp.arrayBuffer();

// start the adapter with the wasm module bytes and options
const traceContext = await adapter.start(bytes, opts);

// setup some files for stdin, stdout, and stderr
let fds = [
new OpenFile(
new File(
new TextEncoder("utf-8").encode(`count these vowels for me please`),
), // stdin
new OpenFile(new File([])), // stdout
new OpenFile(new File([])), // stderr

// instantiate the wasm module
let wasi = new WASI([], [], fds);
const instance = await WebAssembly.instantiate(bytes, {
"wasi_snapshot_preview1": wasi.wasiImport,

// execute the module
let utf8decoder = new TextDecoder();

// instruct the adapter to stop the trace

Adapter Configuration

You may modify the behavior of your adapter by passing in a configuration when initializing the adapter. A configuration has the following fields:

const config = {
// the URL of your OpenTelemetry collector
host: "",
// your Lightstep API key
// the dataset to group your observability data under
dataset: "web",
// how often to send new traces
emitTracesInterval: 1000,
// the maximum number of traces to send per request
traceBatchMax: 100,
const adapter = new LightstepAdapter(config);