Use with srcdoc about console-feed HOT 8 CLOSED

I have a similar issue here, have you found a solution?

from console-feed.

You should use the Hook function on iframe.contentWindow.console

from console-feed.

Yes, that works if you have an iframe.html separately and give that file as a src attribute to the <iframe /> element on js. But it still doesn't work with the srcDoc attribute.

from console-feed.

@gonzarascon I ended up ditching console-feed and settled on a custom solution. You can find that here

from console-feed.

@gonzarascon @boywithsilverwings Ah I see. I've debugged it, and it seems that the iframe with a srcdoc is loaded two-times. In the componentDidMount after you've called the Hook function, the iframe is reloaded meaning the console isn't hooked anymore.

You can prevent this by using setTimeout.

Ideally, the Hook function should be in a separate JS bundle loaded only inside the iframe and you should use postMessage to send logs to the parent window.

https://codesandbox.io/s/625r54ql8n

from console-feed.

You have an example of Hook inside an iframe? (For using vanilla js, for example). If the srcDoc of the iframe is updated, the console un-hooks again.

from console-feed.

It requires setting up a bundler, haven't published umd builds. You can see an example of it in use here Example:

Iframe:

import { Hook, Encode } from "console-feed";

Hook(window.console, log => {
  window.postMessage(log, "*");
});

Parent:

import { Decode } from "console-feed";

window.addEventListener("message", log => {
  Decode(log);
});

from console-feed.

@gonzarascon @boywithsilverwings Ah I see. I've debugged it, and it seems that the iframe with a srcdoc is loaded two-times. In the componentDidMount after you've called the Hook function, the iframe is reloaded meaning the console isn't hooked anymore.

You can prevent this by using setTimeout.

Ideally, the Hook function should be in a separate JS bundle loaded only inside the iframe and you should use postMessage to send logs to the parent window.

https://codesandbox.io/s/625r54ql8n

@samdenty The above sandbox example works nicely in Chrome/Firefox, but not on Safari. On Safari, the console component turns out to be blank. Any insights into why this would be happening or how we could get it working? Thanks.

from console-feed.