Merge pull request #398 from adetomiwa21/fix/offline-banner-auth-redirect-error-boundary

Author: therealjhay

app/(merchant)/layout.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
 import { AlertTriangle } from "lucide-react";
 import { MerchantSidebar } from "@/components/layout";
 import { merchantNavItems } from "@/lib/navigation/merchantNav";
-import { PageTransition } from "@/components/shared";
+import { PageTransition, ErrorBoundary } from "@/components/shared";
 import { MobileNavDrawer } from "@/components/layout";
 import { Topbar } from "@/components/layout";
 import Footer from "@/components/layout";
@@ -84,7 +84,9 @@ export default function MerchantLayout({
         <main id="main-content" tabIndex={-1} className="flex-1 overflow-y-auto bg-background/50 pb-20 md:pb-0">
           <div className="mx-auto max-w-7xl px-3 sm:px-6 py-4 sm:py-8 space-y-6">
             <OnboardingWizard />
-            <PageTransition>{children}</PageTransition>
+            <PageTransition>
+              <ErrorBoundary>{children}</ErrorBoundary>
+            </PageTransition>
           </div>
         </main>
 

components/providers.tsx

@@ -2,14 +2,25 @@
 
 import { ThemeProvider } from "next-themes";
 import { ReactNode, useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useAuthStore } from "@/lib/store/authStore";
 import { useSessionCheck } from "@/lib/hooks/useSessionCheck";
 import { useCrossTabAuth } from "@/lib/hooks/useCrossTabAuth";
+import { setAppRouter } from "@/lib/navigation/appRouter";
 import { OfflineBanner } from "@/components/ui";
 
 export function Providers({ children }: { children: ReactNode }) {
   const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+  const router = useRouter();
+
+  // Register the App Router in a module-level singleton so non-React code
+  // (e.g. the axios auth interceptor) can navigate with router.push instead of
+  // a full-page reload. Clear it on unmount to avoid holding a stale router.
+  useEffect(() => {
+    setAppRouter(router);
+    return () => setAppRouter(null);
+  }, [router]);
 
   // SSR-safe lazy initialisation keeps a stable QueryClient per browser
   // session while making sure each server render starts with its own

components/shared/ErrorBoundary.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { Component, type ReactNode } from "react";
+import Link from "next/link";
+import { AlertTriangle, RotateCcw } from "lucide-react";
+
+const buttonBase =
+  "inline-flex items-center justify-center rounded-lg px-4 h-11 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  /** Optional custom fallback; when omitted the default error card is shown. */
+  fallback?: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+}
+
+/**
+ * Catches render errors thrown by descendant page components (e.g. a chart that
+ * blows up) and shows a recoverable fallback card instead of a white screen.
+ */
+export class ErrorBoundary extends Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  state: ErrorBoundaryState = { hasError: false };
+
+  static getDerivedStateFromError(): ErrorBoundaryState {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: unknown, info: unknown) {
+    // Log so the failure is still visible in the console / error reporting.
+    console.error("Unhandled render error caught by ErrorBoundary", error, info);
+  }
+
+  handleReset = () => {
+    // Reset the boundary so the children get a fresh render attempt.
+    this.setState({ hasError: false });
+  };
+
+  render() {
+    if (!this.state.hasError) return this.props.children;
+    if (this.props.fallback) return this.props.fallback;
+
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center p-4">
+        <div
+          role="alert"
+          className="w-full max-w-md rounded-lg border border-border bg-card p-6 text-center shadow-sm"
+        >
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10">
+            <AlertTriangle
+              className="h-6 w-6 text-destructive"
+              aria-hidden="true"
+            />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground">
+            Something went wrong
+          </h2>
+          <p className="mt-2 text-sm text-muted-foreground">
+            This page ran into an unexpected error. You can try again, or head
+            back to your dashboard.
+          </p>
+          <div className="mt-6 flex flex-col gap-2 sm:flex-row sm:justify-center">
+            <button
+              type="button"
+              onClick={this.handleReset}
+              className={`${buttonBase} gap-2 bg-primary text-primary-foreground hover:bg-primary/80`}
+            >
+              <RotateCcw className="h-4 w-4" aria-hidden="true" />
+              Try Again
+            </button>
+            <Link
+              href="/dashboard"
+              className={`${buttonBase} border border-border bg-background hover:bg-muted hover:text-foreground`}
+            >
+              Go to Dashboard
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

components/shared/__tests__/ErrorBoundary.test.tsx

@@ -0,0 +1,80 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ErrorBoundary } from '@/components/shared/ErrorBoundary';
+
+// next/link needs no router context in these unit tests; render a plain anchor.
+jest.mock('next/link', () => {
+  const React = require('react');
+  return {
+    __esModule: true,
+    default: ({ href, children, ...props }: any) =>
+      React.createElement('a', { href, ...props }, children),
+  };
+});
+
+// Child whose throwing is toggleable so we can exercise the reset path.
+let shouldThrow = true;
+function MaybeBoom() {
+  if (shouldThrow) throw new Error('render blew up');
+  return <div>recovered content</div>;
+}
+
+describe('ErrorBoundary', () => {
+  let consoleErrorSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    shouldThrow = true;
+    consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    consoleErrorSpy.mockRestore();
+  });
+
+  it('renders children when nothing throws', () => {
+    shouldThrow = false;
+    render(
+      <ErrorBoundary>
+        <MaybeBoom />
+      </ErrorBoundary>
+    );
+    expect(screen.getByText('recovered content')).toBeInTheDocument();
+  });
+
+  it('renders the fallback UI and logs the error when a child throws', () => {
+    render(
+      <ErrorBoundary>
+        <MaybeBoom />
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByText(/something went wrong/i)).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /try again/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('link', { name: /go to dashboard/i })
+    ).toHaveAttribute('href', '/dashboard');
+
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      'Unhandled render error caught by ErrorBoundary',
+      expect.anything(),
+      expect.anything()
+    );
+  });
+
+  it('resets and re-renders children when Try Again is clicked', () => {
+    render(
+      <ErrorBoundary>
+        <MaybeBoom />
+      </ErrorBoundary>
+    );
+    expect(screen.getByText(/something went wrong/i)).toBeInTheDocument();
+
+    // The child stops throwing, then the user retries.
+    shouldThrow = false;
+    fireEvent.click(screen.getByRole('button', { name: /try again/i }));
+
+    expect(screen.getByText('recovered content')).toBeInTheDocument();
+    expect(screen.queryByText(/something went wrong/i)).not.toBeInTheDocument();
+  });
+});

components/shared/index.ts

@@ -1,4 +1,5 @@
 export * from './PageTransition';
+export * from './ErrorBoundary';
 export * from './StatCard';
 export * from './CurrencyDisplay';
 export * from './ErrorDisplay';

components/ui/__tests__/offline-banner.test.tsx

@@ -0,0 +1,72 @@
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { OfflineBanner } from '@/components/ui/offline-banner';
+import { useOfflineStore } from '@/lib/store/offlineStore';
+
+// Control the browser-detected connectivity that feeds the store.
+let mockOnline = false;
+jest.mock('@/lib/hooks/useOnlineStatus', () => ({
+  useOnlineStatus: () => mockOnline,
+}));
+
+function renderBanner() {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  jest.spyOn(client, 'refetchQueries').mockResolvedValue(undefined);
+  const utils = render(
+    <QueryClientProvider client={client}>
+      <OfflineBanner />
+    </QueryClientProvider>
+  );
+  return { client, ...utils };
+}
+
+const bannerText = () => screen.queryByText(/you are offline/i);
+
+beforeEach(() => {
+  mockOnline = false;
+  act(() => {
+    useOfflineStore.setState({ isOnline: true, dismissed: false });
+  });
+});
+
+describe('OfflineBanner', () => {
+  it('reflects useOfflineStore connectivity state', () => {
+    renderBanner();
+    // Store transitioned to offline on mount -> banner visible.
+    expect(bannerText()).toBeInTheDocument();
+
+    act(() => {
+      useOfflineStore.getState().setIsOnline(true);
+    });
+    // Back online per the store -> banner hidden.
+    expect(bannerText()).not.toBeInTheDocument();
+  });
+
+  it('is dismissible and reappears on the next offline transition', () => {
+    renderBanner();
+    expect(bannerText()).toBeInTheDocument();
+
+    fireEvent.click(
+      screen.getByRole('button', { name: /dismiss offline notification/i })
+    );
+    expect(bannerText()).not.toBeInTheDocument();
+
+    // Reconnect, then drop offline again: dismissal must reset so the banner
+    // comes back instead of staying hidden forever.
+    act(() => {
+      useOfflineStore.getState().setIsOnline(true);
+    });
+    act(() => {
+      useOfflineStore.getState().setIsOnline(false);
+    });
+    expect(bannerText()).toBeInTheDocument();
+  });
+
+  it('re-fetches failed data when Retry is clicked', () => {
+    const { client } = renderBanner();
+    fireEvent.click(screen.getByRole('button', { name: /retry/i }));
+    expect(client.refetchQueries).toHaveBeenCalled();
+  });
+});

components/ui/offline-banner.tsx

@@ -1,30 +1,62 @@
 'use client';
 
 import { useEffect } from 'react';
-import { WifiOff } from 'lucide-react';
+import { WifiOff, RotateCw, X } from 'lucide-react';
+import { useQueryClient } from '@tanstack/react-query';
 import { useOnlineStatus } from '@/lib/hooks/useOnlineStatus';
 import { useOfflineStore } from '@/lib/store/offlineStore';
 
 export function OfflineBanner() {
-  const isOnline = useOnlineStatus();
+  const detectedOnline = useOnlineStatus();
+  const isOnline = useOfflineStore((s) => s.isOnline);
+  const dismissed = useOfflineStore((s) => s.dismissed);
   const setIsOnline = useOfflineStore((s) => s.setIsOnline);
+  const dismiss = useOfflineStore((s) => s.dismiss);
+  const queryClient = useQueryClient();
 
+  // Feed the browser-detected connectivity into the shared store so the banner
+  // (and the rest of the app) render from a single source of truth.
   useEffect(() => {
-    setIsOnline(isOnline);
-  }, [isOnline, setIsOnline]);
+    setIsOnline(detectedOnline);
+  }, [detectedOnline, setIsOnline]);
 
-  if (isOnline) return null;
+  // Only show when the store says we are truly offline and the user hasn't
+  // dismissed it for this offline episode.
+  if (isOnline || dismissed) return null;
+
+  const handleRetry = () => {
+    // Re-fetch any data that failed while offline. Queries that are still
+    // failing (because we're still offline) simply error again and leave the
+    // banner in place.
+    queryClient.refetchQueries();
+  };
 
   return (
     <div
       role="alert"
       aria-live="polite"
-      className="fixed top-0 left-0 right-0 z-[60] bg-destructive text-destructive-foreground px-4 py-2.5 flex items-center justify-center gap-2 shadow-md animate-in slide-in-from-top duration-300"
+      className="fixed top-0 left-0 right-0 z-[60] bg-destructive text-destructive-foreground px-4 py-2.5 flex items-center justify-center gap-3 shadow-md animate-in slide-in-from-top duration-300"
     >
       <WifiOff className="w-4 h-4 shrink-0" aria-hidden="true" />
       <span className="text-sm font-medium">
         You are offline. Some features may be unavailable.
       </span>
+      <button
+        type="button"
+        onClick={handleRetry}
+        className="inline-flex items-center gap-1 rounded-md border border-destructive-foreground/40 px-2 py-1 text-xs font-medium hover:bg-destructive-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive-foreground/60"
+      >
+        <RotateCw className="w-3.5 h-3.5" aria-hidden="true" />
+        Retry
+      </button>
+      <button
+        type="button"
+        onClick={dismiss}
+        aria-label="Dismiss offline notification"
+        className="ml-1 inline-flex items-center justify-center rounded-md p-1 hover:bg-destructive-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive-foreground/60"
+      >
+        <X className="w-4 h-4" aria-hidden="true" />
+      </button>
     </div>
   );
 }