Repository navigation
Some Errors Are not showing on Preview #344
Description
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
- Open Editor
- Call any variable without declaring the variable
- See Chrome Devtool
Expected behavior
-
Showing Error in the Preview Area like this -
-
Also adding "Console" panel
Screenshots
No response
Platform
- TutorialKit version: [e.g. 1.0.1]
- OS: [e.g. macOS, Windows, Linux]
- Browser: [e.g. Chrome, Safari, Firefox]
- Version: [e.g. 91.1]
Additional context
No response
Activity
AriPerkkio commentedon Sep 22, 2024
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.
rainmakersumit commentedon Sep 22, 2024
I think you guys should work on showing console log into a separate tab rather parent websites chrome devtool
AriPerkkio commentedon Sep 23, 2024
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?
Nemikolh commentedon Sep 23, 2024
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:
In your metadata you have:
In your application, you have three endpoints:
/previewwhich 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./consolewhich render a "console" can be something like https://github.com/samdenty/console-feed/your normal app + a script that overwriteconsole.log,console.error& friends to forward messages to it'swindow.parentThis would work right now and is more flexible / customizable.