error-boundary-generator — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited error-boundary-generator (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Before generating any output, read config/defaults.md and adapt all patterns, imports, and code examples to the user's configured stack.
error.tsx and loading.tsx files where missing.Scan for components that:
fetch(), useQuery, useSWR, server component async functions, or Prisma callsuseReducer with many cases, complex useEffect chainsdangerouslySetInnerHTML, rich text renderers, markdown parserspage.tsx files in Next.js App RouterGenerate different fallback UIs based on error type:
For data fetching failures, network errors, timeout errors:
"use client";
import { useEffect } from "react";
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
useEffect(() => {
console.error(error);
}, [error]);
return (
<div role="alert">
<h2>Something went wrong</h2>
<p>We couldn't load this content. Please try again.</p>
<button onClick={reset}>Try again</button>
</div>
);
}For 401/403 responses detected in the error:
"use client";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
export default function Error({ error }: { error: Error }) {
const router = useRouter();
useEffect(() => {
if (error.message.includes("401") || error.message.includes("Unauthorized")) {
router.push("/login");
}
}, [error, router]);
return (
<div role="alert">
<h2>Access denied</h2>
<p>Please sign in to view this page.</p>
<button onClick={() => router.push("/login")}>Sign in</button>
</div>
);
}Generate not-found.tsx for dynamic routes:
import Link from "next/link";
export default function NotFound() {
return (
<div>
<h2>Not found</h2>
<p>The requested resource doesn't exist.</p>
<Link href="/">Go home</Link>
</div>
);
}For global-error.tsx at the app root:
"use client";
export default function GlobalError({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
return (
<html>
<body>
<div role="alert">
<h2>Something went wrong</h2>
<p>An unexpected error occurred. Please try again or contact support.</p>
{error.digest && <p>Error reference: {error.digest}</p>}
<button onClick={reset}>Try again</button>
</div>
</body>
</html>
);
}For non-Next.js or for wrapping specific components within a page:
"use client";
import { Component, type ErrorInfo, type ReactNode } from "react";
interface Props {
children: ReactNode;
fallback?: ReactNode;
onError?: (error: Error, errorInfo: ErrorInfo) => void;
}
interface State {
hasError: boolean;
error: Error | null;
}
export class ErrorBoundary extends Component<Props, State> {
state: State = { hasError: false, error: null };
static getDerivedStateFromError(error: Error): State {
return { hasError: true, error };
}
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
this.props.onError?.(error, errorInfo);
}
render() {
if (this.state.hasError) {
return this.props.fallback ?? (
<div role="alert">
<p>Something went wrong.</p>
<button onClick={() => this.setState({ hasError: false, error: null })}>
Try again
</button>
</div>
);
}
return this.props.children;
}
}Generate loading.tsx alongside error.tsx where missing:
export default function Loading() {
return (
<div role="status" aria-busy="true">
<span>Loading...</span>
</div>
);
}## Error Boundary Report
### Gaps Found
| Location | Risk | Reason | Generated |
|----------|------|--------|-----------|
| app/dashboard/page.tsx | High | Fetches data, no error.tsx | error.tsx + loading.tsx |
| components/PaymentForm.tsx | High | Stripe integration | ErrorBoundary wrapper |
| app/posts/[id]/page.tsx | Medium | Dynamic route | not-found.tsx + error.tsx |
### Files Generated
[List of all generated files with their contents]See references/error-patterns.md for error boundary placement strategy, Next.js error hierarchy, and logging integration patterns.
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.