feat: display JS runtime errors in live preview panel#119
Open
Swathi-Chippa wants to merge 1 commit into
Open
Conversation
Contributor
|
@Swathi-Chippa is attempting to deploy a commit to the debmallya-03's projects Team on Vercel. A member of the Team first needs to authorize it. |
❌ Deploy Preview for webifynet failed. Why did it fail? →
|
Author
|
Hey @Debmallya-03! Just opened this PR for the runtime error display feature — all changes in |
Swathi-Chippa
force-pushed
the
feat/runtime-error-display
branch
from
4538d03 to
496e98b
Compare
Author
|
Hi @Debmallya-03 — the conflicts are resolved and the branch is clean now. The Netlify and Vercel deploy checks are awaiting maintainer approval to run. Could you approve the workflows so the deploy preview can be verified? Thanks |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
[Feature] Display JavaScript Runtime Errors in the Live Preview Panel
Closes
Closes #92
What This PR Does
Previously, when JavaScript code threw a runtime error inside the live preview iframe, the output would silently fail with no feedback to the user. This PR adds a non-intrusive error strip beneath the preview panel that catches and displays runtime errors in real time.
Changes Made
All changes are confined to a single file:
app/page.tsxPhase 1 — Iframe Error Interceptor
Injected a small error interceptor script at the very top of
<head>inside thecombinedCodestring, in both the auto-previewuseEffectandrunCodeManually. It intercepts:window.onerror— catches synchronous JS errors with message, line, and columnwindow.addEventListener('unhandledrejection', ...)— catches uncaught Promise rejectionsBoth post a
WEBIFY_ERRORmessage to the parent viapostMessage, reusing the existing message type already handled in the codebase.Phase 2 — State & UI
runtimeErrorstate (message,line,column) initialized tonullWEBIFY_ERRORlistener to callsetRuntimeErroralongside the existingconsoleErrorsupdatesetRuntimeError(null)at the start of both recompile paths to clear stale errors on every new run</iframe>tag insidePreviewErrorBoundaryPhase 3 — Edge Cases
"Script error."withline: 0(caused by CDN scripts withoutcrossorigin), a helpful tip is shown beneath the error message✕button on the right side of the strip lets users manually clear the errorWEBIFY_ERRORchannelHow to Test
Open the editor and write a JS error in the JS pane:
→ Error strip should appear below the preview with the message and line number
Write a rejected promise:
→ Error strip should show the rejection message
Fix the error and click Run (or let auto-refresh trigger)
→ Error strip should disappear immediately
Add an external script without
crossorigin:→ Error strip should show the CORS tip
Click
✕on the error strip → it should dismissWhat Was Not Changed
srcdoc/createPreviewErrorHtml) is untouchedScreenshots