All posts

How to Set Up Distributed Tracing in Svelte

Step-by-step tutorial for configuring Bugsly distributed tracing in Svelte. Includes code snippets and optimization tips.

Overview

That slow API call in your Svelte app — is it the database? A downstream service? Network latency? Distributed tracing tells you definitively.

Bugsly provides a first-class Svelte integration for distributed tracing that takes minutes to set up and immediately starts delivering value.

Installation and Setup

Start by adding Bugsly to your project:

npm install @bugsly/svelte

Next, initialize the SDK in your application:

// hooks.client.js
import * as Bugsly from "@bugsly/svelte";

Bugsly.init({
  dsn: "YOUR_BUGSLY_DSN",
  tracesSampleRate: 1.0,
  integrations: [new Bugsly.BrowserTracing()],
});

How It Works

Once initialized, the Bugsly Svelte SDK automatically instruments your application. Here's what happens behind the scenes:

  • Automatic error capture: Unhandled exceptions and promise rejections are caught and reported with full stack traces
  • Context enrichment: Each event includes environment data, request details, and user context where available
  • Intelligent grouping: Similar errors are grouped together so you see issues, not individual events
  • Performance data: Transaction traces help you understand the performance impact of errors

Customizing Your Integration

For Svelte projects, we recommend enabling these additional features after the basic setup:

  1. Source maps (if applicable) — upload source maps during your build so Bugsly can display readable stack traces
  2. User feedback — prompt users who encounter errors for additional context
  3. Custom tags — add business-specific metadata to events for filtering and analysis

Bugsly's dashboard will become your team's go-to tool for understanding what's happening in your Svelte production environment.

Next Steps

With distributed tracing active, use Bugsly's trace explorer to find slow spans and identify bottlenecks across services. Set up performance alerts for transactions that exceed your latency budgets. Tag traces with custom attributes to filter by specific users, endpoints, or business operations.

Try Bugsly Free

AI-powered error tracking that explains your bugs. Set up in 2 minutes, free forever for small projects.

Get Started Free