Hooks (handle, handleError, handleFetch) in Svelte - Step-by-Step Execution

Concept Flow - Hooks (handle, handleFetch, handleError)

Request received

↓

handle hook runs

↓

Fetch request?

Yes→handleFetch hook runs

↓

Fetch response returned

↓

Route processing

↓

Error occurs?

Yes→handleError hook runs

↓

Error handled or rethrown

↓

Response sent back to client

This flow shows how SvelteKit hooks run in order: handle runs first on every request, handleFetch wraps fetch calls, and handleError runs if an error happens.

Execution Sample

Svelte

export const handle = async ({ event, resolve }) => {
  console.log('handle start');
  const response = await resolve(event);
  console.log('handle end');
  return response;
};

This handle hook logs before and after the request is processed.

Execution Table

Step	Hook	Action	Output/Effect
1	handle	Logs 'handle start'	Console: handle start
2	handle	Calls resolve(event) to process request	Request processing continues
3	handleFetch	Intercepts fetch call inside resolve	Can modify request or response
4	handleFetch	Returns fetch response	Response passed back to resolve
5	handle	Logs 'handle end'	Console: handle end
6	handle	Returns response	Response sent to client
7	handleError	If error thrown during resolve	Logs or modifies error response
8	handleError	Returns error response or rethrows	Error response sent or propagated
9	-	No more hooks, request cycle ends	Request complete

💡 Request cycle ends after response is sent or error handled.

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 6	Final
event	Request info	Passed to resolve	Same	Same	Same
response	undefined	undefined	Fetch response	Response returned	Response sent
error	undefined	undefined	undefined	Set if error	Handled or rethrown

Key Moments - 3 Insights

Why does handle hook call resolve(event)?

Because resolve(event) continues processing the request and returns the response. Without calling resolve, the request would not proceed (see execution_table step 2).

When does handleFetch run during the request?

handleFetch runs whenever a fetch call happens inside resolve(event), allowing interception of fetch requests (see execution_table steps 3 and 4).

What happens if an error occurs during resolve(event)?

handleError runs to catch and handle the error, allowing logging or custom error responses before sending back to the client (see execution_table steps 7 and 8).

Visual Quiz - 3 Questions

Look at the execution table, what does the handle hook do at step 5?

A Intercepts fetch request

B Calls resolve(event)

C Logs 'handle end'

D Handles an error

💡 Hint

Check the 'Action' column at step 5 in the execution_table.

At which step does handleFetch return the fetch response?

A Step 2

B Step 4

C Step 6

D Step 7

💡 Hint

Look for 'Returns fetch response' in the 'Action' column.

If no error occurs during resolve, which hook does NOT run?

A handleError

B handle

C handleFetch

D resolve

💡 Hint

See execution_table steps 7 and 8 about error handling.

Concept Snapshot

SvelteKit hooks run in this order:
1. handle: runs on every request, calls resolve(event) to continue.
2. handleFetch: wraps fetch calls inside resolve for interception.
3. handleError: runs if an error occurs during resolve.
Use handle to modify requests/responses, handleFetch to modify fetch, handleError to catch errors.

Full Transcript

In SvelteKit, hooks let you run code during the request lifecycle. The handle hook runs first on every request and must call resolve(event) to continue processing. Inside resolve, fetch calls trigger handleFetch, which can modify fetch requests or responses. If an error happens during resolve, handleError runs to catch and handle it. This flow ensures you can customize requests, fetches, and errors in one place.