973502f26e
Schema additions for issues #37-41: New models: - Domain (#37): Life domains (work, marriage, homelab, etc.) - Idea (#38): Brain dumps with pgvector embeddings - Relationship (#39): Generic entity linking (blocks, depends_on) - Agent (#40): ClawdBot agent tracking with metrics - AgentSession (#40): Conversation session tracking - WidgetDefinition (#41): HUD widget registry - UserLayout (#41): Per-user dashboard configuration Updated models: - Task, Event, Project: Added domainId foreign key - User, Workspace: Added new relations New enums: - IdeaStatus: CAPTURED, PROCESSING, ACTIONABLE, ARCHIVED, DISCARDED - RelationshipType: BLOCKS, BLOCKED_BY, DEPENDS_ON, etc. - AgentStatus: IDLE, WORKING, WAITING, ERROR, TERMINATED - EntityType: Added IDEA, DOMAIN Migration: 20260129182803_add_domains_ideas_agents_widgets
117 lines
3.7 KiB
TypeScript
117 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { Component, type ReactNode } from "react";
|
|
import Link from "next/link";
|
|
|
|
interface ErrorBoundaryProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
interface ErrorBoundaryState {
|
|
hasError: boolean;
|
|
error?: Error;
|
|
}
|
|
|
|
/**
|
|
* Error boundary component for graceful error handling
|
|
* Uses PDA-friendly language and calm visual design
|
|
*/
|
|
export class ErrorBoundary extends Component<
|
|
ErrorBoundaryProps,
|
|
ErrorBoundaryState
|
|
> {
|
|
constructor(props: ErrorBoundaryProps) {
|
|
super(props);
|
|
this.state = { hasError: false };
|
|
}
|
|
|
|
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
|
|
return {
|
|
hasError: true,
|
|
error,
|
|
};
|
|
}
|
|
|
|
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
|
|
// Log to console for debugging (could also send to error tracking service)
|
|
console.error("Component error:", error, errorInfo);
|
|
}
|
|
|
|
handleReload = () => {
|
|
window.location.reload();
|
|
};
|
|
|
|
render() {
|
|
if (this.state.hasError) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
|
|
<div className="max-w-md w-full text-center space-y-6">
|
|
{/* Icon - calm blue instead of alarming red */}
|
|
<div className="flex justify-center">
|
|
<div className="rounded-full bg-blue-100 p-3">
|
|
<svg
|
|
className="w-8 h-8 text-blue-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Message - PDA-friendly, no harsh language */}
|
|
<div className="space-y-2">
|
|
<h1 className="text-2xl font-semibold text-gray-900">
|
|
Something unexpected happened
|
|
</h1>
|
|
<p className="text-gray-600">
|
|
The page ran into an issue while loading. You can try refreshing
|
|
or head back home to continue.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex flex-col gap-3 pt-4">
|
|
<button
|
|
onClick={this.handleReload}
|
|
className="inline-flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
|
>
|
|
Refresh page
|
|
</button>
|
|
|
|
<Link
|
|
href="/"
|
|
className="inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
|
>
|
|
Go home
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Technical details in dev mode */}
|
|
{process.env.NODE_ENV === "development" && this.state.error && (
|
|
<details className="mt-8 text-left">
|
|
<summary className="cursor-pointer text-sm text-gray-500 hover:text-gray-700">
|
|
Technical details
|
|
</summary>
|
|
<pre className="mt-2 text-xs text-gray-600 bg-gray-100 p-3 rounded overflow-auto max-h-40">
|
|
{this.state.error.message}
|
|
{"\n\n"}
|
|
{this.state.error.stack}
|
|
</pre>
|
|
</details>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return this.props.children;
|
|
}
|
|
}
|