@olenbetong/appframe-ds 1.12.0 → 1.13.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @olenbetong/appframe-ds
 
+## 1.13.0
+
+### Minor Changes
+
+- 5a5da91: `RouteErrorPage` shows thrown error responses (404, 403, 401, 5xx and others) as a centred status page with an icon, a plain-language heading, the app's own `statusText` when it gives one, and a way out (back, start page or refresh). Only unexpected errors and 5xx responses are reported with `af.common.logError`; unexpected exceptions look as before.
+
 ## 1.12.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -63,7 +63,7 @@
     "@atlaskit/pragmatic-drag-and-drop": "4.0.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "3.0.0",
     "@base-ui/react": "1.9.0",
-    "@olenbetong/appframe-core": "^2.16.0",
+    "@olenbetong/appframe-core": "^2.16.1",
     "@olenbetong/appframe-data": "^1.10.3",
     "@olenbetong/appframe-react": "^2.2.8",
     "clsx": "^2.1.1",

package/src/layout/ErrorBoundary.css

@@ -99,3 +99,54 @@
 	word-break: break-all;
 	font-size: var(--ds-font-size-1, 0.75rem);
 }
+
+.RouteErrorPage-status {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--ds-size-3, 0.75rem);
+	max-width: 36rem;
+	margin: 0 auto;
+	padding: 12vh var(--ds-size-4, 1rem) var(--ds-size-8, 2rem);
+	text-align: center;
+}
+
+.RouteErrorPage-icon {
+	display: grid;
+	place-items: center;
+	width: 5rem;
+	height: 5rem;
+	margin-bottom: var(--ds-size-2, 0.5rem);
+	border-radius: 50%;
+	background: var(--ds-color-neutral-surface-tinted, rgb(0 0 0 / 0.05));
+	color: var(--ds-color-neutral-text-subtle, #555);
+	font-size: 2.75rem;
+}
+
+.RouteErrorPage-code {
+	margin: 0;
+	color: var(--ds-color-neutral-text-subtle, #555);
+	font-size: clamp(3.5rem, 12vw, 6rem);
+	font-weight: 700;
+	line-height: 1;
+	letter-spacing: 0.04em;
+	font-variant-numeric: tabular-nums;
+}
+
+.RouteErrorPage-status h1,
+.RouteErrorPage-detail,
+.RouteErrorPage-hint {
+	margin: 0;
+}
+
+.RouteErrorPage-hint {
+	color: var(--ds-color-neutral-text-subtle, #555);
+}
+
+.RouteErrorPage-actions {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: var(--ds-size-2, 0.5rem);
+	margin-top: var(--ds-size-4, 1rem);
+}

package/src/layout/ErrorBoundary.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from "@testing-library/react";
+import { createMemoryRouter, RouterProvider } from "react-router";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { RouteErrorPage } from "./ErrorBoundary.js";
+
+function renderThrowing(error: () => unknown) {
+	let router = createMemoryRouter([
+		{
+			path: "/",
+			loader: () => {
+				throw error();
+			},
+			Component: () => null,
+			errorElement: <RouteErrorPage />,
+		},
+	]);
+	return render(<RouterProvider router={router} />);
+}
+
+describe("RouteErrorPage", () => {
+	let logError = vi.fn();
+	(globalThis as any).af = { common: { logError } };
+
+	afterEach(() => logError.mockClear());
+
+	it("shows a status page with the app's own text for a thrown 404", async () => {
+		renderThrowing(() => new Response("", { status: 404, statusText: "The invoice was not found" }));
+		expect(await screen.findByRole("heading", { name: "We could not find what you were looking for" })).toBeTruthy();
+		expect(screen.getByText("404")).toBeTruthy();
+		expect(screen.getByText("The invoice was not found")).toBeTruthy();
+		expect(screen.getByRole("button", { name: "Go to the start page" })).toBeTruthy();
+		expect(logError).not.toHaveBeenCalled();
+	});
+
+	it("leaves out a standard reason phrase", async () => {
+		renderThrowing(() => new Response("", { status: 403, statusText: "Forbidden" }));
+		expect(await screen.findByRole("heading", { name: "You do not have access to this" })).toBeTruthy();
+		expect(screen.queryByText("Forbidden")).toBeNull();
+	});
+
+	it("offers a refresh and reports server errors", async () => {
+		renderThrowing(() => new Response("", { status: 500 }));
+		expect(await screen.findByRole("button", { name: "Refresh page" })).toBeTruthy();
+		expect(logError).toHaveBeenCalled();
+	});
+
+	it("shows an unexpected exception with its message", async () => {
+		renderThrowing(() => new TypeError("Boom"));
+		expect(await screen.findByText("Boom")).toBeTruthy();
+		expect(logError).toHaveBeenCalled();
+	});
+});

package/src/layout/ErrorBoundary.tsx

@@ -3,8 +3,18 @@ import "./ErrorBoundary.css";
 import type { DataObject } from "@olenbetong/appframe-data";
 import { useError } from "@olenbetong/appframe-react";
 
+import { Button, Heading, Paragraph } from "@digdir/designsystemet-react";
+import {
+	ArrowLeftIcon,
+	CloudSlashIcon,
+	ExclamationmarkTriangleIcon,
+	FileSearchIcon,
+	PadlockLockedIcon,
+	PersonIcon,
+} from "@navikt/aksel-icons";
+
 import { Component, useEffect } from "react";
-import { useAsyncError, useRouteError } from "react-router";
+import { type ErrorResponse, isRouteErrorResponse, useAsyncError, useNavigate, useRouteError } from "react-router";
 
 import { PageContainer } from "./PageContainer.js";
 import { getLocalizedString } from "../i18n.js";
@@ -127,13 +137,127 @@ export function ErrorAlertFallback({ error, className }: ErrorAlertFallbackProps
 
 // ── RouteErrorPage ────────────────────────────────────────────────────────────
 
+/** The reason phrases a server sends on its own; anything else in statusText was written for the user. */
+const standardStatusTexts = new Set([
+	"Bad Request",
+	"Unauthorized",
+	"Forbidden",
+	"Not Found",
+	"Method Not Allowed",
+	"Conflict",
+	"Gone",
+	"Internal Server Error",
+	"Bad Gateway",
+	"Service Unavailable",
+	"Gateway Timeout",
+]);
+
+type StatusPage = {
+	icon: React.ReactNode;
+	title: string;
+	message: string;
+	retry: boolean;
+};
+
+function statusPage(status: number): StatusPage {
+	if (status === 404 || status === 410) {
+		return {
+			icon: <FileSearchIcon aria-hidden />,
+			title: getLocalizedString("We could not find what you were looking for"),
+			message: getLocalizedString("It may have been moved or deleted, or the link may be wrong."),
+			retry: false,
+		};
+	}
+	if (status === 403) {
+		return {
+			icon: <PadlockLockedIcon aria-hidden />,
+			title: getLocalizedString("You do not have access to this"),
+			message: getLocalizedString("Contact the IT department if you need access."),
+			retry: false,
+		};
+	}
+	if (status === 401) {
+		return {
+			icon: <PersonIcon aria-hidden />,
+			title: getLocalizedString("You are not logged in"),
+			message: getLocalizedString("Refresh the page to log in again."),
+			retry: true,
+		};
+	}
+	if (status >= 500) {
+		return {
+			icon: <CloudSlashIcon aria-hidden />,
+			title: getLocalizedString("The server could not complete the request"),
+			message: getLocalizedString("Try again in a moment. If the error persists, contact the IT department."),
+			retry: true,
+		};
+	}
+	return {
+		icon: <ExclamationmarkTriangleIcon aria-hidden />,
+		title: getLocalizedString("The request could not be completed"),
+		message: getLocalizedString(
+			"Check what you entered and try again. If the error persists, contact the IT department.",
+		),
+		retry: true,
+	};
+}
+
+/** A thrown `Response` or `data()`: a status page, with the app's own text when it gave one. */
+function RouteErrorResponsePage({ error }: { error: ErrorResponse }) {
+	const navigate = useNavigate();
+	const page = statusPage(error.status);
+	const detail =
+		error.statusText && !standardStatusTexts.has(error.statusText)
+			? error.statusText
+			: typeof error.data === "string" && error.data.trim()
+				? error.data
+				: null;
+	const canGoBack = typeof window !== "undefined" && window.history.length > 1;
+
+	return (
+		<div className="RouteErrorPage-status">
+			<div className="RouteErrorPage-icon">{page.icon}</div>
+			<p className="RouteErrorPage-code">{error.status}</p>
+			<Heading level={1} data-size="md">
+				{page.title}
+			</Heading>
+			{detail && <Paragraph className="RouteErrorPage-detail">{detail}</Paragraph>}
+			<Paragraph data-size="sm" className="RouteErrorPage-hint">
+				{page.message}
+			</Paragraph>
+			<div className="RouteErrorPage-actions">
+				{canGoBack && (
+					<Button variant="secondary" onClick={() => navigate(-1)}>
+						<ArrowLeftIcon aria-hidden />
+						{getLocalizedString("Go back")}
+					</Button>
+				)}
+				{page.retry ? (
+					<Button onClick={() => window.location.reload()}>{getLocalizedString("Refresh page")}</Button>
+				) : (
+					<Button onClick={() => navigate("/")}>{getLocalizedString("Go to the start page")}</Button>
+				)}
+			</div>
+		</div>
+	);
+}
+
 export function RouteErrorPage() {
 	const error = useRouteError();
-	const { message, stackTrace, title } = parseError(error);
+	const isResponse = isRouteErrorResponse(error);
 
 	useEffect(() => {
-		(globalThis as any).af?.common?.logError?.(error);
-	}, [error]);
+		// A missing page or a refused request is expected; only unexpected errors are worth reporting.
+		if (!isResponse || error.status >= 500) {
+			(globalThis as any).af?.common?.logError?.(error);
+		}
+	}, [error, isResponse]);
+
+	if (isResponse) {
+		return <RouteErrorResponsePage error={error} />;
+	}
+
+	const { message, stackTrace, title } = parseError(error);
 
 	return (
 		<PageContainer className="flow">