How to Use isRouteErrorResponse in Remix for Error Handling

In Remix, use isRouteErrorResponse to check if an error object is a route error response inside your error boundary. It helps you safely handle HTTP errors returned by loaders or actions by distinguishing them from other errors.

Syntax

The isRouteErrorResponse function takes one argument, the error object, and returns a boolean indicating if the error is a route error response.

Use it inside an error boundary to check if the error came from a loader or action response.

tsx

import { isRouteErrorResponse, useRouteError } from "@remix-run/react";

function ErrorBoundary() {
  const error = useRouteError();

  if (isRouteErrorResponse(error)) {
    // Handle route error response
  } else {
    // Handle other errors
  }
}

Example

This example shows an error boundary using isRouteErrorResponse to display different messages for HTTP errors and unexpected errors.

tsx

import { isRouteErrorResponse, useRouteError } from "@remix-run/react";

export function ErrorBoundary() {
  const error = useRouteError();

  if (isRouteErrorResponse(error)) {
    return (
      <div>
        <h1>Error {error.status}</h1>
        <p>{error.statusText}</p>
      </div>
    );
  }

  return (
    <div>
      <h1>Unexpected Error</h1>
      <p>{error instanceof Error ? error.message : "Unknown error"}</p>
    </div>
  );
}

Output

<div>
  <h1>Error 404</h1>
  <p>Not Found</p>
</div>

or

<div>
  <h1>Unexpected Error</h1>
  <p>Some error message</p>
</div>

Common Pitfalls

• Not importing isRouteErrorResponse from @remix-run/react.
• Using isRouteErrorResponse outside error boundaries where useRouteError is not available.
• Assuming all errors are route error responses and skipping other error handling.

tsx

/* Wrong way: Assuming error is always a route error response */
const error = useRouteError();

return <p>{error.statusText}</p>; // This can cause runtime errors if error is not a route error response

/* Right way: Check with isRouteErrorResponse */
import { isRouteErrorResponse } from "@remix-run/react";

if (isRouteErrorResponse(error)) {
  return <p>{error.statusText}</p>;
} else {
  return <p>Unexpected error occurred.</p>;
}

Quick Reference

isRouteErrorResponse(error) returns true if error is a route error response object with status and statusText.

Use it inside error boundaries to safely handle HTTP errors from loaders or actions.

Function	Description
isRouteErrorResponse(error)	Checks if error is a route error response
useRouteError()	Hook to get the current route error in error boundaries
error.status	HTTP status code of the error response
error.statusText	HTTP status text of the error response

Key Takeaways

Use isRouteErrorResponse inside error boundaries to identify route error responses.

Always import isRouteErrorResponse from @remix-run/react before using it.

Check errors with isRouteErrorResponse before accessing status or statusText to avoid runtime errors.

Handle both route error responses and unexpected errors separately for better UX.

Use useRouteError hook to get the error object inside error boundaries.