Performance Monitoring

firekitPerformance wraps Firebase Performance Monitoring. It is browser-only — calls on the server are silently ignored.

import { firekitPerformance } from 'svelte-firekit';

Start and stop a trace manually

// Start a trace — returns a stop function
const stop = await firekitPerformance.startTrace('load-dashboard');

// ... do your work ...

// Stop the trace (records the duration)
stop();

Timed code block

measure wraps an async function and automatically records the duration:

const duration = await firekitPerformance.measure('render-posts', async () => {
  const posts = await fetchPosts();
  renderPosts(posts);
});

console.log(`render-posts took ${duration}ms`);

Custom attributes and metrics

When you need to attach metadata to a trace, use the trace object directly:

import type { PerformanceTrace } from 'svelte-firekit';

const { trace, stop } = await firekitPerformance.startTraceWithInstance('image-upload');

// Add custom attributes
trace.putAttribute('fileType', 'image/jpeg');
trace.putAttribute('userId', uid);

// Increment a custom counter metric
trace.incrementMetric('retries', 1);

// Run the upload
await uploadFile(file);

stop();

SvelteKit navigation tracing

Track page load performance for each navigation:

src/routes/+layout.svelte

<script lang="ts">
  import { beforeNavigate, afterNavigate } from '$app/navigation';
  import { firekitPerformance } from 'svelte-firekit';

  let stopTrace: (() => void) | null = null;

  beforeNavigate(() => {
    firekitPerformance.startTrace('page-navigation').then((stop) => {
      stopTrace = stop;
    });
  });

  afterNavigate(() => {
    stopTrace?.();
    stopTrace = null;
  });
</script>