SvelteKit Application Logging Integration

LogTide’s SvelteKit SDK integrates through SvelteKit’s hooks system — handle, handleError, and handleFetch — with support for both server-side and client-side error capture.

Why use LogTide with SvelteKit?

• Hook-based: Integrates through SvelteKit’s native hooks
• Fetch instrumentation: Trace propagation on server-side fetches
• Form actions: Capture errors in form action handlers
• Client + server: Error capture on both sides
• Load functions: Context available in server load functions

Prerequisites

• SvelteKit 2.x
• Node.js 18+
• LogTide instance with a DSN

Installation

npm install @logtide/sveltekit

Quick Start

Server Hooks

// src/hooks.server.ts
import { logtideHandle, logtideHandleError } from '@logtide/sveltekit';

export const handle = logtideHandle({
  dsn: import.meta.env.LOGTIDE_DSN,
  service: 'sveltekit-app',
  environment: import.meta.env.MODE,
});
export const handleError = logtideHandleError();

Client Hooks

// src/hooks.client.ts
import { logtideHandleError } from '@logtide/sveltekit';

export const handleError = logtideHandleError();

Composing with Other Hooks

import { sequence } from '@sveltejs/kit/hooks';
import { logtideHandle } from '@logtide/sveltekit';

export const handle = sequence(
  logtideHandle({
    dsn: import.meta.env.LOGTIDE_DSN,
    service: 'sveltekit-app',
    environment: import.meta.env.MODE,
  }),
  ({ event, resolve }) => {
    // Your custom logic
    return resolve(event);
  }
);

Fetch Instrumentation

// src/hooks.server.ts
import { logtideHandleFetch } from '@logtide/sveltekit';

export const handleFetch = logtideHandleFetch();
// Outgoing fetches from load functions include traceparent headers

Load Functions

// src/routes/users/[id]/+page.server.ts
import { hub } from '@logtide/core';

export async function load({ params, fetch }) {
  hub.captureLog('info', 'Loading user', { userId: params.id });

  const res = await fetch(`/api/users/${params.id}`);
  if (!res.ok) {
    hub.captureLog('warn', 'User not found', { userId: params.id });
    throw error(404, 'Not found');
  }

  return { user: await res.json() };
}

Form Actions

// src/routes/settings/+page.server.ts
import { hub } from '@logtide/core';

export const actions = {
  update: async ({ request }) => {
    const data = await request.formData();

    hub.addBreadcrumb({
      type: 'ui',
      category: 'form',
      message: 'Settings form submitted',
      timestamp: Date.now(),
    });

    try {
      await updateSettings(Object.fromEntries(data));
      hub.captureLog('info', 'Settings updated');
      return { success: true };
    } catch (error) {
      hub.captureError(error);
      return fail(500, { message: 'Update failed' });
    }
  },
};

Next Steps

• JavaScript SDK - Core SDK reference
• SvelteKit SDK Reference - Full API documentation
• Docker Integration - Container deployments