firecrawl/open-lovable · error

Failed to apply code: ${response.statusText}

Error message

Failed to apply code: ${response.statusText}

What it means

This is a client-side guard thrown by the AISandboxPage component when the POST to the streaming /api/apply-ai-code-stream endpoint returns a non-2xx HTTP status. The API route failed before it could start streaming generated code into the sandbox, so response.ok is false. The statusText from the fetch Response is appended to expose the HTTP reason phrase (e.g. 'Internal Server Error', 'Not Found', 'Too Many Requests').

Source

Thrown at app/generation/page.tsx:657

        // Clear pending packages after use
        (window as any).pendingPackages = [];
      }
      
      // Use streaming endpoint for real-time feedback
      const effectiveSandboxData = overrideSandboxData || sandboxData;
      const response = await fetch('/api/apply-ai-code-stream', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          response: code,
          isEdit: isEdit,
          packages: pendingPackages,
          sandboxId: effectiveSandboxData?.sandboxId // Pass the sandbox ID to ensure proper connection
        })
      });
      
      if (!response.ok) {
        throw new Error(`Failed to apply code: ${response.statusText}`);
      }
      
      // Handle streaming response
      const reader = response.body?.getReader();
      const decoder = new TextDecoder();
      let finalData: any = null;
      
      while (reader) {
        const { done, value } = await reader.read();
        if (done) break;
        
        const chunk = decoder.decode(value);
        const lines = chunk.split('\n');
        
        for (const line of lines) {
          if (line.startsWith('data: ')) {
            try {
              const data = JSON.parse(line.slice(6));

View on GitHub (pinned to 69bd93bae7)

Solutions

1. Check the browser Network tab for the /api/apply-ai-code-stream request and read the actual status code and response body for the server-side error detail
2. Verify sandboxData.sandboxId is fresh — reinitialize the sandbox and retry instead of reusing a stale ID
3. Confirm the /api/apply-ai-code-stream route exists and inspect its server logs for the underlying exception
4. Clear or validate pendingPackages; a failing npm install on the server often 500s this endpoint
5. Retry with backoff if the status is 502/503/504 (transient gateway/timeout)

Example fix

// before
if (!response.ok) {
  throw new Error(`Failed to apply code: ${response.statusText}`);
}
// after
if (!response.ok) {
  let detail = response.statusText;
  try { detail = (await response.json()).error ?? detail; } catch {}
  if (response.status >= 500) { /* retry once with fresh sandbox */ }
  throw new Error(`Failed to apply code (${response.status}): ${detail}`);
}

const res = await fetch('/api/health/apply-stream', { method: 'HEAD' }).catch(() => null);
if (!res || !res.ok) throw new Error('apply-ai-code-stream endpoint unavailable');
if (!sandboxData?.sandboxId) throw new Error('No active sandbox — initialize one before applying code');

function isOkResponse(r: Response): r is Response & { ok: true; body: ReadableStream } {
  return r.ok && r.body !== null;
}

try {
  const response = await fetch('/api/apply-ai-code-stream', { ... });
  if (!response.ok) {
    const body = await response.text().catch(() => '');
    throw Object.assign(new Error(`Apply failed: ${response.status} ${body || response.statusText}`), { status: response.status });
  }
  // ... stream reading
} catch (err: any) {
  addChatMessage(`Code application failed: ${err.message}`, 'system');
  if (err.status >= 500) queueRetryWithBackoff();
}

When it happens

Trigger: fetch('/api/apply-ai-code-stream') returns response.ok === false — the route handler threw (bad sandboxId, sandbox WebSocket disconnected, package install failure), the route does not exist (404), or the request body (response/isEdit/packages/sandboxId) caused a server-side validation or runtime error.

Common situations: Sandbox was recycled or expired so the passed sandboxId is stale; dev server restarted while a long-running session kept an old sandbox ID; the API route crashes installing pendingPackages (npm registry down, invalid package name); proxy/load-balancer returns 502/504 for long streaming requests; deploying without the API route present (404 Not Found).

Related errors

• HTTP error! status: ${response.status}
• Failed to generate code
• Firecrawl API returned ${firecrawlResponse.status}
• Unknown error
• ${finalData?.error || 'Failed to apply code'}

AI-assisted analysis of firecrawl/open-lovable@69bd93bae7 (2026-08-28). Data as JSON: /api/errors/bff863e461b4b7d9. Report an issue: GitHub.