feat: capture runtime/preview errors via postMessage and show Fix wit…

[pablopunk]

…h Doce overlay

Summary by CodeRabbit

• New Features
  • Runtime errors are now captured and displayed directly in the preview panel with error messages and stack traces.
  • Added a "Fix with Doce" button when available for selected errors.
  • Added reload functionality to clear the error overlay and retry execution.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
doce-dev-www	Ready	Preview, Comment	Apr 23, 2026 6:32pm

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

Walkthrough

This pull request implements a postMessage-based error reporting system for embedded preview iframes. A new error-bridge script is added to the Astro starter template that captures runtime errors, unhandled promise rejections, and Vite HMR events, normalizing and forwarding them to the parent window. The PreviewPanel component now listens for these error messages, maintains a runtime error state, and renders a conditional overlay displaying error details with a reload button. Errors are cleared on page load, iframe reload, or when the preview URL changes.

Sequence Diagram

sequenceDiagram
    participant Preview as Preview Iframe
    participant Bridge as doce-error-bridge.ts
    participant Parent as Parent Window
    participant Panel as PreviewPanel Component

    Preview->>Bridge: error event / unhandledrejection
    Bridge->>Bridge: Normalize error & stack
    Bridge->>Parent: postMessage({type: 'doce:error', ...})
    Parent->>Panel: Receive message
    Panel->>Panel: Store in runtimeError state
    Panel->>Panel: Render error overlay
    
    Note over Preview,Panel: User clicks reload button
    Panel->>Panel: Clear runtimeError state
    Panel->>Preview: Reload iframe
    
    Preview->>Bridge: Page loads successfully
    Bridge->>Parent: postMessage({type: 'doce:error-clear'})
    Parent->>Panel: Receive clear message
    Panel->>Panel: Clear runtimeError state

Loading

Possibly related PRs

• feat: add 'Fix with Doce' button to preview error state #46: Adds onFixWithDoce prop to PreviewPanel and wires the "Fix with Doce" button functionality to handle error fixes.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: capturing runtime/preview errors via postMessage and displaying a 'Fix with Doce' overlay, which matches the core functionality added across the three modified/new files.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}