Flea Flicker
7daa9c480a
The bundle at /login was executing but the React tree never painted —
no console errors, no fallback UI, just an empty <div id='root'>.
Add three layers of defense so a future failure of this shape is
captured instead of being silently swallowed:
1. window 'error' and 'unhandledrejection' listeners in main.tsx,
printing structured context to console.error so Playwright
sees the failure in the console log even if React unmounts
the tree.
2. A top-level <ErrorBoundary> in main.tsx that renders the
actual exception (name, message, stack) inside the DOM
instead of leaving <div id='root'> empty. The boundary also
logs to console.error via componentDidCatch.
3. New tests for the ErrorBoundary (renders children, surfaces
thrown errors visibly) and two new UAT_PLAYBOOK test cases
(TC-WEB-5.1.6 / 5.1.7) that explicitly assert the
'never-blank-root' invariant on UAT.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
import { Component } from "react";
|
|
import type { ErrorInfo, ReactNode } from "react";
|
|
|
|
interface ErrorBoundaryProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
interface ErrorBoundaryState {
|
|
error: Error | null;
|
|
}
|
|
|
|
/**
|
|
* Top-level ErrorBoundary — renders the error visibly so the actual exception
|
|
* appears in the DOM (and therefore in the Playwright snapshot) instead of
|
|
* React 18+ unmounting the entire tree to a blank `<div id="root">`.
|
|
*
|
|
* Background: GRO-2094. The bundle was executing but never painting, with
|
|
* the failure swallowed. Surfacing the error here is the first step; the
|
|
* real fix is in the underlying component that threw.
|
|
*/
|
|
export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
|
state: ErrorBoundaryState = { error: null };
|
|
|
|
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
|
|
return { error };
|
|
}
|
|
|
|
componentDidCatch(error: Error, info: ErrorInfo): void {
|
|
// Also surface to the console — this is what the test harness greps for.
|
|
// eslint-disable-next-line no-console
|
|
console.error("[ErrorBoundary] Uncaught render error:", error, info);
|
|
}
|
|
|
|
render() {
|
|
if (this.state.error) {
|
|
const err = this.state.error;
|
|
return (
|
|
<div
|
|
data-testid="error-boundary"
|
|
style={{
|
|
padding: "2rem",
|
|
fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
|
|
color: "#7f1d1d",
|
|
background: "#fef2f2",
|
|
minHeight: "100vh",
|
|
boxSizing: "border-box",
|
|
}}
|
|
>
|
|
<h1 style={{ fontSize: 18, margin: "0 0 0.5rem" }}>Something went wrong</h1>
|
|
<p style={{ margin: "0 0 1rem", color: "#991b1b" }}>
|
|
The app failed to render. The full error is shown below — please share this
|
|
output when reporting the bug.
|
|
</p>
|
|
<pre
|
|
data-testid="error-boundary-message"
|
|
style={{
|
|
whiteSpace: "pre-wrap",
|
|
wordBreak: "break-word",
|
|
background: "#fff",
|
|
border: "1px solid #fecaca",
|
|
borderRadius: 6,
|
|
padding: "0.75rem 1rem",
|
|
margin: 0,
|
|
fontSize: 13,
|
|
lineHeight: 1.4,
|
|
}}
|
|
>
|
|
{err.name}: {err.message}
|
|
{"\n\n"}
|
|
{err.stack ?? "(no stack)"}
|
|
</pre>
|
|
</div>
|
|
);
|
|
}
|
|
return this.props.children;
|
|
}
|
|
}
|