Docs
Svelte
Quick Start

Svelte Quick Start

Integrate Traceway into your Svelte or SvelteKit application with the @tracewayapp/svelte package.

Installation

npm install @tracewayapp/svelte

Setup

Call setupTraceway in your root layout. Do not wrap it in an if (browser) guard. setupTraceway is what puts the capture functions into Svelte's context, so if it is skipped during SSR, every child component that calls getTraceway() throws and the page returns a 500. The call is safe on the server: the rrweb recorder and the fetch/XHR instrumentation only start when window exists. Session recording is on by default, so the last ~30s of DOM events ship with every captured exception.

<!-- src/routes/+layout.svelte -->
<script>
  import { setupTraceway } from "@tracewayapp/svelte";
 
  setupTraceway({
    connectionString: "your-token@https://traceway.example.com/api/report",
  });
</script>
 
<slot />

The same layout works in a non-SvelteKit Svelte app. On Svelte 5, write {@render children()} instead of <slot /> and onclick instead of on:click. The legacy forms below still compile, with a deprecation warning.

Capture Errors in Components

Use getTraceway in child components:

<script>
  import { getTraceway } from "@tracewayapp/svelte";
 
  const { captureException } = getTraceway();
 
  async function handleSubmit() {
    try {
      await submitForm();
    } catch (error) {
      captureException(error);
    }
  }
</script>
 
<button on:click={handleSubmit}>Submit</button>

With Options

<script>
  import { setupTraceway } from "@tracewayapp/svelte";
 
  setupTraceway({
    connectionString: "your-token@https://traceway.example.com/api/report",
    options: {
      debug: true,
      version: "1.0.0",
    },
  });
</script>
 
<slot />

Test Your Integration

<script>
  import { getTraceway } from "@tracewayapp/svelte";
 
  const { captureException } = getTraceway();
 
  function sendTestError() {
    captureException(new Error("Test error from Svelte"));
  }
</script>
 
<button on:click={sendTestError}>Send Test Error</button>

Click the button and check your Traceway dashboard to verify the error appears.

Distributed Tracing

The SDK automatically instruments both fetch and XMLHttpRequest to propagate a traceway-trace-id header on same-origin requests. This links frontend errors to the backend requests that caused them.

Axios needs no setup. It uses XMLHttpRequest in the browser, which the SDK already instruments. Do not register createAxiosInterceptor() in a browser app: it adds a second ID under the same header name, and the combined value is rejected by the backend.

Your backend still has to set the incoming header on its server span as the traceway.distributed_trace_id attribute, or the two sides never join. See the Distributed Tracing guide for the middleware.

Next Steps

ComposablesContext Setup