RustyCMS: file-based headless CMS — API, Admin UI (content, types, assets), Docker/Caddy, image transform; only demo type and demo content in version control

Made-with: Cursor

admin-ui/src/components/ErrorBoundary.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { Component, type ReactNode } from "react";
+import { Icon } from "@iconify/react";
+import { useTranslations } from "next-intl";
+
+type Props = { children: ReactNode };
+
+type State = { hasError: boolean; error: Error | null };
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  render() {
+    if (this.state.hasError && this.state.error) {
+      return <ErrorFallback error={this.state.error} />;
+    }
+    return this.props.children;
+  }
+}
+
+function ErrorFallback({ error }: { error: Error }) {
+  const t = useTranslations("ErrorBoundary");
+
+  return (
+    <div className="rounded-lg border border-red-200 bg-red-50 p-6" role="alert">
+      <div className="flex items-start gap-3">
+        <span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-red-200 text-red-700">
+          <Icon icon="mdi:alert-circle" className="size-6" aria-hidden />
+        </span>
+        <div className="min-w-0 flex-1">
+          <h2 className="font-semibold text-red-900">{t("title")}</h2>
+          <p className="mt-1 text-sm text-red-800">{error.message}</p>
+          <button
+            type="button"
+            onClick={() => window.location.reload()}
+            className="mt-4 rounded-md bg-red-700 px-3 py-1.5 text-sm font-medium text-white hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500"
+          >
+            {t("reload")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}