Fix Middleware Error in SvelteKit

SvelteKit Server Hook Errors

SvelteKit uses hooks.server.ts as its middleware layer. The handle function intercepts every request, and errors here can break your entire application.

Basic Handle Hook

// src/hooks.server.ts
import type { Handle } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {
  // Before route handler
  const session = await getSession(event.cookies);
  event.locals.user = session?.user ?? null;

  // CRITICAL: always call resolve
  const response = await resolve(event);

  // After route handler
  response.headers.set('X-Custom-Header', 'value');
  return response;
};

Sequencing Multiple Hooks

Use SvelteKit's sequence helper:

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

const auth: Handle = async ({ event, resolve }) => {
  event.locals.user = await getUser(event);
  return resolve(event);
};

const logging: Handle = async ({ event, resolve }) => {
  const start = Date.now();
  const response = await resolve(event);
  console.log(`${event.request.method} ${event.url.pathname} ${Date.now() - start}ms`);
  return response;
};

export const handle = sequence(logging, auth);

Error Hook

import type { HandleServerError } from '@sveltejs/kit';

export const handleError: HandleServerError = async ({ error, event }) => {
  // Report to Bugsly
  await reportError(error, {
    url: event.url.toString(),
    method: event.request.method,
  });

  return {
    message: 'Internal Error',
    code: 'UNEXPECTED'
  };
};

Common Pitfall: Forgetting to Return resolve()

If you conditionally skip resolve(event), the request hangs forever. Always ensure every code path either returns a Response or calls resolve().

Bugsly integrates directly with SvelteKit's handleError hook, capturing all unhandled server errors with full request context.