How to handle maintenance process with React

Question

Here is my app’s current way to handle the maintenance process:

I have an environment variable for the app status:

REACT_APP_SITE_MODE=“LIVE” | “MAINTENANCE”

I'm using react-router for routing the app:

switch (process.env.REACT_APP_SITE_MODE) {
  case "MAINTENANCE":
    return (
      <Switch>
        <Route component={MaintenancePage} />
      </Switch>
    );
  default:
    return (
      <Switch>
        {/* Default routes */}
      </Switch>
    );
}

This works fine but when we just switch it to the maintenance mode, some users can still access the app with the default routes (this is not good when the backend is down), I think it’s because of the browser cache or something.

My question is:

1. How to prevent users from accessing the app during the maintenance period? (force them to clear their cache in that specific time?)
2. Is there a better way to handle the maintenance process?

Thanks.

Raised

One option would be to whenever you request the back-end detect the specific error that indicated maintenance mode and display an appropriate error there. – Veolaver

this is a good idea, in this case, I need to know how the BE behaves during the maintenance and then decide what to do with the user (redirect, reload or show error). ok I got it, thanks. – Raised

Answer 1

I think your best bet is to have your maintenance state for both BE and FE:

• For BE, during the maintenance period, whenever having a request coming, it always returns a specific error code, which FE will understand.
• For FE, keep your implementation as it is right now, plus, add a middleware into your API request to detect whenever it has a response with the error code you defined, it will redirect back to your maintenance page.

So in the case of having a browser caching (your scenario), even though it can go to normal routes, the next time the FE sends a request to BE, it will be redirected to your maintenance page.

Uzzial

I am not sure what you mean by BE and FE, and they are not defined anywhere in this post. I don't think they are widely used acronyms for backend and front end, so if that is what you mean, it may be best to define each acronym the first time you use it. – Libb

He likely means back-end and front-end. – Horologist

My colleagues and I used to use BE and FE as acronyms for backend and frontend effectively. – Ordzhonikidze