Hooks (handle, handleError, handleFetch) in Svelte - Mini Project: Build & Apply

Using SvelteKit Hooks: handle, handleError, and handleFetch

📖 Scenario: You are building a simple SvelteKit app that fetches user data from an API. You want to add hooks to manage requests, handle errors gracefully, and modify fetch calls globally.

🎯 Goal: Build a SvelteKit hooks.server.js file that implements handle to log requests, handleError to catch and log errors, and handleFetch to add a custom header to all fetch requests.

📋 What You'll Learn

Create a handle hook that logs the request method and URL

Add a handleError hook that logs errors and returns a custom message

Implement a handleFetch hook that adds a X-Custom-Header to all fetch requests

💡 Why This Matters

🌍 Real World

Hooks in SvelteKit let you control how requests and errors are handled globally, which is useful for logging, authentication, and modifying fetch calls in real apps.

💼 Career

Understanding hooks is important for building robust SvelteKit applications that handle errors and requests cleanly, a common requirement in professional web development.

1

Create the handle hook to log requests

Create a handle function in hooks.server.js that takes { event, resolve } as parameters. Inside, log the request method and URL using console.log. Then return the result of calling resolve(event).

Svelte

export async function handle({ event, resolve }) {
    // Your code here
}

Hint

Use console.log to print the request method and URL from event.request.method and event.url.

2

Add the handleError hook to log errors

Add an async handleError function in hooks.server.js that takes { error, event } as parameters. Inside, log the error message with console.error. Return an object with message set to 'An unexpected error occurred'.

Svelte

export async function handle({ event, resolve }) {
    console.log(`Request: ${event.request.method} ${event.url}`);
    return await resolve(event);
}

export async function handleError({ error, event }) {
    // Your code here
}

Hint

Use console.error to log the error message from error.message. Return an object with a friendly message.

3

Implement the handleFetch hook to add a custom header

Add an async handleFetch function in hooks.server.js that takes { request, fetch } as parameters. Clone the request and add a header X-Custom-Header with value MyHeaderValue. Use the modified request with fetch and return the response.

Svelte

export async function handle({ event, resolve }) {
    console.log(`Request: ${event.request.method} ${event.url}`);
    return await resolve(event);
}

export async function handleError({ error, event }) {
    console.error('Error:', error.message);
    return { message: 'An unexpected error occurred' };
}

export async function handleFetch({ request, fetch }) {
    // Your code here
}

Hint

Create a new Request object copying the original, then add the header with headers.set.

4

Complete the hooks.server.js with all hooks combined

Ensure your hooks.server.js file exports all three hooks: handle, handleError, and handleFetch with the exact implementations from previous steps.

Svelte

export async function handle({ event, resolve }) {
    console.log(`Request: ${event.request.method} ${event.url}`);
    return await resolve(event);
}

export async function handleError({ error, event }) {
    console.error('Error:', error.message);
    return { message: 'An unexpected error occurred' };
}

export async function handleFetch({ request, fetch }) {
    const modifiedRequest = new Request(request, {
        headers: new Headers(request.headers)
    });
    modifiedRequest.headers.set('X-Custom-Header', 'MyHeaderValue');
    return fetch(modifiedRequest);
}

// Your code here if needed

Hint

Make sure all three functions are exported and present in the file.