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. The if (browser) guard keeps the rrweb recorder out of the SSR bundle. Session recording is on by default — the last ~30s of DOM events ship with every captured exception:

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

For a non-SvelteKit Svelte app, drop the if (browser) guard and import nothing from $app/environment.

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 fetch to propagate a traceway-trace-id header on same-origin requests. This links frontend errors to the backend requests that caused them — no extra configuration needed.

For Axios users, add the interceptor to your instance:

import axios from "axios";
import { createAxiosInterceptor } from "@tracewayapp/frontend";
 
const api = axios.create({ baseURL: "/api" });
api.interceptors.request.use(createAxiosInterceptor());

See the Distributed Tracing guide for full details.

Next Steps

ComposablesContext Setup