Hooks (handle, handleError, handleFetch) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a basic handle hook that logs each request method.

Svelte

export const handle = async ({ event, resolve }) => {
  console.log(event.request.method);
  return await [1](event);
};

Drag options to blanks, or click blank then click option'

Aresolve

Bhandle

Cfetch

DhandleFetch

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to call resolve and returning nothing.

Calling a wrong function like fetch or handleFetch instead of resolve.

The handle hook must call resolve(event) to continue processing the request and generate a response.

2fill in blank

medium

Complete the code to define a handleError hook that logs the error message.

Svelte

export const handleError = ({ error }) => {
  console.error('Error:', [1]);
};

Drag options to blanks, or click blank then click option'

Aerror.name

Berror.stack

Cerror.message

Derror.toString()

Attempts:

3 left

💡 Hint

Common Mistakes

Logging the whole error object instead of the message.

Using error.toString() which may include extra info.

The handleError hook receives an error object. Logging error.message shows the error description.

3fill in blank

hard

Fix the error in the handleFetch hook to correctly modify the request headers.

Svelte

export const handleFetch = async ({ request, fetch }) => {
  const newHeaders = new Headers(request.headers);
  newHeaders.set('X-Custom-Header', 'SvelteKit');
  const newRequest = new Request(request.url, {
    method: request.method,
    headers: [1],
    body: request.body
  });
  return fetch(newRequest);
};

Drag options to blanks, or click blank then click option'

AnewHeaders

Brequest.headers

Crequest

Dheaders

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the original request.headers which is immutable.

Passing the whole request object instead of headers.

To modify headers, create a new Headers object and pass it as the headers option in the new Request.

4fill in blank

hard

Fill both blanks to create a handle hook that adds a custom header to the response.

Svelte

export const handle = async ({ event, resolve }) => {
  const response = await resolve(event);
  response.headers.[1]('X-Handled-By', [2]);
  return response;
};

Drag options to blanks, or click blank then click option'

Aset

B'SvelteKit'

Cappend

D'handle'

Attempts:

3 left

💡 Hint

Common Mistakes

Using append which adds multiple headers instead of replacing.

Passing a variable without quotes for the header value.

The set method adds or replaces a header. The value must be a string, so use 'SvelteKit'.

5fill in blank

hard

Fill all three blanks to create a handleFetch hook that adds an authorization token to outgoing requests.

Svelte

export const handleFetch = async ({ request, fetch }) => {
  const modifiedHeaders = new Headers([1]);
  modifiedHeaders.set('Authorization', [2]);
  const modifiedRequest = new Request(request.url, {
    method: [3],
    headers: modifiedHeaders,
    body: request.body
  });
  return fetch(modifiedRequest);
};

Drag options to blanks, or click blank then click option'

Arequest.headers

B'Bearer abc123token'

Crequest.method

Drequest

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the whole request object instead of headers to Headers constructor.

Using a variable without quotes for the token string.

Hardcoding method instead of using request.method.

Start with the original request headers, add the Authorization header with a token string, and keep the original request method.

Practice

1. What is the main purpose of the handle hook in SvelteKit?

easy

A. To catch and handle errors during server-side rendering

B. To define client-side event handlers for UI elements

C. To intercept and modify fetch requests made by the app

D. To manage and modify incoming requests and outgoing responses

Solution

1. Step 1: Understand the role of handle hook

   The handle hook runs on every request and can modify the request or response.

2. Step 2: Compare with other hooks

   handleError is for errors, handleFetch is for fetch interception, so they don't manage requests/responses directly.

3. Final Answer:

   To manage and modify incoming requests and outgoing responses -> Option D

4. Quick Check:

   handle = manage requests/responses [OK]

Hint: Remember: handle = request/response management [OK]

Common Mistakes:

• Confusing handle with handleError
• Thinking handleFetch manages requests directly
• Assuming handle is for client-side events

2. Which of the following is the correct syntax to define a handleError hook in hooks.server.js?

easy

A. export function handleError({ request, response }) { return response; }

B. export async function handleError(event) { console.error(event.error); }

C. export function handleError({ error, event }) { return { message: error.message }; }

D. export function handleError({ fetch, event }) { return fetch(event); }

Solution

1. Step 1: Recall handleError parameters

   The handleError hook receives an object with error and event.

2. Step 2: Check syntax correctness

   export function handleError({ error, event }) { return { message: error.message }; } correctly destructures { error, event } and returns an object with a message.

3. Final Answer:

   export function handleError({ error, event }) { return { message: error.message }; } -> Option C

4. Quick Check:

   handleError({ error, event }) correct syntax [OK]

Hint: handleError gets { error, event } object [OK]

Common Mistakes:

• Using wrong parameters like request or fetch
• Not destructuring the error object
• Returning response instead of error info

3. Given this handleFetch hook, what will be logged when the app fetches /api/data?

export async function handleFetch({ request, fetch }) {
  console.log('Fetching:', request.url);
  const response = await fetch(request);
  return response;
}

medium

A. Fetching: http://localhost/api/data

B. Fetching: /api/data

C. Fetching: undefined

D. No output logged

Solution

1. Step 1: Understand handleFetch parameters

   The request object has a full URL in its url property.

2. Step 2: Analyze the console.log statement

   The code logs 'Fetching:' plus the full request.url, which includes the origin like 'http://localhost/api/data'.

3. Final Answer:

   Fetching: http://localhost/api/data -> Option A

4. Quick Check:

   request.url logs full URL [OK]

Hint: request.url in handleFetch is full URL [OK]

Common Mistakes:

• Expecting only path instead of full URL
• Thinking request.url is undefined
• Assuming no console output

4. Identify the error in this handle hook code snippet:

export async function handle({ event, resolve }) {
  const response = await resolve(event);
  response.headers.set('X-Custom', 'value');
  return response;
}

medium

A. Cannot modify headers on the response object directly; it is immutable

B. Missing await before resolve(event)

C. Incorrect parameter names; should be { request, resolve }

D. handle hook must be synchronous, not async

Solution

1. Step 1: Check response header modification

   The response object is immutable; headers cannot be set directly on it.

2. Step 2: Confirm other parts are correct

   Await is used correctly, parameter names are valid, and handle can be async.

3. Final Answer:

   Cannot modify headers on the response object directly; it is immutable -> Option A

4. Quick Check:

   Response headers are immutable [OK]

Hint: Response headers are immutable; clone before modifying [OK]

Common Mistakes:

• Trying to set headers directly on response
• Confusing parameter names
• Thinking handle must be synchronous

5. You want to add a custom header X-User with the username from event.locals.user to every fetch request made by your app. Which handleFetch hook implementation correctly achieves this?

hard

A. export async function handleFetch({ request, fetch }) {
request.headers.set('X-User', event.locals.user);
return fetch(request);
}

B. export async function handleFetch({ request, fetch, event }) {
const modifiedRequest = new Request(request, {
headers: { ...Object.fromEntries(request.headers), 'X-User': event.locals.user }
});
return fetch(modifiedRequest);
}

C. export async function handleFetch({ request, fetch, event }) {
request.headers.append('X-User', event.locals.user);
return fetch(request);
}

D. export async function handleFetch({ request, fetch, event }) {
const headers = new Headers(request.headers);
headers.set('X-User', event.locals.user);
const modifiedRequest = new Request(request.url, { method: request.method, headers });
return fetch(modifiedRequest);
}

Solution

1. Step 1: Understand immutability of request headers

   Request headers are immutable; to modify them, create a new Request with new headers while preserving other properties like body.

2. Step 2: Analyze the correct implementation

   The code that uses new Request(request, { headers: { ...Object.fromEntries(request.headers), 'X-User': event.locals.user } }) clones the original request fully (including body, method, etc.) and overrides the headers correctly.

3. Step 3: Identify errors in other options

   Directly modifying request.headers with set or append fails because headers are immutable. Creating a new Request with only url, method, and headers omits the body and other request properties.

4. Final Answer:

   export async function handleFetch({ request, fetch, event }) { const modifiedRequest = new Request(request, { headers: { ...Object.fromEntries(request.headers), 'X-User': event.locals.user } }); return fetch(modifiedRequest); } -> Option B

5. Quick Check:

   new Request(request, { headers: ... }) clones fully [OK]

Hint: Clone request with new Request(request, { headers: updated }) [OK]

Common Mistakes:

• Modifying headers directly on original request
• Not cloning request before changing headers
• Omitting request body when recreating Request