aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/client/components/ErrorBoundary.tsx
diff options
context:
space:
mode:
authornsfisis <nsfisis@gmail.com>2026-01-04 17:43:59 +0900
committernsfisis <nsfisis@gmail.com>2026-01-04 19:09:58 +0900
commitf8e4be9b36a16969ac53bd9ce12ce8064be10196 (patch)
treeb2cf350d2e2e52803ff809311effb40da767d859 /src/client/components/ErrorBoundary.tsx
parente1c9e5e89bb91bca2586470c786510c3e1c03826 (diff)
downloadkioku-f8e4be9b36a16969ac53bd9ce12ce8064be10196.tar.gz
kioku-f8e4be9b36a16969ac53bd9ce12ce8064be10196.tar.zst
kioku-f8e4be9b36a16969ac53bd9ce12ce8064be10196.zip
refactor(client): migrate state management from React Context to Jotai
Replace AuthProvider and SyncProvider with Jotai atoms for more granular state management and better performance. This migration: - Creates atoms for auth, sync, decks, cards, noteTypes, and study state - Uses atomFamily for parameterized state (e.g., cards by deckId) - Introduces StoreInitializer component for subscription initialization - Updates all components and pages to use useAtomValue/useSetAtom - Updates all tests to use Jotai Provider with createStore pattern 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Diffstat (limited to 'src/client/components/ErrorBoundary.tsx')
-rw-r--r--src/client/components/ErrorBoundary.tsx42
1 files changed, 42 insertions, 0 deletions
diff --git a/src/client/components/ErrorBoundary.tsx b/src/client/components/ErrorBoundary.tsx
new file mode 100644
index 0000000..a86ea9a
--- /dev/null
+++ b/src/client/components/ErrorBoundary.tsx
@@ -0,0 +1,42 @@
+import { Component, type ReactNode } from "react";
+
+interface ErrorBoundaryProps {
+ children: ReactNode;
+ fallback?: ReactNode;
+}
+
+interface ErrorBoundaryState {
+ hasError: boolean;
+ error: Error | null;
+}
+
+export class ErrorBoundary extends Component<
+ ErrorBoundaryProps,
+ ErrorBoundaryState
+> {
+ override state: ErrorBoundaryState = { hasError: false, error: null };
+
+ static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+ return { hasError: true, error };
+ }
+
+ override render() {
+ if (this.state.hasError) {
+ return this.props.fallback ?? <ErrorFallback error={this.state.error} />;
+ }
+ return this.props.children;
+ }
+}
+
+function ErrorFallback({ error }: { error: Error | null }) {
+ return (
+ <div
+ role="alert"
+ className="bg-error/5 border border-error/20 rounded-xl p-4"
+ >
+ <span className="text-error">
+ {error?.message ?? "An error occurred"}
+ </span>
+ </div>
+ );
+}