Add AbortSignal support to API functions for request cancellation

Add optional signal?: AbortSignal parameter to all API GET functions so they can be cancelled when components unmount. This prevents state-update warnings and wasted resources. Changes: - frontend/src/api/history.ts: fetchHistory, fetchIpHistory - frontend/src/api/map.ts: fetchBansByCountry - frontend/src/api/jails.ts: fetchJails, fetchActiveBans - frontend/src/api/config.ts: fetchJailConfig, fetchInactiveJails, fetchJailConfigFiles, fetchFilterFiles (threads signal through fetchFilters), fetchFilterFile, fetchActionFiles, fetchActionFile - frontend/src/api/blocklist.ts: fetchImportLog, previewBlocklist Updated all calling hooks to pass the abort signal from their controllers: - useHistory, useIpHistory - useMapData - useActiveBans - useJails - useConfigActiveStatus (fetchJails and fetchJailConfigs) - useJailAdmin (fetchInactiveJails) - useJailConfigDetail (fetchJailConfig) - useImportLog (fetchImportLog) - useBlocklists (previewBlocklist with AbortController) Updated Docs/Web-Development.md to document the convention. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-04-23 08:33:28 +02:00
parent 1c5b2d36d9
commit 5a6cb640d8
16 changed files with 54 additions and 59 deletions
--- a/Docs/Tasks.md
+++ b/Docs/Tasks.md
@@ -1,23 +1,3 @@
-### TASK-BUG-09 — `linesCount` Input in `ServerHealthSection` Fires Fetch on Every Keystroke
-
-**Where found**
-`frontend/src/components/config/ServerHealthSection.tsx` line 410: `onChange={(_e, d) => { setLinesCount(Number(d.value)); }}`. The `linesCount` value is passed directly to `useServerHealth(linesCount, filterValue)`. `useServerHealth` re-creates its `refresh` callback when `linesCount` changes, which rebuilds `fetchData`, which triggers `useEffect([fetchData])`, firing a `GET /api/config/server/log` for every digit typed. Unlike `filterValue` (which is debounced at 500ms), `linesCount` has no debounce.
-
-**Goal**
-Introduce a `debouncedLinesCount` state mirroring the existing `filterValue` / `filterRaw` pattern already in the component. Update the `onChange` handler to set a raw state, and apply a debounce (300–500ms) before committing to `linesCount` passed to `useServerHealth`.
-
-**Possible traps and issues**
- The debounce ref pattern (`filterDebounceRef`) is already present in the component; the linesCount debounce should reuse the same approach to avoid introducing a second debounce timer ref.
- `Number(d.value)` on an empty field produces `0`. Guard against `0` or negative values before passing to the API, or the backend may reject them.
-
-**Docs changes needed**
-None required.
-
-**Why this is needed**
-Typing `"500"` in the Lines field currently fires three HTTP requests (`"5"`, `"50"`, `"500"`). Each request fetches potentially hundreds of log lines and serializes them, adding unnecessary backend load.
-
---
-
 ### TASK-ABORT-01 — Missing `signal` Parameter on Multiple API Functions

 **Where found**
--- a/Docs/Web-Development.md
+++ b/Docs/Web-Development.md
@@ -76,14 +76,16 @@ import type { Ban } from "../types/ban";
 - Use a **central API client** (e.g., a thin wrapper around `fetch` or `axios`) that returns typed data — individual components never call `fetch` directly.
 - Validate or assert the response structure at the boundary when dealing with untrusted data; for critical flows, consider a runtime validation library (e.g., `zod`).
 - API endpoint paths are **constants** defined in a single file (`api/endpoints.ts`) — never hard-code URLs in components.
+- **All API functions that perform a `GET` request must accept an optional `signal?: AbortSignal` parameter and forward it to the HTTP client.** This enables hooks to cancel in-flight requests when components unmount, preventing silent state-update errors and wasted resources. When an API function calls another internal API function, thread the signal through to the underlying call.

 ```ts
 // api/client.ts
 const BASE_URL = import.meta.env.VITE_API_URL ?? "/api";

-async function get<T>(path: string): Promise<T> {
+async function get<T>(path: string, signal?: AbortSignal): Promise<T> {
  const response: Response = await fetch(`${BASE_URL}${path}`, {
    credentials: "include",
+    signal,
  });
  if (!response.ok) {
    throw new ApiError(response.status, await response.text());
@@ -99,11 +101,19 @@ export const api = { get, post, put, del } as const;
 import type { BanListResponse } from "../types/ban";
 import { api } from "./client";

-export async function fetchBans(hours: number): Promise<BanListResponse> {
-  return api.get<BanListResponse>(`/bans?hours=${hours}`);
+export async function fetchBans(hours: number, signal?: AbortSignal): Promise<BanListResponse> {
+  return api.get<BanListResponse>(`/bans?hours=${hours}`, signal);
 }
 ```

+```ts
+// hooks/useBans.ts
+const ctrl = new AbortController();
+fetchBans(24, ctrl.signal)  // Pass the signal to enable cancellation on unmount
+  .then(resp => { /* ... */ })
+  .catch(err => { /* ... */ });
+```
+
 ---

 ## 4. Code Organization
--- a/frontend/src/api/blocklist.ts
+++ b/frontend/src/api/blocklist.ts
@@ -50,8 +50,8 @@ export async function deleteBlocklist(id: number): Promise<void> {
 // ---------------------------------------------------------------------------

 /** Preview the contents of a blocklist source URL. */
-export async function previewBlocklist(id: number): Promise<PreviewResponse> {
-  return get<PreviewResponse>(ENDPOINTS.blocklistPreview(id));
+export async function previewBlocklist(id: number, signal?: AbortSignal): Promise<PreviewResponse> {
+  return get<PreviewResponse>(ENDPOINTS.blocklistPreview(id), signal);
 }

 // ---------------------------------------------------------------------------
@@ -86,6 +86,7 @@ export async function fetchImportLog(
  page = 1,
  pageSize = 50,
  sourceId?: number,
+  signal?: AbortSignal,
 ): Promise<ImportLogListResponse> {
  const params = new URLSearchParams();
  params.set("page", String(page));
@@ -93,5 +94,6 @@ export async function fetchImportLog(
  if (sourceId !== undefined) params.set("source_id", String(sourceId));
  return get<ImportLogListResponse>(
    `${ENDPOINTS.blocklistsLog}?${params.toString()}`,
+    signal,
  );
 }
--- a/frontend/src/api/config.ts
+++ b/frontend/src/api/config.ts
@@ -57,9 +57,10 @@ signal?: AbortSignal,
 }

 export async function fetchJailConfig(
-  name: string
+  name: string,
+  signal?: AbortSignal,
 ): Promise<JailConfigResponse> {
-  return get<JailConfigResponse>(ENDPOINTS.configJail(name));
+  return get<JailConfigResponse>(ENDPOINTS.configJail(name), signal);
 }

 export async function updateJailConfig(
@@ -161,8 +162,8 @@ export async function updateMapColorThresholds(
 // Jail config files (Task 4a)
 // ---------------------------------------------------------------------------

-export async function fetchJailConfigFiles(): Promise<JailConfigFilesResponse> {
-  return get<JailConfigFilesResponse>(ENDPOINTS.configJailFiles);
+export async function fetchJailConfigFiles(signal?: AbortSignal): Promise<JailConfigFilesResponse> {
+  return get<JailConfigFilesResponse>(ENDPOINTS.configJailFiles, signal);
 }

 export async function createJailConfigFile(
@@ -202,8 +203,8 @@ export async function setJailConfigFileEnabled(
 * returns active-status data) and maps the result down to the simpler
 * ``ConfFilesResponse`` shape expected by the raw-file editor and export tab.
 */
-export async function fetchFilterFiles(): Promise<ConfFilesResponse> {
-  const result = await fetchFilters();
+export async function fetchFilterFiles(signal?: AbortSignal): Promise<ConfFilesResponse> {
+  const result = await fetchFilters(signal);
  return {
    files: result.filters.map((f) => ({ name: f.name, filename: f.filename })),
    total: result.total,
@@ -211,8 +212,8 @@ export async function fetchFilterFiles(): Promise<ConfFilesResponse> {
 }

 /** Fetch the raw content of a filter definition file for the raw editor. */
-export async function fetchFilterFile(name: string): Promise<ConfFileContent> {
-  return get<ConfFileContent>(ENDPOINTS.configFilterRaw(name));
+export async function fetchFilterFile(name: string, signal?: AbortSignal): Promise<ConfFileContent> {
+  return get<ConfFileContent>(ENDPOINTS.configFilterRaw(name), signal);
 }

 /** Save raw content to a filter definition file (``PUT /filters/{name}/raw``). */
@@ -234,12 +235,12 @@ export async function createFilterFile(
 // Action files (Task 4e)
 // ---------------------------------------------------------------------------

-export async function fetchActionFiles(): Promise<ConfFilesResponse> {
-  return get<ConfFilesResponse>(ENDPOINTS.configActions);
+export async function fetchActionFiles(signal?: AbortSignal): Promise<ConfFilesResponse> {
+  return get<ConfFilesResponse>(ENDPOINTS.configActions, signal);
 }

-export async function fetchActionFile(name: string): Promise<ConfFileContent> {
-  return get<ConfFileContent>(ENDPOINTS.configActionRaw(name));
+export async function fetchActionFile(name: string, signal?: AbortSignal): Promise<ConfFileContent> {
+  return get<ConfFileContent>(ENDPOINTS.configActionRaw(name), signal);
 }

 export async function updateActionFile(
@@ -495,9 +496,8 @@ export async function updateParsedJailFile(
 // Inactive jails (Stage 1)
 // ---------------------------------------------------------------------------

-/** Fetch all inactive jails from config files. */
-export async function fetchInactiveJails(): Promise<InactiveJailListResponse> {
-  return get<InactiveJailListResponse>(ENDPOINTS.configJailsInactive);
+export async function fetchInactiveJails(signal?: AbortSignal): Promise<InactiveJailListResponse> {
+  return get<InactiveJailListResponse>(ENDPOINTS.configJailsInactive, signal);
 }

 /**
--- a/frontend/src/api/history.ts
+++ b/frontend/src/api/history.ts
@@ -15,6 +15,7 @@ import type {
 */
 export async function fetchHistory(
  query: HistoryQuery = {},
+  signal?: AbortSignal,
 ): Promise<HistoryListResponse> {
  const params = new URLSearchParams();
  if (query.range) params.set("range", query.range);
@@ -30,7 +31,7 @@ export async function fetchHistory(
  const url = qs
    ? `${ENDPOINTS.history}?${qs}`
    : ENDPOINTS.history;
-  return get<HistoryListResponse>(url);
+  return get<HistoryListResponse>(url, signal);
 }

 /**
@@ -38,9 +39,9 @@ export async function fetchHistory(
 *
 * @returns null when the server returns 404 (no history for this IP).
 */
-export async function fetchIpHistory(ip: string): Promise<IpDetailResponse | null> {
+export async function fetchIpHistory(ip: string, signal?: AbortSignal): Promise<IpDetailResponse | null> {
  try {
-    return await get<IpDetailResponse>(ENDPOINTS.historyIp(ip));
+    return await get<IpDetailResponse>(ENDPOINTS.historyIp(ip), signal);
  } catch (err: unknown) {
    if (
      typeof err === "object" &&
--- a/frontend/src/api/jails.ts
+++ b/frontend/src/api/jails.ts
@@ -27,8 +27,8 @@ import type {
 * @returns A {@link JailListResponse} containing summary info for each jail.
 * @throws {ApiError} On non-2xx responses.
 */
-export async function fetchJails(): Promise<JailListResponse> {
-  return get<JailListResponse>(ENDPOINTS.jails);
+export async function fetchJails(signal?: AbortSignal): Promise<JailListResponse> {
+  return get<JailListResponse>(ENDPOINTS.jails, signal);
 }

 /**
@@ -213,8 +213,8 @@ export async function unbanIp(
 * @returns An {@link ActiveBanListResponse} with geo-enriched entries.
 * @throws {ApiError} On non-2xx responses.
 */
-export async function fetchActiveBans(): Promise<ActiveBanListResponse> {
-  return get<ActiveBanListResponse>(ENDPOINTS.bansActive);
+export async function fetchActiveBans(signal?: AbortSignal): Promise<ActiveBanListResponse> {
+  return get<ActiveBanListResponse>(ENDPOINTS.bansActive, signal);
 }

 /**
--- a/frontend/src/api/map.ts
+++ b/frontend/src/api/map.ts
@@ -19,6 +19,7 @@ export async function fetchBansByCountry(
  origin: BanOriginFilter = "all",
  source: "fail2ban" | "archive" = "fail2ban",
  countryCode?: string,
+  signal?: AbortSignal,
 ): Promise<BansByCountryResponse> {
  const params = new URLSearchParams({ range });
  if (origin !== "all") {
@@ -30,5 +31,5 @@ export async function fetchBansByCountry(
  if (countryCode) {
    params.set("country_code", countryCode);
  }
-  return get<BansByCountryResponse>(`${ENDPOINTS.dashboardBansByCountry}?${params.toString()}`);
+  return get<BansByCountryResponse>(`${ENDPOINTS.dashboardBansByCountry}?${params.toString()}`, signal);
 }
--- a/frontend/src/hooks/useActiveBans.ts
+++ b/frontend/src/hooks/useActiveBans.ts
@@ -35,7 +35,7 @@ export function useActiveBans(): UseActiveBansResult {
    setLoading(true);
    setError(null);

-    fetchActiveBans()
+    fetchActiveBans(ctrl.signal)
      .then((res) => {
        if (!ctrl.signal.aborted) {
          setBans(res.bans);
--- a/frontend/src/hooks/useBlocklists.ts
+++ b/frontend/src/hooks/useBlocklists.ts
@@ -74,7 +74,8 @@ export function useBlocklists(): UseBlocklistsReturn {
  );

  const previewSource = useCallback(async (id: number): Promise<PreviewResponse> => {
-    return previewBlocklist(id);
+    const ctrl = new AbortController();
+    return previewBlocklist(id, ctrl.signal);
  }, []);

  return {
--- a/frontend/src/hooks/useConfigActiveStatus.ts
+++ b/frontend/src/hooks/useConfigActiveStatus.ts
@@ -66,8 +66,8 @@ export function useConfigActiveStatus(): UseConfigActiveStatusResult {
    setError(null);

    Promise.all([
-      fetchJails(),
-      fetchJailConfigs(),
+      fetchJails(ctrl.signal),
+      fetchJailConfigs(ctrl.signal),
    ])
      .then(([jailsResp, configsResp]) => {
        if (ctrl.signal.aborted) return;
--- a/frontend/src/hooks/useHistory.ts
+++ b/frontend/src/hooks/useHistory.ts
@@ -39,7 +39,7 @@ export function useHistory(query: HistoryQuery = {}): UseHistoryResult {
    setLoading(true);
    setError(null);

-    fetchHistory({ ...query, page })
+    fetchHistory({ ...query, page }, abortRef.current.signal)
      .then((resp) => {
        setItems(resp.items);
        setTotal(resp.total);
@@ -85,7 +85,7 @@ export function useIpHistory(ip: string): UseIpHistoryResult {
    setLoading(true);
    setError(null);

-    fetchIpHistory(ip)
+    fetchIpHistory(ip, abortRef.current.signal)
      .then((resp) => {
        setDetail(resp);
      })
--- a/frontend/src/hooks/useImportLog.ts
+++ b/frontend/src/hooks/useImportLog.ts
@@ -37,7 +37,7 @@ export function useImportLog(
    setLoading(true);
    setError(null);

-    fetchImportLog(page, pageSize, sourceId)
+    fetchImportLog(page, pageSize, sourceId, ctrl.signal)
      .then((result) => {
        if (!ctrl.signal.aborted) {
          setData(result);
--- a/frontend/src/hooks/useJailAdmin.ts
+++ b/frontend/src/hooks/useJailAdmin.ts
@@ -49,7 +49,7 @@ export function useJailAdmin(): UseJailAdminResult {
    setInactiveLoading(true);
    setInactiveError(null);

-    fetchInactiveJails()
+    fetchInactiveJails(ctrl.signal)
      .then((resp) => {
        if (!ctrl.signal.aborted) {
          setInactiveJails(resp.jails);
--- a/frontend/src/hooks/useJailConfigDetail.ts
+++ b/frontend/src/hooks/useJailConfigDetail.ts
@@ -32,7 +32,7 @@ export function useJailConfigDetail(name: string): UseJailConfigDetailResult {
    setLoading(true);
    setError(null);

-    fetchJailConfig(name)
+    fetchJailConfig(name, ctrl.signal)
      .then((resp) => {
        if (!ctrl.signal.aborted) {
          setJail(resp.jail);
--- a/frontend/src/hooks/useJailList.ts
+++ b/frontend/src/hooks/useJailList.ts
@@ -44,7 +44,7 @@ export function useJails(): UseJailsResult {
    setLoading(true);
    setError(null);

-    fetchJails()
+    fetchJails(ctrl.signal)
      .then((res) => {
        if (!ctrl.signal.aborted) {
          setJails(res.jails);
--- a/frontend/src/hooks/useMapData.ts
+++ b/frontend/src/hooks/useMapData.ts
@@ -66,7 +66,7 @@ export function useMapData(
      abortRef.current?.abort();
      abortRef.current = new AbortController();

-      fetchBansByCountry(range, origin, source, countryCode)
+      fetchBansByCountry(range, origin, source, countryCode, abortRef.current.signal)
        .then((resp) => {
          setData(resp);
        })