DEV Community: fbcyborg

Different files produced in React build folder depending on machine

fbcyborg — Tue, 19 Sep 2023 10:06:19 +0000

Hello Everyone,

I have a React project on a private Git Repository.
If I clone the source code on my laptop and run npm run build I get a list of file like the example below:

  345.32 KB  build\static\js\vendor.js
  95.31 KB   build\static\js\services-test.js
  93.54 KB   build\static\js\cross.js
  24.11 KB   build\static\js\main.js
  23.96 KB   build\static\css\styles.css
  22.03 KB   build\static\js\a.js
  7.27 KB    build\static\js\b.js
  7.12 KB    build\static\js\c.js
  7.1 KB     build\static\js\d.js
  893 B      build\static\js\manifest.js

If I try to build the same exact code in another machine (it's a docker machine in this case) I get one more file (services-react.js):

  345.32 KB  build\static\js\vendor.js
  95.31 KB   build\static\js\services-test.js
  93.54 KB   build\static\js\cross.js
  24.11 KB   build\static\js\main.js
  23.96 KB   build\static\css\styles.css
  13.97 KB   build/static/js/services-react.js
  22.03 KB   build\static\js\a.js
  7.27 KB    build\static\js\b.js
  7.12 KB    build\static\js\c.js
  7.1 KB     build\static\js\d.js
  893 B      build\static\js\manifest.js

I know webpack do part of the job but I don't understand why this may happen.

I checked the node and npm version on both machines and they are the same. The only difference is the Operating System (Windows 10 in the first case).

Any idea on how to find why this is happening?

EDIT: as far as I can see, if i do the build on linux, the services-react.js file is generated. If I build on Windows, it isn't.

Detecting ERR_CONNECTION_TIMED_OUT on IFrame load in React

fbcyborg — Thu, 31 Aug 2023 14:54:03 +0000

Hello,

I started working on a React Component which contains an Iframe that should load and contain a web page.
Sometimes the web page is unreachable and I get the following error within the browser console:
ERR_CONNECTION_TIMED_OUT

I tried many solutions in React but unable to intercept such timeout error.

Here's what I have tried to do:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

export const ComponentFrame = (props) => {
  const [status, setStatus] = useState(null);

  const CHECK_INTERVAL = 1000;

  useEffect(() => {
    const iframe = document.getElementById('player');
    if(!iframe) {
      console.log('useEffect >> inside useEffect(): !iframe', 'DEBUG');
    }

    const startPolling = () => {
      console.log('startPolling >>', 'DEBUG');
      if (iframe.querySelector(`iframe[src="${props.iframeSrc}"`)) {
        console.log('startPolling >> iframe is ready', 'DEBUG');
        return;
      } else {
        console.log('startPolling >> iframe is not yet loaded!', 'DEBUG');
      }
      setTimeout(startPolling, CHECK_INTERVAL);
    };

    const handleIframeLoad = () => {
      try {
        startPolling();
      } catch (error) {
        console.log('handleIframeLoad >> ' + error, 'ERROR');
      }
    };

    const handleIframeError = (event) => {
      const errorMessage = event.message || 'Unknown error';
      console.log('handleIframeError >> errorMessage: ', errorMessage, 'ERROR');
      if (errorMessage.includes('ERR_CONNECTION_TIMED_OUT')) {
        console.log('handleIframeError >> Connection timed out in iframe:', errorMessage, 'ERROR');
      }
    };

    try {
      iframe.addEventListener('load', handleIframeLoad);
    } catch (error) {
      console.log('addEventListener >> ' + error, 'ERROR');
    }

    return () => {
      iframe.removeEventListener('load', handleIframeLoad);
      iframe.contentWindow.removeEventListener('error', handleIframeError);
    };
  }, []);

  return (
    <div className="external-content-wrapper">
      <iframe
        frameborder="0"
        sandbox="allow-scripts allow-same-origin allow-forms"
        id="player"
        src={props.iframeSrc}
        allowFullScreen={1}
        title="Remote page"
        width="100%"
        height="100%"
        onLoad={this.handleIframeLoad.bind(this)}
        onError={this.handleIframeError.bind(this)}
      />
    </div>
  );
};

Basically I would like to perform a new iframe content reload when ERR_CONNECTION_TIMED_OUT occurs.

Could you please help?

Retry loading an iframe until reachable in React

fbcyborg — Tue, 25 Jul 2023 07:13:44 +0000

Hello everyone,

I am trying to implement an Iframe custom component which is loading a web page inside. Sometimes, the web page is not available and I want to implement a retry mechanism which continues until the page is available.

Here's the small piece of code I Implemented so far, without success.

App.js

import "./App.css";
import { CustomIFrame } from "./components/CustomIFrame.js";

function App() {
  return <CustomIFrame url="http://localhost/" />;
}

export default App;

CustomIFrame.js

import React, { useRef, useState } from "react";

export const CustomIFrame = (props) => {
  const [isMounted, setIsMounted] = useState(false);
  const [iframeRef, setIframeRef] = useState();

  const handleIframeLoad = () => {
    console.log(iframeRef);
    // const anchors = iframeRef.contentWindow?.document.body.getElementsByTagName("a");
    // if(iframeRef.querySelector("...")){
      //     console.log('iFrame Loaded!');
      setIsMounted(true);
      // }
      // setTimeout(handleIframeLoad, 1000);
      console.log("iframe loaded!");
  };

//   console.log(iframeRef.current.children[0]);

  return (
    <div>
      <iframe
        title="my iframe"
        height="800"
        width="600"
        src={props.url}
        ref={setIframeRef}
        onLoad={handleIframeLoad}
      />
      {isMounted ? <div>The iframe content is mounted.</div> : ""}
    </div>
  );
};

Of course there is no retry mechanism yet in this code since I am not sure where to implement it. I was trying to add some retry logic inside the handleIframeLoad() where I would like to check if one of the component inside the iframe is rendered or not, and in case of failure, do a retry.

Could you please give some advice?