camelon

Errors & not-found

Two boundary files handle failures. Neither has a URL.

  • _404.tsx renders when no route matches a URL under its directory.
  • _error.tsx renders when a loader, action, or middleware throws. Resolution climbs to the nearest boundary.

notFound

throw notFound() renders the 404 page.

import { notFound } from 'camelon';

export function loader() {
  throw notFound();
}

Try it →

redirect

throw redirect(url, status?) sends a redirect. The default status is 302. A Datastar request gets a client-side navigation instead, so in-page actions move the user without a reload.

import { redirect } from 'camelon';

export function loader() {
  throw redirect('/');
}

Try it →

HttpError

throw new HttpError(status, message) for any other status.

import { HttpError } from 'camelon';

export function loader() {
  throw new HttpError(403, 'Forbidden');
}

Try it →

Per-route error boundary

A page route can export error to render its own failure UI:

export const error = (err, input, request, source, errorId) => (
  <div class="error">
    <h1>Something broke</h1>
    <p safe>{err.message}</p>
    <code safe>{errorId}</code>
  </div>
);

errorId is the request correlation id. Print it so a user can quote it and you can find it in the logs.