feat: implement global error boundaries across routes and consolidate API endpoints for centralized service management (#219)

Co-authored-by: Damola-Sodiq <damilolasodiq149@gmail.com>
Co-authored-by: Usman Imamu <usmanimamu17@gmail.com>

Author: 3 people

package-lock.json

@@ -30,7 +30,6 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/axios": "^0.9.36",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

package.json

@@ -0,0 +1,41 @@
+"use client";
+/** ApexChain Network Operations Intelligence Platform */
+
+import { useEffect } from "react";
+import { RouteErrorState } from "@/components/ui/route-state";
+import { logger } from "@/lib/logger";
+
+export default function RouteError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    logger.error("route-error-boundary", {
+      message: error.message,
+      stack: error.stack,
+      digest: error.digest,
+    });
+  }, [error]);
+
+  return (
+    <div className="space-y-6 p-6">
+      <RouteErrorState
+        title="Auth Logic Error"
+        description={
+          error.message || "An unexpected error occurred while loading this page."
+        }
+        primaryAction={{
+          label: "Try again",
+          onClick: reset,
+        }}
+        secondaryAction={{
+          label: "Reload page",
+          onClick: () => window.location.reload(),
+        }}
+      />
+    </div>
+  );
+}

src/app/(auth)/logic/error.tsx

@@ -0,0 +1,41 @@
+"use client";
+/** ApexChain Network Operations Intelligence Platform */
+
+import { useEffect } from "react";
+import { RouteErrorState } from "@/components/ui/route-state";
+import { logger } from "@/lib/logger";
+
+export default function RouteError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    logger.error("route-error-boundary", {
+      message: error.message,
+      stack: error.stack,
+      digest: error.digest,
+    });
+  }, [error]);
+
+  return (
+    <div className="space-y-6 p-6">
+      <RouteErrorState
+        title="Bulk Import Error"
+        description={
+          error.message || "An unexpected error occurred while loading this page."
+        }
+        primaryAction={{
+          label: "Try again",
+          onClick: reset,
+        }}
+        secondaryAction={{
+          label: "Reload page",
+          onClick: () => window.location.reload(),
+        }}
+      />
+    </div>
+  );
+}

src/app/bulk-import/error.tsx

@@ -0,0 +1,41 @@
+"use client";
+/** ApexChain Network Operations Intelligence Platform */
+
+import { useEffect } from "react";
+import { RouteErrorState } from "@/components/ui/route-state";
+import { logger } from "@/lib/logger";
+
+export default function RouteError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    logger.error("route-error-boundary", {
+      message: error.message,
+      stack: error.stack,
+      digest: error.digest,
+    });
+  }, [error]);
+
+  return (
+    <div className="space-y-6 p-6">
+      <RouteErrorState
+        title="Import History Error"
+        description={
+          error.message || "An unexpected error occurred while loading this page."
+        }
+        primaryAction={{
+          label: "Try again",
+          onClick: reset,
+        }}
+        secondaryAction={{
+          label: "Reload page",
+          onClick: () => window.location.reload(),
+        }}
+      />
+    </div>
+  );
+}

src/app/bulk-import/history/error.tsx

@@ -0,0 +1,41 @@
+"use client";
+/** ApexChain Network Operations Intelligence Platform */
+
+import { useEffect } from "react";
+import { RouteErrorState } from "@/components/ui/route-state";
+import { logger } from "@/lib/logger";
+
+export default function RouteError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    logger.error("route-error-boundary", {
+      message: error.message,
+      stack: error.stack,
+      digest: error.digest,
+    });
+  }, [error]);
+
+  return (
+    <div className="space-y-6 p-6">
+      <RouteErrorState
+        title="Config Error"
+        description={
+          error.message || "An unexpected error occurred while loading this page."
+        }
+        primaryAction={{
+          label: "Try again",
+          onClick: reset,
+        }}
+        secondaryAction={{
+          label: "Reload page",
+          onClick: () => window.location.reload(),
+        }}
+      />
+    </div>
+  );
+}

src/app/config/error.tsx

@@ -27,10 +27,14 @@ export default function GlobalError({
         description={
           error.message || "An unexpected error occurred while loading this page."
         }
-        actionLabel="Try again"
-        onAction={reset}
-        secondaryActionLabel="Reload page"
-        onSecondaryAction={() => window.location.reload()}
+        primaryAction={{
+          label: "Try again",
+          onClick: reset,
+        }}
+        secondaryAction={{
+          label: "Reload page",
+          onClick: () => window.location.reload(),
+        }}
       />
       {process.env.NODE_ENV === "development" && error.digest ? (
         <div className="mx-auto w-full max-w-xl rounded-xl border border-slate-200 bg-white p-4 text-xs text-slate-500 shadow-sm">

src/app/error.tsx

@@ -0,0 +1,41 @@
+"use client";
+/** ApexChain Network Operations Intelligence Platform */
+
+import { useEffect } from "react";
+import { RouteErrorState } from "@/components/ui/route-state";
+import { logger } from "@/lib/logger";
+
+export default function RouteError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    logger.error("route-error-boundary", {
+      message: error.message,
+      stack: error.stack,
+      digest: error.digest,
+    });
+  }, [error]);
+
+  return (
+    <div className="space-y-6 p-6">
+      <RouteErrorState
+        title="Login Error"
+        description={
+          error.message || "An unexpected error occurred while loading this page."
+        }
+        primaryAction={{
+          label: "Try again",
+          onClick: reset,
+        }}
+        secondaryAction={{
+          label: "Reload page",
+          onClick: () => window.location.reload(),
+        }}
+      />
+    </div>
+  );
+}

src/app/login/error.tsx

@@ -5,6 +5,7 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { api } from "@/lib/api";
+import { ENDPOINTS } from "@/lib/endpoints";
 
 export const dynamic = "force-static";
 
@@ -20,7 +21,7 @@ export default function LoginPage() {
     setError(null);
     setLoading(true);
     try {
-      await api.post("/auth/login", { email, password });
+      await api.post(ENDPOINTS.auth.login, { email, password });
       router.push("/");
       router.refresh();
     } catch (err) {

src/app/login/page.tsx

@@ -0,0 +1,41 @@
+"use client";
+/** ApexChain Network Operations Intelligence Platform */
+
+import { useEffect } from "react";
+import { RouteErrorState } from "@/components/ui/route-state";
+import { logger } from "@/lib/logger";
+
+export default function RouteError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    logger.error("route-error-boundary", {
+      message: error.message,
+      stack: error.stack,
+      digest: error.digest,
+    });
+  }, [error]);
+
+  return (
+    <div className="space-y-6 p-6">
+      <RouteErrorState
+        title="Outage Details Error"
+        description={
+          error.message || "An unexpected error occurred while loading this page."
+        }
+        primaryAction={{
+          label: "Try again",
+          onClick: reset,
+        }}
+        secondaryAction={{
+          label: "Reload page",
+          onClick: () => window.location.reload(),
+        }}
+      />
+    </div>
+  );
+}