Add console error logging

The console.log messages in an iframe don't typically bubble up to the parent frame. However, you can add some code in your JavaScript that sends a message from the child frame (the iframe) to the parent frame (your app), and the parent frame can then handle the message and display the output.

In your iframe JavaScript code, you can replace the console.log statements with window.parent.postMessage. Here's an example:

// In your JavaScript code (in iframe), replace console.log with this:
window.parent.postMessage({ type: 'LOG', message: 'Your log message here' }, '*');

Then, in your parent component, listen for the message event and handle the data:

// In your parent component (the app), add an event listener for message events:
window.addEventListener('message', function(event) {
  if (event.data.type === 'LOG') {
    console.log('Message from iframe:', event.data.message);
  }
});

You can then replace the console.log with displaying the message in your app's UI, such as updating a state variable with the new log and displaying that state variable somewhere in your component.

However, as this approach uses the postMessage API to communicate between the iframe and the parent window, make sure that you have control over the code that's running in both windows to prevent any potential security risks.

Note that this approach will work only if the code that's being evaluated is under your control and you can replace console.log calls with postMessage. If you are evaluating arbitrary JavaScript code that could contain console.log calls, you may need to inject some script that overrides the console.log function to redirect its output as you wish, which could be quite complex.

tom-leamon / mocode

Add console error logging #8