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.

Practice

1. What is the main purpose of the json() helper in SvelteKit server endpoints?

easy

A. To parse incoming JSON requests

B. To throw an HTTP error with a message

C. To send a JSON response back to the client

D. To redirect the user to another page

Solution

1. Step 1: Understand the role of json()

   The json() helper formats data as a JSON response for the client.

2. Step 2: Differentiate from other helpers

   Unlike error(), which throws HTTP errors, json() sends data successfully.

3. Final Answer:

   To send a JSON response back to the client -> Option C

4. Quick Check:

   json() sends JSON data [OK]

Hint: json() sends data; error() throws errors [OK]

Common Mistakes:

• Confusing json() with error()
• Thinking json() parses requests
• Assuming json() redirects

2. Which of the following is the correct way to return a JSON response with a status code 200 in a SvelteKit endpoint?

easy

A. return json({ message: 'Success' }, 200);

B. return error(200, { message: 'Success' });

C. return new Response({ message: 'Success' }, 200);

D. return json({ message: 'Success' }, { status: 200 });

Solution

1. Step 1: Check json() syntax

   The json() helper takes data as first argument and an options object with status as second.

2. Step 2: Validate options object usage

   return json({ message: 'Success' }, { status: 200 }); correctly uses { status: 200 } as the second argument.

3. Final Answer:

   return json({ message: 'Success' }, { status: 200 }); -> Option D

4. Quick Check:

   json(data, { status }) syntax [OK]

Hint: json() needs options object for status [OK]

Common Mistakes:

• Passing status as a separate argument without object
• Using error() to send success responses
• Using Response constructor incorrectly

3. Consider this SvelteKit endpoint code:

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

export function GET() {
  const data = { user: 'Alice' };
  if (!data.user) {
    throw error(404, 'User not found');
  }
  return json(data);
}

What will be the HTTP status code and response if data.user is missing?

medium

A. Status 200 with empty JSON object

B. Status 404 with message 'User not found'

C. Status 500 with server error

D. Status 200 with user data

Solution

1. Step 1: Analyze the condition

   If data.user is missing (falsy), the code throws error(404, 'User not found').

2. Step 2: Understand error() behavior

   The error() helper throws an HTTP error with the given status and message.

3. Final Answer:

   Status 404 with message 'User not found' -> Option B

4. Quick Check:

   Missing user triggers error(404) [OK]

Hint: error() throws HTTP errors with status and message [OK]

Common Mistakes:

• Assuming json() runs even if error is thrown
• Thinking error() returns JSON data
• Confusing status codes for errors

4. Identify the error in this SvelteKit endpoint code snippet:

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

export function POST() {
  const data = { success: true };
  return error(200, 'All good');
}

medium

A. Using error() with status 200 is incorrect

B. Missing return type annotation

C. POST function must be async

D. json() should be used instead of error() to send success

Solution

1. Step 1: Check status code validity

   The error() helper requires status codes 400-599. Using 200 triggers "Non-error status code 200".

2. Step 2: Correct helper for success

   For success (status 200), use json() instead of error().

3. Final Answer:

   Using error() with status 200 is incorrect -> Option A

4. Quick Check:

   Use json() for success, error() for errors [OK]

Hint: error() is for errors, not success responses [OK]

Common Mistakes:

• Using error() with 200 status
• Not returning json() for success
• Assuming error() can send normal data

5. You want to create a SvelteKit endpoint that returns a JSON list of items but throws a 400 error if the list is empty. Which code snippet correctly implements this behavior?

hard

A. export function GET() {
const items = [];
if (items.length === 0) {
throw error(400, 'No items found');
}
return json(items);
}

B. export function GET() {
const items = [];
if (!items) {
return error(400, 'No items found');
}
return json(items);
}

C. export function GET() {
const items = [];
if (items.length === 0) {
return json({ error: 'No items found' }, { status: 400 });
}
return json(items);
}

D. export function GET() {
const items = [];
if (items.length === 0) {
throw json({ error: 'No items found' }, { status: 400 });
}
return json(items);
}

Solution

1. Step 1: Check error throwing for empty list

   export function GET() { const items = []; if (items.length === 0) { throw error(400, 'No items found'); } return json(items); } correctly throws error(400, 'No items found') when the list is empty.

2. Step 2: Validate response for non-empty list

   It returns json(items) properly when items exist.

3. Final Answer:

   export function GET() { const items = []; if (items.length === 0) { throw error(400, 'No items found'); } return json(items); } -> Option A

4. Quick Check:

   Throw error() for HTTP errors, json() for data [OK]

Hint: Throw error() for bad status, json() for good data [OK]

Common Mistakes:

• Returning error() instead of throwing it
• Using json() with error status instead of throwing error()
• Throwing json() which is invalid