DEV Community

Aleix Morgadas
Aleix Morgadas

Posted on

React @loadable/component with Continuous Deployment

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

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

LinkedIn's Solution

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

LinkedIn Error page

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

Applying the Solution

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

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;
Enter fullscreen mode Exit fullscreen mode

And then wrap the <Router>...</Router> with the ErrorBoundary Component like:

function App() {
  return (
    <ErrorBoundary>
      <Router>
        ...
      </Router>
    </ErrorBoundary>
   );
}
Enter fullscreen mode Exit fullscreen mode

Then the example solution looks like:

Solution

Source Code

GitHub

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

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

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.

Latest comments (0)