Error pages

On a React context, an error should become a page, not a stack trace. The same error-mapping you saw on the backend renders a component here: a not-found page, a forbidden page, a friendly fallback, chosen by the type of error thrown.

#Mapping an error to a page

Mark a component with @ErrorPage({ error }) (or register a defineErrorPage). When a matching error propagates, its renderreceives the error and a status code and returns the view.

import { ErrorPage, IErrorPage, ReactIncomingEvent } from '@stone-js/use-react'

@ErrorPage({ error: 'RuntimeError' })
export class NotFoundPage implements IErrorPage<ReactIncomingEvent> {
  render ({ error, statusCode }: { error: Error, statusCode: number }) {
    return (
      <section className='error'>
        <h1>{statusCode}</h1>
        <p>{error.message}</p>
        <a href='/'>Take me home</a>
      </section>
    )
  }
}

import { defineErrorPage } from '@stone-js/use-react'

const NotFoundPage = () => ({
  render: ({ error, statusCode }) => (
    <section className='error'>
      <h1>{statusCode}</h1>
      <p>{error.message}</p>
      <a href='/'>Take me home</a>
    </section>
  )
})

export const errorPages = [defineErrorPage(NotFoundPage, { error: 'RuntimeError' }, true)]

#The error render context

An error page's render extends the page render context with the error and a statusCode, so it can show a tailored message and set the right status on the response.

#Adapter error pages

Some failures happen before the kernel even runs, at the adapter boundary. An @AdapterErrorPage handles those integration-level errors, so even a failure in the plumbing renders something human instead of a blank 500.