Some Errors Are not showing on Preview

rainmakersumit commented 1 month ago

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

AriPerkkio commented 1 month 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.

rainmakersumit commented 1 month ago

I think you guys should work on showing console log into a separate tab rather parent websites chrome devtool

AriPerkkio commented 1 month ago

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 commented 1 month ago

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.

stackblitz / tutorialkit