Response helpers (json, error) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this SvelteKit endpoint return?

Consider this SvelteKit endpoint code. What is the JSON response when a GET request is made?

Svelte

import { json } from '@sveltejs/kit';

export function GET() {
  return json({ message: 'Hello from SvelteKit!' });
}

A A 404 error response

B A plain text response with content 'Hello from SvelteKit!'

C An HTML page with the text 'Hello from SvelteKit!'

D {"message":"Hello from SvelteKit!"}

💡 Hint

The json helper returns a JSON response with the given object as body.

The json helper from '@sveltejs/kit' creates a Response object with JSON content type and stringified body. So the client receives JSON with the message property.

❓ state_output

intermediate

What status code does this error helper send?

Given this SvelteKit endpoint, what HTTP status code will the client receive?

Svelte

import { error } from '@sveltejs/kit';

export function GET() {
  throw error(403, 'Access denied');
}

A 403 Forbidden

B 500 Internal Server Error

C 200 OK

D 404 Not Found

💡 Hint

The error helper throws an HTTP error with the given status code.

Throwing error(403, 'Access denied') causes SvelteKit to respond with status 403 and the message.

📝 Syntax

advanced

Which option correctly uses the json helper with headers?

You want to return JSON with a custom header 'X-Custom: 123'. Which code snippet is correct?

A return json({ success: true }, { header: { 'X-Custom': '123' } });

B return json({ success: true }, { headers: { 'X-Custom': '123' } });

C return json({ success: true }, { headers: { X-Custom: 123 } });

D return json({ success: true }, { headers: 'X-Custom: 123' });

💡 Hint

The second argument to json is an options object with a headers property as an object.

Option B correctly passes headers as an object with string keys and values. Others have typos or wrong types.

🔧 Debug

advanced

Why does this endpoint cause a runtime error?

This SvelteKit endpoint throws an error but the client gets a 500 error instead of 404. Why?

Svelte

import { error } from '@sveltejs/kit';

export function GET() {
  throw error('404', 'Not found');
}

A The status code must be a number, not a string, so '404' causes a runtime error.

B The error helper must be called inside a try-catch block.

C The error helper requires a third argument for the message.

D The error helper only accepts status codes 400 and above, so 404 is invalid.

💡 Hint

Check the type of the first argument to error().

The error helper expects a number status code. Passing a string like '404' causes a runtime type error.

🧠 Conceptual

expert

What happens if you return json() after throwing error() in the same endpoint?

Consider this code snippet in a SvelteKit endpoint. What is the actual response sent to the client?

Svelte

import { json, error } from '@sveltejs/kit';

export function GET() {
  throw error(401, 'Unauthorized');
  return json({ data: 'secret' });
}

A The client receives a 500 Internal Server Error because of unreachable code.

B The client receives a JSON response with { data: 'secret' } and status 200.

C The client receives a 401 Unauthorized error response with the message.

D The client receives no response and the request times out.

💡 Hint

Throwing error stops the function immediately, so code after throw does not run.

The throw statement interrupts execution and sends the error response. The return json() is never reached.