refactor(frontend): Refactor React State Managers to Centralize LocalStorage Sync and Add Error Boundaries

[advikdivekar]

Summary

Fixes #639

This PR centralizes all Zustand localStorage writes through a single safe persistence middleware and adds a production-quality ErrorBoundary component with a diagnostic error payload exporter.

Changes

• Frontend/src/store/middleware/safePersist.js — Safe Zustand Persistence Middleware

  • Wraps the standard persist middleware with a custom storage adapter
  • Catches QuotaExceededError / NS_ERROR_DOM_QUOTA_REACHED on setItem — silently skips the write (state stays in memory) and logs a descriptive console.warn
  • Catches all getItem and removeItem errors — returns null / no-ops gracefully
  • Catches onRehydrateStorage errors — logs and continues with default state
  • All stores now degrade gracefully instead of crashing when storage is full or unavailable (private browsing, locked storage, etc.)

• Frontend/src/store/ticketStore.js — migrated from persist → safePersist

• Frontend/src/store/authStore.js — migrated from persist → safePersist

• Frontend/src/admin/store/adminStore.js — migrated from persist → safePersist

• Frontend/src/components/shared/ErrorBoundary.jsx — React Error Boundary

  • Class component (required — hooks cannot catch render errors)
  • Stylized error page: dark header with error icon, red-tinted error message card, explanatory text, Try Again and Go Home action buttons
  • "Copy error payload" button: copies structured JSON to clipboard containing:
    • timestamp, message, name, stack, componentStack
    • url (current page), userAgent
  • Visual feedback: button turns green with checkmark for 3 seconds after copy
  • onError prop for optional external error reporting (e.g., Sentry)
  • fallback prop to provide a custom UI instead of the default error page
  • Accessible markup with proper heading hierarchy

Usage

// Wrap critical route sections in App.jsx or individual pages:
import ErrorBoundary from './components/shared/ErrorBoundary';

<ErrorBoundary>
  <AdminDashboard />
</ErrorBoundary>

Test Plan

• Fill localStorage to quota in DevTools (Application → Storage) — verify app does not crash, console.warn appears
• Render a component that throws — verify ErrorBoundary catches it and shows the error UI
• Click "Copy error payload" — verify JSON is in clipboard with all fields populated
• Click "Try again" — verify boundary resets and re-renders the child
• Click "Go home" — verify navigation to /

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[vercel]

@advikdivekar is attempting to deploy a commit to the ritesh Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f09b4e17-21ec-4e53-b826-3ee6c7b92724

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[advikdivekar]

@ritesh-1918 please review my PR, thank you