I am trying to get the logs from an iframe and have run into several major issues. I h

Getting console logs from iframe error about console-feed HOT 1 CLOSED

samdenty commented on June 23, 2024 1

Getting console logs from iframe error

from console-feed.

Comments (1)

Foscat commented on June 23, 2024 7

I figured it out, I took the Hook out of a use effect and placed it inside the onLoad function of the iframe. Then on my website template I put the code into I wrap the incoming JavaScript in a settimout then execute the code and it works for the runtime logs any user click logs.

webTemplateProp

let template = `<!DOCTYPE html>
		<html lang="en">
		<head>
		  <meta charset="UTF-8">
		  <meta name="viewport" content="width=device-width, initial-scale=1.0">
		  <style>${this.state.cssEditorContent}</style>
		</head>
		<body id="body">
		${this.state.htmlEditorContent}
		</body>
    <script>
    setTimeout(() => {
      ${this.state.jsEditorContent}
    }, 250);
		</script>
		</html>`;

React Code

import React, { Component, createRef } from "react";
import { Hook, Console, Decode } from "console-feed";
import SplitPane from "components/SplitPane/SplitPane";

class Ughh extends Component {
  constructor(props) {
    super(props);
    this.state = {
      logs: [],
      contentRef: createRef(),
    };
  }


  render() {
    return (
      <SplitPane orientation="horizontal">
        <iframe
          id="webPreviewFrame"
          title="Web Preview"
          className="editor_console_panel"
          srcDoc={`${this.props.webTemplate}`}
          referrerPolicy="origin"
          width="100%"
          ref={this.state.contentRef}
          onLoad={() => {
            Hook(this.state.contentRef.current.contentWindow.console, log => {
              this.setState(({ logs }) => ({ logs: [...logs, Decode(log)] }))
            });
          }}
        />
        <div
          style={{ backgroundColor: "#242424", height: "100%", width: "100%" }}
        >
          <Console logs={this.state.logs} variant="dark" />
        </div>
      </SplitPane>
    );
  }
}

export default Ughh;