Skip to content
Twilight React Playground
ثيم رائدaren

NotFoundError, RedirectError, UnauthorizedError

classAdvanced

The error classes behind the loader helpers, so an error screen can tell a missing page, a redirect and a refused guest apart.

import { NotFoundError, RedirectError, UnauthorizedError } from '@salla.sa/twilight-theme-engine/providers';

In plain words

When a loader stops, what it throws is an object. These three classes give those objects a recognisable type, so an error screen can check error instanceof NotFoundError and show the right message.

Signature

class NotFoundError extends Error {
  constructor(message?: string);        // message default 'Not Found', name 'NotFoundError'
}

class UnauthorizedError extends Error {
  constructor(message?: string);        // message default 'Unauthorized', name 'UnauthorizedError'
}

class RedirectError extends Error {
  constructor(path: string, replace?: boolean);   // message 'Redirect to <path>', name 'RedirectError'
  path: string;
  replace: boolean;                     // default false
}

Example

app/components/PageError.tsx
import {
  NotFoundError,
  RedirectError,
  UnauthorizedError,
} from '@salla.sa/twilight-theme-engine/providers';
import { ErrorPage } from '@salla.sa/twilight-theme-engine/components/common';

export function PageError({ error }: { error: Error }) {
  if (error instanceof RedirectError) return null;
  if (error instanceof NotFoundError) return <ErrorPage code={404} message={error.message} />;
  if (error instanceof UnauthorizedError) return <ErrorPage code={401} showAction={false} />;
  return <ErrorPage code={500} message={error.message} />;
}

How it behaves

  • Who throws which, with /tanstack loaded: unauthorized() and orUnauthorized throw UnauthorizedError, and orThrow throws NotFoundError. notFound() and redirect() throw TanStack Router's own objects instead; RedirectError comes only from the unadapted redirect().

  • The router made by createRouter() from /tanstack already uses an error component like the example: nothing for RedirectError, a 404 page, a 401 page without the home button, 400 for API errors and 500 otherwise.

Related

notFound, redirect, unauthorized

Throw helpers for route loaders: stop and show the not-found page, send the visitor to another address, or refuse a guest.

orThrow, orUnauthorized

Wrap an API call in a loader: orThrow turns any failure into a not-found error, orUnauthorized turns a 401 or 403 into the unauthorized flow.

Source and docs