Error View

When Foldkit hits an unrecoverable error during update, view, or command execution, it stops all processing and renders a fallback UI. This is not error handling — there is no recovery from this state. The runtime is dead.

By default, Foldkit shows a built-in error screen with the error message and a reload button. Pass an errorView function to makeElement or makeApplication to customize it. It receives the Error and returns Html:

import { Runtime } from 'foldkit'
import { Html, html } from 'foldkit/html'

const errorView = (error: Error): Html => {
  const { div, h1, p, button, Class, Attribute } = html<never>()

  return div(
    [
      Class(
        'min-h-screen flex items-center justify-center bg-red-50 p-8',
      ),
    ],
    [
      div(
        [
          Class(
            'max-w-md w-full bg-cream rounded-lg border border-red-200 p-8 text-center',
          ),
        ],
        [
          h1(
            [Class('text-red-600 text-2xl font-semibold mb-4')],
            ['Something went wrong'],
          ),
          p([Class('text-gray-700 mb-6')], [error.message]),
          button(
            [
              Class(
                'bg-red-600 text-white px-6 py-2.5 rounded-md text-sm font-normal cursor-pointer',
              ),
              Attribute('onclick', 'location.reload()'),
            ],
            ['Reload'],
          ),
        ],
      ),
    ],
  )
}

const element = Runtime.makeElement({
  Model,
  init,
  update,
  view,
  errorView,
  container: document.getElementById('root')!,
})

Runtime.run(element)

Call html<never>() with never as the type parameter. Since the runtime has stopped, no messages will ever be dispatched — never makes this explicit and prevents event handlers like OnClick from being used.

Foldkit’s event handlers like OnClick work by dispatching messages to the runtime. Since the runtime has stopped, those handlers are silently ignored. For interactivity, like a reload button, use Attribute('onclick', 'location.reload()'). This sets a raw DOM event handler directly on the element, bypassing Foldkit’s dispatch system entirely.

If your custom errorView itself throws an error, Foldkit catches it and falls back to the default error screen showing both the original error and the errorView error.

See the error-view example for a working demonstration.