DayuanJiang/next-ai-draw-io · error · Error

Request failed with status ${res.status}

Error message

Request failed with status ${res.status}

What it means

useModelConfig fetches /api/models; when the server responds non-OK the hook throws with the HTTP status after logging status/statusText.

Source

Thrown at hooks/use-model-config.ts:159

    useEffect(() => {
        const loaded = loadConfig()
        setConfig(loaded)
        setIsLoaded(true)
    }, [])

    // Load server models on mount (if any)
    useEffect(() => {
        if (typeof window === "undefined") return

        fetch(getApiEndpoint("/api/server-models"))
            .then((res) => {
                if (!res.ok) {
                    console.error(
                        "Failed to load server models:",
                        res.status,
                        res.statusText,
                    )
                    throw new Error(`Request failed with status ${res.status}`)
                }
                return res.json()
            })
            .then((data) => {
                const raw: FlattenedServerModel[] = data?.models || []
                setServerModels(raw)
                setServerLoaded(true)

                // Auto-select default server model if no model is currently selected
                setConfig((prev) => {
                    if (!prev.selectedModelId && raw.length > 0) {
                        const defaultModel = raw.find((m) => m.isDefault)
                        if (defaultModel) {
                            return { ...prev, selectedModelId: defaultModel.id }
                        }
                        // If no default marked, use first server model
                        return { ...prev, selectedModelId: raw[0].id }
                    }

View on GitHub (pinned to 155ef4f7ac)

Solutions

1. Open the logged status: 500 usually means provider env vars missing — set your provider API key
2. Curl /api/models directly to see the server-side error body
3. Wait for dev recompile or restart the server
4. Wrap the hook consumer in an error boundary / use React Query with retry instead of raw fetch

Example fix

// before
fetch('/api/models').then((res) => {
  if (!res.ok) throw new Error(`Request failed with status ${res.status}`)
  return res.json()
})

// after
const res = await fetch('/api/models')
if (!res.ok) {
  const body = await res.json().catch(() => ({}))
  setModelsError(body.error || `HTTP ${res.status}`)
  return
}

const res = await fetch('/api/models')
if (!res.ok) { /* show cached/local model list instead of throwing */ }

try { await loadServerModels() } catch (e) { setModelsError((e as Error).message); fallbackToLocalModels() }

When it happens

Trigger: The models endpoint returns 401 (unauthorized), 500 (provider credential failure server-side), or 404 while pages are rebuilding, during initial server model list load.

Common situations: Missing AI provider API key in .env.local so /api/models fails server-side, dev server mid-recompile, or reverse proxy intercepting the route.

Understand the failure class

Background: 'Something went wrong' / 'Request failed (500)' / 'HTTP error! status: 404' — what failed HTTP requests actually mean and how to find the real cause — this error's family across 28 libraries.

Related errors

• Request failed (${res.status})
• ModelScope API error (${response.status}): ${errorText}
• Unexpected response format: ${contentType}

AI-assisted analysis of DayuanJiang/next-ai-draw-io@155ef4f7ac (2026-08-27). Data as JSON: /api/errors/0dd3a67c37c0a6e8. Report an issue: GitHub.