Thrown responses for HTTP errors in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to throw a 404 response using Remix's Response class.

Remix

throw new Response('Not Found', { status: [1] });

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

A500

B200

C404

D302

Attempts:

3 left

💡 Hint

Common Mistakes

Using 200 instead of 404 will not signal an error.

Using 500 is for server errors, not 'Not Found'.

The HTTP status code 404 means 'Not Found'. Using it in the Response constructor tells Remix to send a 404 error.

2fill in blank

medium

Complete the code to throw a 403 Forbidden error with a custom message.

Remix

throw new Response([1], { status: 403 });

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

A'Access Denied'

B'Page Not Found'

C'Redirecting...'

D'Internal Server Error'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Page Not Found' is for 404 errors, not 403.

Using 'Internal Server Error' is for 500 errors.

The message 'Access Denied' fits a 403 Forbidden error, indicating the user cannot access the resource.

3fill in blank

hard

Fix the error in throwing a 500 Internal Server Error response.

Remix

throw new Response('Server Error', { status: [1] });

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

A400

B404

C200

D500

Attempts:

3 left

💡 Hint

Common Mistakes

Using 400 is for bad requests, not server errors.

Using 200 means success, not an error.

The status code 500 means 'Internal Server Error', which is correct for server errors.

4fill in blank

hard

Fill both blanks to throw a 401 Unauthorized error with a message.

Remix

throw new Response([1], { status: [2] });

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

A'Unauthorized Access'

B'Not Allowed'

C401

D403

Attempts:

3 left

💡 Hint

Common Mistakes

Using 403 status means forbidden, not unauthorized.

Using a message that doesn't match the status code confuses the error.

The message 'Unauthorized Access' fits a 401 error, and the status code 401 means 'Unauthorized'.

5fill in blank

hard

Fill all three blanks to throw a 302 Redirect response with a Location header.

Remix

throw new Response(null, { status: [1], headers: { [2]: [3] } });

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

A301

B"Location"

C"/login"

D302

Attempts:

3 left

💡 Hint

Common Mistakes

Using 301 means permanent redirect, not temporary.

Missing or misspelling the Location header breaks the redirect.

A 302 status code means temporary redirect. The Location header tells the browser where to go, here to /login.

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