Response helpers (json, error) in Svelte - Step-by-Step Execution

Concept Flow - Response helpers (json, error)

Request received

↓

Process data

↓

If success

yes→Use json() helper

↓

Send JSON response

↓

If error

yes→Use error() helper

↓

Send error response

This flow shows how a SvelteKit endpoint uses json() to send data on success, or error() to send error responses.

Execution Sample

Svelte

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

export function GET() {
  const data = { message: 'Hello' };
  if (!data) throw error(404, 'Not found');
  return json(data);
}

This code returns JSON data if found, otherwise throws a 404 error using SvelteKit helpers.

Execution Table

Step	Action	Condition	Helper Used	Response Sent
1	GET request received	N/A	N/A	N/A
2	Check if data exists	data is { message: 'Hello' }	N/A	N/A
3	Data exists, no error thrown	true	N/A	N/A
4	Return json(data)	N/A	json()	JSON { message: 'Hello' } sent
5	End of function	N/A	N/A	Response complete

💡 Function ends after sending JSON response with json() helper

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
data	{ message: 'Hello' }	{ message: 'Hello' }	{ message: 'Hello' }	{ message: 'Hello' }

Key Moments - 2 Insights

Why do we use json() instead of returning the object directly?

json() formats the data properly as a JSON response with correct headers, as shown in step 4 of the execution_table.

What happens if data is missing or invalid?

The error() helper is used to throw an HTTP error with status and message, stopping normal response flow (not shown in this example).

Visual Quiz - 3 Questions

Look at the execution_table at step 4, what helper is used to send the response?

A json()

B error()

C fetch()

D redirect()

💡 Hint

Check the 'Helper Used' column at step 4 in the execution_table

At which step does the code check if data exists?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at the 'Condition' column to find where data is checked

If data was null, which helper would be used to respond?

A json()

B error()

C redirect()

D fetch()

💡 Hint

Recall the key_moments about error handling when data is missing

Concept Snapshot

SvelteKit response helpers:
- Use json(data) to send JSON with correct headers
- Use error(status, message) to throw HTTP errors
- json() returns a Response with JSON body
- error() stops execution and sends error response
- Helps keep endpoint code clean and consistent

Full Transcript

In SvelteKit endpoints, you handle responses using helpers. When your data is ready and valid, you use the json() helper to send it back as a JSON response with proper headers. If something goes wrong, like missing data, you use the error() helper to throw an HTTP error with a status code and message. This stops normal processing and sends an error response. The flow starts with receiving a request, checking data, then either returning json(data) or throwing error(status, message). This keeps your code simple and your responses correct.