{"record":{"id":"3ab49b95a83682fe","repo":"thedotmack/claude-mem","slug":"failed-to-load-datatype-response-statustext","errorCode":null,"errorMessage":"Failed to load ${dataType}: ${response.statusText}","messagePattern":"Failed to load (.+?): (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/ui/viewer/hooks/usePagination.ts","lineNumber":55,"sourceCode":"      return [];\n    }\n\n    stateRef.current = { ...stateRef.current, isLoading: true };\n    setState(prev => ({ ...prev, isLoading: true }));\n\n    const params = new URLSearchParams({\n      offset: offsetRef.current.toString(),\n      limit: UI.PAGINATION_PAGE_SIZE.toString()\n    });\n\n    if (currentFilter) {\n      params.append('project', currentFilter);\n    }\n\n    const response = await fetch(`${endpoint}?${params}`);\n\n    if (!response.ok) {\n      throw new Error(`Failed to load ${dataType}: ${response.statusText}`);\n    }\n\n    const data = await response.json() as { items: TItem[], hasMore: boolean };\n\n    const nextState = {\n      ...stateRef.current,\n      isLoading: false,\n      hasMore: data.hasMore\n    };\n    stateRef.current = nextState;\n\n    setState(prev => ({\n      ...prev,\n      isLoading: false,\n      hasMore: data.hasMore\n    }));\n\n    offsetRef.current += UI.PAGINATION_PAGE_SIZE;","sourceCodeStart":37,"sourceCodeEnd":73,"githubUrl":"https://github.com/thedotmack/claude-mem/blob/d8bc9755e74915e5c3b999181e10a67c889bce2a/src/ui/viewer/hooks/usePagination.ts#L37-L73","documentation":"usePaginationFor's fetch loop throws when the paginated API endpoint responds with a non-OK HTTP status, surfacing response.statusText in the message. React Query hooks like observations, summaries, and prompts use this loader, so the error surfaces as a failed query for that data type. It is a client-side guard against silently rendering empty data after a server failure.","triggerScenarios":"Fetching `${endpoint}?${params}` (with project filter appended when set) where the server returns 4xx/5xx — e.g. 500 server error, 401 unauthorized, 404 unknown project filter.","commonSituations":"Backend API down or erroring; expired session/token causing 401; filtering by a project name the server doesn't recognize; network proxies returning error pages.","solutions":["Check the response status in server logs and fix the server-side failure","Re-authenticate if the status is 401/403","Verify the `project` filter value matches a valid project","Retry the request; consider adding retry/backoff in the hook's query config"],"exampleFix":"// before\nconst response = await fetch(`${endpoint}?${params}`);\nif (!response.ok) throw new Error(`Failed to load ${dataType}: ${response.statusText}`);\n// after\nconst response = await fetch(`${endpoint}?${params}`);\nif (response.status === 401) { await reauth(); }\nif (!response.ok) throw new Error(`Failed to load ${dataType}: ${response.status} ${response.statusText}`);","handlingStrategy":"retry","validationCode":"const res = await fetch(`${endpoint}?ping=1`);\nif (!res.ok) console.warn('API unhealthy before paginated load:', res.status);","typeGuard":null,"tryCatchPattern":"useQuery({ queryKey: [dataType, filter], queryFn: loadPage, retry: (count, err) => count < 3 && !String(err).includes('401') });","preventionTips":["Validate project filter values against a known list before fetching","Handle 401 by redirecting to re-authentication","Add exponential backoff retries for transient 5xx in the query hook"],"tags":["http","react","pagination"],"backgroundTag":"http-error-response","analyzedSha":"d8bc9755e74915e5c3b999181e10a67c889bce2a","analyzedAt":"2026-09-17T16:40:26.182Z","contentChangedAt":"2026-09-17T16:40:26.182Z","schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}