refactor(ui): shared HTTP client + location-pinned fetch() lint rule

[ryan-crabbe-berri]

Relevant issues

Linear ticket

Refs LIT-3128

Pre-Submission checklist

Please complete all items before asking a LiteLLM maintainer to review your PR

• I have added meaningful tests
• My PR passes all unit tests on make test-unit
• My PR's scope is as isolated as possible; it only solves 1 specific problem
• I have requested a Greptile review by commenting @greptileai and received a Confidence Score of at least 4/5 before requesting a maintainer review

Type

🧹 Refactoring

Changes

The dashboard's networking layer re-implements the same fetch boilerplate hundreds of times: build the URL from getProxyBaseUrl(), set the Bearer ${accessToken} auth header, check res.ok, run deriveErrorMessage() + handleError() on failure, then res.json(). This PR kills that duplication behind one client and adds a lint rule so it can't grow back.

What changed:

• New src/lib/http/client.ts: a single typed wrapper that owns the only fetch() in the app. It centralizes the base URL, the auth header, error parsing (deriveErrorMessage), non-2xx -> thrown ApiError, and JSON parsing, and supports GET/POST/PUT/DELETE/PATCH with optional body, headers and query params. It is framework-agnostic (no React imports) so it can be called from client components today and server components later; the base URL, auth header name and the logout side effect are injected through createApiClient, and the fetch impl is injectable for tests.
• src/components/networking.tsx builds one configured apiClient and the 29 functions whose boilerplate maps exactly to the client's default behavior now call it instead of hand-rolling fetch. Each function's name, signature, return type and error behavior are unchanged; surrounding logs/notifications are preserved. Net -440 lines.
• eslint.config.mjs: the no-restricted-syntax fetch rule message now points at @/lib/http/client, and a files: ["src/lib/http/**"] override makes that the one place fetch() is allowed.
• Re-baselined eslint-suppressions.json with eslint . --prune-suppressions: the only change is networking.tsx's fetch count dropping 270 -> 241; every other rule's counts are untouched.

Scope and follow-up: only the functions whose error/response handling is byte-identical to the client's default were migrated. The remaining networking.tsx fetches and the ~61 scattered component/hook fetches across 43 files diverge from that default (they read response.text() error bodies, skip the res.ok check, or omit the handleError side effect), so routing them through the default client would change behavior. Those stay grandfathered for a separate burndown rather than getting forced into this PR.

Screenshots / Proof of Fix

eslint . is clean (0 errors; the pre-existing warnings are unrelated no-explicit-any):

✖ 2422 problems (0 errors, 2422 warnings)

The suppressions re-baseline touches exactly one line:

     "no-restricted-syntax": {
-      "count": 270
+      "count": 241
     }

New tests pass under vitest (full suite: 386 files, 3865 tests green):

 ✓ src/lib/http/client.test.ts (4 tests)
 ✓ tests/fetch-location-rule.test.ts (2 tests)
   ✓ flags a raw fetch() in a normal source file
   ✓ allows fetch() inside src/lib/http/ (the one place it lives)

One function shrinking to a single client call (modelCreateCall):

 export const modelCreateCall = async (accessToken: string, formValues: Model) => {
   try {
-    const url = proxyBaseUrl ? `${proxyBaseUrl}/model/new` : `/model/new`;
-    const response = await fetch(url, {
-      method: "POST",
-      headers: {
-        [globalLitellmHeaderName]: `Bearer ${accessToken}`,
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        ...formValues,
-      }),
-    });
-
-    if (!response.ok) {
-      const errorData = await response.json();
-      const errorMessage = deriveErrorMessage(errorData);
-      handleError(errorMessage);
-      throw new Error(errorMessage);
-    }
-
-    const data = await response.json();
+    const data = await apiClient.post(`/model/new`, {
+      accessToken,
+      body: {
+        ...formValues,
+      },
+    });
     console.log("API Response:", data);
     ...

[greptile-apps]

Greptile Summary

This PR introduces a single typed HTTP client (src/lib/http/client.ts) that centralizes base-URL resolution, auth-header injection, error parsing, and JSON handling, then migrates 29 functions in networking.tsx onto it (net −440 lines). A no-restricted-syntax ESLint rule enforces that fetch() may only be called inside src/lib/http/, with existing violations across ~60 files grandfathered via a re-baselined eslint-suppressions.json.

• client.ts: reads response.text() on both the error and success paths; the error path wraps non-JSON bodies (e.g. HTML 502s) in the raw string before throwing ApiError, and the success path returns undefined for empty bodies (204). All three previously-flagged concerns (non-JSON error fallback, void | Promise<void> typing, test coverage) are addressed.
• eslint.config.mjs: adds the no-restricted-syntax fetch rule and a src/lib/http/** override that currently turns off all no-restricted-syntax rules for that directory — slightly broader than needed (see inline comment).

Confidence Score: 5/5

Safe to merge — a clean mechanical refactoring with all previously-flagged issues resolved and no behavioral regressions in the migrated functions.

All 29 migrated networking functions preserve their original signatures, return types, and error behavior. The new HTTP client correctly handles non-JSON error bodies, empty success responses, and optional auth tokens, backed by a focused test suite. The only observation is a minor forward-compatibility gap in the ESLint override that disables more than strictly necessary for src/lib/http/**.

No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/lib/http/client.ts	New centralized HTTP client; previously-flagged issues (non-JSON error fallback, Promise typing) are resolved; success-path JSON.parse matches old behavior
ui/litellm-dashboard/src/lib/http/client.test.ts	Test suite covers happy path, body serialization, JSON error, HTML 502 fallback, 204 No Content, and missing token — all previously-requested cases are present
ui/litellm-dashboard/src/components/networking.tsx	29 functions migrated to apiClient; function signatures, return types, and surrounding logs/notifications are unchanged; no behavioral regressions identified
ui/litellm-dashboard/eslint.config.mjs	Adds no-restricted-syntax fetch rule and a broad 'off' override for src/lib/http/**; the override disables all no-restricted-syntax rules in that directory, not just the fetch one
ui/litellm-dashboard/eslint-suppressions.json	Re-baselined with --prune-suppressions; ~60 files get new no-restricted-syntax suppressions for pre-existing raw fetch() calls, as documented in the PR description
ui/litellm-dashboard/tests/fetch-location-rule.test.ts	ESLint rule tests correctly verify that fetch() is flagged outside src/lib/http/ and allowed inside it

_{Reviews (3): Last reviewed commit: "refactor(ui): widen onError type and han..." | Re-trigger Greptile}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[ryan-crabbe-berri]

@greptileai re review

[ryan-crabbe-berri]

@greptileai On the non-JSON error body flag: this was a faithful port of the existing behavior, since every migrated function already did const errorData = await response.json() on the !response.ok branch, so an HTML 502/503 already threw a SyntaxError before handleError ran; I've since hardened the now-centralized path to read the body as text and fall back when it isn't JSON, which strictly improves on the original rather than changing what these 29 functions did before.

[greptile-apps]

That's confirmed. The error path in client.ts:131-140 does exactly what you described — reads the body as text first, attempts JSON.parse, and falls back to the raw text or HTTP ${status} string if parsing fails. That's strictly better than the original await response.json() on the error branch, which would throw a SyntaxError on a 502 HTML body before handleError ever ran.

The concern is withdrawn. The hardened path is a genuine improvement over the pre-existing behavior, not a behavior change for the 29 migrated functions.

[ryan-crabbe-berri]

@greptileai re-review