React @loadable/component with Continuous Deployment
Tags: react, cicd
Published: 2021-01-31 21:27:16

When you combine @loadable/component React Library with a Continuous Delivery/Deployment pipeline, you end up with a broken website when a user is navigating meanwhile a deployment is ongoing. And that's not good.

Here an example ⤵

![Error Example](https://dev-to-uploads.s3.amazonaws.com/i/llkg6kdfs4k7f1v7wufs.png)

You see that, meanwhile navigating, the browser aims to fetch a static file that is no longer available since it has been replaced with the new version.

It causes user frustration since the website no longer works plus it doesn't tell you what to do.

![noooo](https://media.giphy.com/media/d10dMmzqCYqQ0/giphy.gif)

## LinkedIn's Solution

I'm sure that if you used LinkedIn lately, you have seen the next screen.

![LinkedIn Error page](https://dev-to-uploads.s3.amazonaws.com/i/qatva6hqzahxtvbo8nxg.png)

And that's the solution I applied for the same problem.

## Applying the Solution

Just create a [`ErrorBoundary`][eb] Component that handles the inner component errors and ask the user for a Refresh.

```jsx
import React from 'react';

class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        error: null,
        errorInfo: null,
      };
    }
  
    componentDidCatch(error, errorInfo) {
      this.setState({
        error,
        errorInfo,
      })
      // You can also log error messages to an error reporting service here
    }
  
    render() {
      if (this.state.errorInfo) {
        // Error path
        return (
          <div className="error-boundary">
            <h2>Something went wrong 😖</h2>
            <button onClick={() => window.location.reload()}>Reload Application</button>
          </div>
        );
      }
      // Normally, just render children
      return this.props.children;
    }
  }
  
  export default ErrorBoundary;
```

And then wrap the [`<Router>...</Router>`][app] with the `ErrorBoundary` Component like:

```jsx
function App() {
  return (
    <ErrorBoundary>
      <Router>
        ...
      </Router>
    </ErrorBoundary>
   );
}
```

Then the example solution looks like:

![Solution](https://dev-to-uploads.s3.amazonaws.com/i/am3pmq9epldd2osi1q59.png)

## Source Code

[![GitHub](https://dev-to-uploads.s3.amazonaws.com/i/nlenv8rx5x3wa13pj5al.gif)](https://github.com/aleixmorgadas/react-loadable-component-with-continuous-deployment)

Source Code at https://github.com/aleixmorgadas/react-loadable-component-with-continuous-deployment

 ⚡️ Feedback welcomed `!(•̀ᴗ•́)و ̑̑` ⚡️

<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">Creative Commons Attribution-NonCommercial 4.0 International License</a>.

[eb]: https://github.com/aleixmorgadas/react-loadable-component-with-continuous-deployment/blob/main/src/ErrorBoundary.jsx
[app]: https://github.com/aleixmorgadas/react-loadable-component-with-continuous-deployment/blob/main/src/App.js