feat(react): add per-island error boundary

A crashed island renders its error in dev and nothing in prod, leaving
the surrounding server-rendered page intact.

Island .tsx sources carry an explicit @jsxImportSource react pragma: the
repo's root tsconfig points jsxImportSource at @wrnexus/core, so without
it island JSX compiles to WRNexus's string renderer instead of React
elements.

Tests render on the client via createRoot rather than a server renderer,
because React error boundaries do not engage during SSR — and islands
are client-only regardless.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-18 15:16:42 +05:30
co-authored by Claude Opus 5
parent b405025f37
commit df2ee036eb
3 changed files with 156 additions and 0 deletions
+43
View File
@@ -0,0 +1,43 @@
/** @jsxImportSource react */
import { Component, type ErrorInfo, type ReactNode } from "react";
export interface IslandErrorBoundaryProps {
name: string;
development: boolean;
children: ReactNode;
}
interface IslandErrorBoundaryState {
error: Error | null;
}
/**
* Contains island failures locally: a crashed island must never blank the
* surrounding server-rendered page.
*/
export class IslandErrorBoundary extends Component<
IslandErrorBoundaryProps,
IslandErrorBoundaryState
> {
override state: IslandErrorBoundaryState = { error: null };
static getDerivedStateFromError(error: Error): IslandErrorBoundaryState {
return { error };
}
override componentDidCatch(error: Error, info: ErrorInfo): void {
console.error(`[wrnexus] island '${this.props.name}' failed to render`, error, info);
}
override render(): ReactNode {
const { error } = this.state;
if (!error) return this.props.children;
if (!this.props.development) return null;
return (
<div data-wrn-island-error={this.props.name} style={{ padding: "0.75rem" }}>
<strong>{`Island '${this.props.name}' failed`}</strong>
<pre>{error.stack ?? error.message}</pre>
</div>
);
}
}