refactor: replace custom API fetch logic with requestJson utility across multiple pages

Updated the API fetching mechanism in various components to utilize the new requestJson function for improved consistency and error handling. This change affects the alerts, dashboard, data collection, filters, gre, network map, probes, recursive routes, route optimizer, servers, settings, traffic, and uptime pages.

app/(main)/traffic/page.tsx

@@ -13,6 +13,7 @@ import {
 } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { useDataSource } from "@/lib/data-source"
+import { requestJson } from "@/shared/api/http-client"
 
 // ─── helpers ──────────────────────────────────────────────────────────────────
 
@@ -126,23 +127,7 @@ interface LiveTrafficInterface {
 
 function makeApiFetch(backendUrl: string) {
   return async function apiFetch<T>(path: string, init?: RequestInit): Promise<T> {
-    const headers: HeadersInit = init?.body ? { "Content-Type": "application/json" } : {}
-    const res = await fetch(backendUrl.replace(/\/$/, "") + path, {
-      ...init,
-      headers: { ...headers, ...(init?.headers ?? {}) },
-    })
-    if (!res.ok) {
-      let message = res.statusText
-      try {
-        const err = await res.json() as { error?: string }
-        message = err.error ?? message
-      } catch {
-        const text = await res.text().catch(() => "")
-        if (text) message = text
-      }
-      throw new Error(message)
-    }
-    return res.json() as Promise<T>
+    return requestJson<T>(backendUrl, path, init)
   }
 }