Open rainmakersumit opened 2 months ago
Preview shows everything that the application you are running from template is showing. If the template application doesn't show errors, then they won't be visible.
I think you guys should work on showing console log into a separate tab rather parent websites chrome devtool
At the moment we don't override or capture any console errors of the preview iframe. I wonder if we did that, how many false positive errors would we end up catching and showing to the end users. As we don't control what code users run in the webcontainer, it's also possible that we can't run our own scripts there. @Nemikolh, @sulco, any thoughts?
Hey all!
I'm thinking that solving #213 will probably help a bit for that type of scenario. Having a console for each previews would be a nice feature though.
However rather than have this in TutorialKit core, you can have it in your tutorial by changing a bit how your preview works:
Preview /preview
┌────────────────────────────┐
│┌──────────────────────────┐│
││Iframe / ││
││ ││
││ ││
││ ││
││ ││
│└──────────────────────────┘│
│┌──────────────────────────┐│
││Iframe /console ││
││ ││
│└──────────────────────────┘│
└────────────────────────────┘
In your metadata you have:
previews:
- { port: 1234, pathname: "/preview" }
In your application, you have three endpoints:
/preview
which serves a simple html page with two iframes, one pointing at /
and the other at /console
. It also listen to 'message'
sent by /
and forward them to /console
./console
which render a "console" can be something like https://github.com/samdenty/console-feed/
your normal app + a script that overwrite console.log
, console.error
& friends to forward messages to it's window.parent
This would work right now and is more flexible / customizable.
Describe the bug
Some errors, like syntax or reference errors, are not being displayed properly. It would be helpful to have a console for the iframe, similar to how a terminal appears in a separate tab.
Link to a StackBlitz project which shows the error
No response
Steps to reproduce
Expected behavior
Showing Error in the Preview Area like this -
Also adding "Console" panel
Screenshots
No response
Platform
Additional context
No response