How to properly release a new version of app that uses react-universal-component?

I successfully use react-universal-component in production, but I am faced with a problem related to releasing new versions of my app.

My case: I have a released version of application. I open an app in a browser. Then I release a new version of app. After that I trigger loading of some component in opened app (that was opened before new release). And I am getting an error.

Looks like when I open app before release it loads main.SOME_HASH.js, that contains a list of chunks for lazy components. Each of this chunk contains hash in file name.

When I release new version of app, some (or all) hashes in file names of chunks can be changed. But because I opened app before release, main.SOME_HASH.js contains an old list of chunks. So when I trigger loading of component in my app, react-universal-component tries to load chunks for old version. And this chunk doesn’t exist on server side any more (in docker image in my case).

As a solution, I see an ability to distinguish network error and 404 from server. In this case I can show error page to user if there is a network error, but if server returns 404 code while downloading chunk for lazy component I can trigger window.location.reload(), that will cause downloading new version of app (downloading new version of main.SOME_NEW_HASH.js that contains a new list of chunks).

So, I suggest to add response info (at least response code) to error that react-universal-component passes to ErrorComponent.

I am not 100% sure that this is right solution. Maybe anyone can suggest another option.

[ScriptedAlchemy]

Production shouldn’t have a build but just start from static files.

[braska]

I would like to avoid storing old chunks (storage is another one infrastructure element that can increase cost and requires maintenance). Best case scenario for me: reload page if it tries to download chunk that was presented in old docker container/image, but in current (new) running container not presented.

My question: how can I detect there 404 error returned for server for old chunk?

This is simplified version of my current implementation:

const ErrorLoadingPage = ({ error }) => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (error && error.request) {
      window.location.reload();
    } else {
      setLoading(false);
    }
  });

  if (loading) {
    return <LoadingPage />;
  }

  return (
    <StyledMainTemplate>
      <Helmet>
        <title>Error while loading</title>
      </Helmet>
      <Wrapper>
        <p>Error occurred</p>
        <Button
          primary
          onClick={() => {
            window.location.reload(true);
          }}
        >
          Retry
        </Button>
      </Wrapper>
    </StyledMainTemplate>
  );
};

But the problem of this implementation that page will be reloaded even if there is no internet connection. User will see default browser page like this:

But I want to show ErrorLoadingPage if user lost internet connection and reload page only if 404 was returned from server.

It would be great if I have ability to replace if (error && error.request) { ... } statement with if (error && error.response && error.response.code === 404) { ... }.