Thrown responses for HTTP errors in Remix - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when a thrown response is caught in a Remix loader?

Consider a Remix loader that throws a response with status 404. What will the component render if it catches this thrown response?

Remix

export async function loader() {
  throw new Response('Not Found', { status: 404 });
}

export default function Component() {
  const data = useLoaderData();
  return <div>{data.message}</div>;
}

A The component renders the error boundary UI if defined for 404 status.

B The component renders nothing because the loader never returns data.

C The component renders 'Not Found' inside the div.

D The component crashes with an uncaught error.

💡 Hint

Think about how Remix handles thrown responses and error boundaries.

In Remix, throwing a response with a status like 404 triggers the error boundary for that route. The component itself does not render normally because the loader did not return data but threw an error response.

📝 Syntax

intermediate

Which option correctly throws a 401 Unauthorized response in a Remix action?

Choose the correct syntax to throw a 401 Unauthorized response inside a Remix action function.

Remix

export async function action({ request }) {
  // throw unauthorized response here
}

A return new Response('Unauthorized', { status: 401 });

B throw Response('Unauthorized', 401);

C throw new Error('Unauthorized', 401);

D throw new Response('Unauthorized', { status: 401 });

💡 Hint

Remember how to create a Response object with a status code.

The correct way to throw a response with a status code in Remix is to create a new Response object with the message and status, then throw it.

🔧 Debug

advanced

Why does this thrown response not trigger the error boundary?

Given this loader code, why does the error boundary not render when the response is thrown?

Remix

export async function loader() {
  const res = await fetch('https://api.example.com/data');
  if (!res.ok) {
    throw new Response('API Error', { status: res.status });
  }
  return res.json();
}

export default function Component() {
  const data = useLoaderData();
  return <div>{data.title}</div>;
}

A The thrown response is not an Error object, so Remix ignores it.

B The thrown response is caught by a parent route's error boundary, so this route's error boundary does not show.

C The loader returns data anyway, so no error boundary triggers.

D The thrown response status is not 4xx or 5xx, so error boundary is skipped.

💡 Hint

Consider how Remix nests routes and error boundaries.

Remix error boundaries are hierarchical. If a parent route has an error boundary, it will catch thrown responses from child routes first, preventing the child's error boundary from rendering.

❓ state_output

advanced

What is the status code of the response when throwing a custom Response in Remix?

In this loader, what status code will the browser receive?

Remix

export async function loader() {
  throw new Response('Forbidden', { status: 403, statusText: 'Forbidden' });
}

A 500

B 200

C 403

D 404

💡 Hint

Check the status property of the thrown Response.

The thrown Response has status 403, so the browser receives a 403 Forbidden status code.

🧠 Conceptual

expert

How does Remix differentiate between thrown responses and thrown errors?

Which statement best describes how Remix treats thrown Response objects versus thrown Error objects?

A Thrown Response objects trigger error boundaries with HTTP status info; thrown Error objects trigger error boundaries without status info.

B Thrown Response objects are ignored; only thrown Error objects trigger error boundaries.

C Thrown Response objects and Error objects are treated the same by Remix.

D Thrown Response objects cause the app to crash; thrown Error objects show error boundaries.

💡 Hint

Think about how Remix uses HTTP status codes in error handling.

Remix uses thrown Response objects to provide HTTP status codes and messages to error boundaries, allowing custom UI per status. Thrown Error objects trigger error boundaries but lack HTTP status info.

Practice

1. What does throw new Response do in Remix when handling HTTP errors?

easy

A. It logs an error to the console without affecting the response.

B. It sends an HTTP error response with a status code and message.

C. It automatically redirects the user to a different page.

D. It silently ignores the error and continues execution.

Solution

1. Step 1: Understand the purpose of throw new Response

   This syntax is used to create and throw an HTTP response with a specific status code and message.

2. Step 2: Recognize its effect in Remix

   Throwing this response stops normal execution and sends the error response to the client.

3. Final Answer:

   It sends an HTTP error response with a status code and message. -> Option B

4. Quick Check:

   Thrown response = HTTP error sent [OK]

Hint: Throwing Response sends HTTP error with status code [OK]

Common Mistakes:

• Thinking it only logs errors without response
• Assuming it redirects automatically
• Believing it ignores errors silently

2. Which of the following is the correct syntax to throw a 404 error with message "Not Found" in Remix?

easy

A. throw Response("Not Found", 404);

B. throw new Error(404, "Not Found");

C. throw new Response("Not Found", { status: 404 });

D. throw Response.new("Not Found", { code: 404 });

Solution

1. Step 1: Recall the correct syntax for throwing a Response

   It requires the message as first argument and an options object with status code.

2. Step 2: Check each option

   throw new Response("Not Found", { status: 404 }); matches the correct syntax: throw new Response("Not Found", { status: 404 });. Others have wrong order, missing 'new', or wrong parameters.

3. Final Answer:

   throw new Response("Not Found", { status: 404 }); -> Option C

4. Quick Check:

   Correct syntax uses new Response with status option [OK]

Hint: Use 'new Response(message, {status: code})' to throw errors [OK]

Common Mistakes:

• Omitting 'new' keyword
• Passing status code as second argument directly
• Using Error instead of Response

3. What will be the HTTP status code and body sent to the client when this code runs?

throw new Response("Unauthorized", { status: 401 });

medium

A. Status 401 with body "Unauthorized"

B. Status 200 with body "Unauthorized"

C. Status 500 with empty body

D. Status 404 with body "Not Found"

Solution

1. Step 1: Analyze the thrown Response

   The code throws a Response with message "Unauthorized" and status 401.

2. Step 2: Understand Remix behavior on thrown Response

   Remix sends the thrown Response as HTTP response with given status and body.

3. Final Answer:

   Status 401 with body "Unauthorized" -> Option A

4. Quick Check:

   Thrown Response status and body sent as is [OK]

Hint: Thrown Response status and body are sent directly [OK]

Common Mistakes:

• Assuming status 200 is sent by default
• Confusing error message with status code
• Expecting Remix to change status automatically

4. Identify the error in this Remix code snippet that tries to throw a 500 error:

throw new Response({ message: "Server Error" }, 500);

medium

A. The status code should be inside an options object, not as second argument.

B. The message must be a string, not an object.

C. The 'new' keyword is missing before Response.

D. Response cannot be thrown in Remix.

Solution

1. Step 1: Check the Response constructor parameters

   Response expects first argument as body (string or object), second argument as options object with status.

2. Step 2: Identify the mistake in argument usage

   The code passes an object as body and 500 as second argument directly, but status must be inside an object like { status: 500 }.

3. Final Answer:

   The status code should be inside an options object, not as second argument. -> Option A

4. Quick Check:

   Status code must be in options object [OK]

Hint: Status code goes inside options object, not as separate argument [OK]

Common Mistakes:

• Passing status code as plain number second argument
• Using object as body without stringifying
• Forgetting 'new' keyword

5. You want to throw a 403 Forbidden error with a JSON body containing {"error": "Access denied"} in Remix. Which code correctly does this?

hard

A. throw new Response({ message: "Access denied" }, 403);

B. throw new Response({ error: "Access denied" }, { status: 403 });

C. throw new Response("Access denied", 403);

D. throw new Response(JSON.stringify({ error: "Access denied" }), { status: 403, headers: { "Content-Type": "application/json" } });

Solution

1. Step 1: Prepare JSON body for Response

   The body must be a string, so JSON.stringify is needed for the object.

2. Step 2: Set status and content-type header correctly

   Status 403 is set inside options object, and Content-Type header must be "application/json" for JSON body.

3. Final Answer:

   throw new Response(JSON.stringify({ error: "Access denied" }), { status: 403, headers: { "Content-Type": "application/json" } }); -> Option D

4. Quick Check:

   JSON body stringified with correct status and headers [OK]

Hint: Stringify JSON body and set Content-Type header [OK]

Common Mistakes:

• Passing object directly as body without stringify
• Omitting Content-Type header for JSON
• Passing status code as second argument directly