Error handling

If a layout or page load function returns an error or throws, layouts and pages further nested in the hierarchy will not be called and the innermost layout or page that reported itself as an error handler is rendered with an error prop passed to its component.

Layouts are assumed to be able to handle errors while pages are assumed not to be able to handle them. You can override this by passing true or false in options.canHandleErrors to definePage or defineLayout.

404 errors are handled in the same way, as if a page's load function returned an error.

import React from "react";
import { defineLayout } from "rakkasjs";

export default defineLayout({
	Component: function ErrorHandlingLayout(props) {
		return (
				{/* If there's an error, render it */}
				{props.error && (
					<p style={{ color: "red" }}>Error: {props.error.message}</p>

				{/* Otherwise render normally */}
import React from "react";
import { definePage } from "rakkasjs";

export default definePage({
	load() {
		return {
			error: {
				message: "Something bad happened!",

	Component: function ErrorPage() {
		return <p>This will never render.</p>;
Rakkas Demo App