useRouteError return type

[j-machuca]

Hi,

I've been following the react-router-dom tutorial and decided to try plunging typescript.Following the documentation for JS when using the useRouteError hook (link to documentation) the return type is unknown as declared in the hooks.d.types file.

Should the return value actually be an unknown or an ErrorResponse type?
After console.loging the object returned is(see code below)

Object { status: 404, statusText: "Not Found", data: null }
​
data: null
​
status: 404
​
statusText: "Not Found"
​
<prototype>: Object { … }
​​
constructor: class ErrorResponse { constructor(status, statusText, data) }
​​​
length: 3
​​​
name: "ErrorResponse"
​​​
prototype: Object { … }
​​​
<prototype>: function ()
​​
<prototype>: Object { … }
​​​
__defineGetter__: function __defineGetter__()
​​​
__defineSetter__: function __defineSetter__()
​​​
__lookupGetter__: function __lookupGetter__()
​​​
__lookupSetter__: function __lookupSetter__()
​​​
__proto__: 
​​​
constructor: function Object()
​​​
hasOwnProperty: function hasOwnProperty()
​​​
isPrototypeOf: function isPrototypeOf()
​​​
propertyIsEnumerable: function propertyIsEnumerable()
​​​
toLocaleString: function toLocaleString()
​​​
toString: function toString()
​​​
valueOf: function valueOf()
​​​
<get __proto__()>: function __proto__()
​​​
<set __proto__()>: function __proto__()
ErrorPage.tsx:5

Should I be type checking the unknown value by adding a type:

import { useRouteError } from "react-router-dom";

type ErrorResponse = {
  data: any;
  status: number;
  statusText: string;
  message?: string;
};

const errorCheck = (error: any): error is ErrorResponse => {
  return "data" in error && "status" in error && "statusText" in error;
};

export default function ErrorPage() {
  const error: any = useRouteError();
  console.log(error);
  //   console.log(typeof error);

  if (errorCheck(error)) {
    return (
      <div id="error-page">
        <h1>Oops! Page not found</h1>
        <p>Sorry the route you are looking for does not exist.</p>
        <p>
          <i>{error.statusText || error.message}</i>
        </p>
      </div>
    );
  } else {
    return <></>;
  }
}

[PhiltasticGuy]

Hi,

I don't have an answer for your question per se, but you could look into using the isRouteErrorResponse function from react-router-dom.

Based on isRouteErrorResponse's documentation, you could write something like this:

import { isRouteErrorResponse, useRouteError } from "react-router-dom";

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

  if (isRouteErrorResponse(error)) {
    if (error.status === 401) {
      // ...
    }
    else if (error.status === 404) {
      // ...
    }

    return (
      <div id="error-page">
        <h1>Oops! {error.status}</h1>
        <p>{error.statusText}</p>
        {error.data?.message && (
          <p>
            <i>{error.data.message}</i>
          </p>
        )}
      </div>
    );
  } else if (error instanceof Error) {
    return (
      <div id="error-page">
        <h1>Oops! Unexpected Error</h1>
        <p>Something went wrong.</p>
        <p>
          <i>{error.message}</i>
        </p>
      </div>
    );
  } else {
    return <></>;
  }
}

I hope this helps!

EDIT: Added missing return statement as per @OkuruchiDan's comment.

[OkuruchiDan]

You forgot to add return on this line else if (error instanceof Error) { <div id="error-page">

[azamat-reactjs]

thanks a lot

[aasspaassp]

This worked, same issue, when starting to use React Router with Typescript going through documentation it doesnt seem to have any TS info since its stated that the package comes with its own types. Maybe you can also extend an interface to achieve something similar, but I will stick with this type narrowing for now.

[ckhackshaw]

Has anyone had an issue where TS interprets Error as type JSX.Element? In this case, I get this error: Property 'message' does not exist on type '{}'

I tried the following, along with multiple variations.

  if (error instanceof Error) {
    return (
      <div id="error-page">
        <h1>Oops! Unexpected Error</h1>
        <p>Something went wrong.</p>
        <p>
          <i>{error.hasOwnProperty("message") ? error.message : "Yes"}</i>
        </p>
      </div>
    );
  } else {
    return <h1>Don't know the error type</h1>;
  }

[OkuruchiDan]

Is any updates with this hook? Any type definition can be used for it? Or we good just define error as any type?

[brophdawg11]

useRouteError is correctly typed as unknown since you can throw anything from your loaders or actions. Most of the time, it should be an explicitly thrown Response or Error in which case you should use type narrowing in your errorElement:

import { isRouteErrorResponse, useRouteError } from 'react-router-dom';

function MyErrorElement() {
  let error = useRouteError();
  
  if (isRouteErrorResponse(error)) {
    return <p>{error.status} {error.statusText}</p>
  }

  return <p>{error.message || "Unknown Error"}</p>
}

But there is nothing stopping you from throwing other types of values, so we can't infer the type of useRouteError.

[PavelMikuMr]

I think should to remove error.message because It also defines like 'error' is of type 'unknown'. This value doesn't exist in class ErrorResponse

[whitehat101]

I came across this from a tutorial while learning TypeScript with React Router. useRouteError() does correctly return an unknown type. You may want to use a utility function to convert the error to a string, instead of mixing the same checks into your TSX.

function errorMessage(error: unknown): string {
  if (isRouteErrorResponse(error)) {
    return `${error.status} ${error.statusText}`
  } else if (error instanceof Error) {
    return error.message
  } else if (typeof error === 'string') {
    return error
  } else {
    console.error(error)
    return 'Unknown error'
  }
}

You can get more control by mixing these checks into your Component, but that is often overkill, especially if you're just following a long with a tutorial.

[sanghunjlee]

I tried to use this method, but had an issue where Error was interpreted as type JSX.Element (Property 'message' does not exist on type '{}' error).

Using the user-defined guard seems to help with that.

interface RouterError extends Error {}

function isRouterError(object: any): object is RouterError {
    return 'message' in object;
}

function errorMessage(error: unknown): string {
    if (isRouteErrorResponse(error)) {
        return `${error.status} ${error.statusText}`
    } else if (error != undefined && isRouterError(error)) {
        return error.message;
    } else if (typeof error === 'string') {
        return error
    } else {
        console.error(error)
        return 'Unknown error'
    }
}

Edit: There was an issue when the error is undefined. I added error != undefined to circumvent this.

[qadzek]

I also received the Property 'message' does not exist on type '{}' error. It turns out that it's a bad idea to name the React component Error. Renaming it to ErrorPage fixed the issue.