title: General 400/500 error handling in reactjs
body: <p>I have been building a react website and may need support in creating error pages 404, 500 but I am unsure how to get this working - as I have many api services/actions - how would the errorhandler be invoked if an error occurs in any or all services?</p>
  <p>I've seen this link on handling granular error pages - <a href="https://code-maze.com/react-net-core-error-handling/" rel="nofollow noreferrer">https://code-maze.com/react-net-core-error-handling/</a></p>
  <p>The error page I have in place is just a 404 if the routes fail to work with other pages - so its a the bottom of the routes.</p>
  <p>so I've made the two pages</p>
  <pre><code>import NotFound from './components/ErrorPages/NotFound/NotFound';
  import InternalServer from './components/ErrorPages/InternalServer/InternalServer';
  </code></pre>
  <p>at the bottom of the route</p>
  <pre><code>        &lt;Route exact path=&quot;/&quot; render={() =&gt; (&lt;Home/&gt;)} /&gt;
          
          &lt;Route path=&quot;/500&quot; component={InternalServer} /&gt;
          &lt;Route path=&quot;*&quot; component={NotFound} /&gt;
        &lt;/Switch&gt;
  </code></pre>
  <p>//actions</p>
  <pre><code>export const HTTP_404_ERROR = 'HTTP_404_ERROR';
  export const HTTP_500_ERROR = 'HTTP_500_ERROR';
  export const HTTP_OTHER_ERROR = 'HTTP_OTHER_ERROR';
  
  
  const execute404Handler = (props) =&gt; {
      return {
          type: HTTP_404_ERROR,
          props: props
      }
  }
  const execute500Handler = (props) =&gt; {
      return {
          type: HTTP_500_ERROR,
          props: props
      }
  }
  const executeOtherErrorHandler = (error) =&gt; {
      return {
          type: HTTP_OTHER_ERROR,
          error: error
      }
  }
  export const handleHTTPError = (error, props) =&gt; {
      if (error.response.status === 404) {
          return execute404Handler(props);
      }
      else if (error.response.status === 500) {
          return execute500Handler(props);
      }
      else {
          return executeOtherErrorHandler(error);
      }
  }
  </code></pre>
  <p>//reducer</p>
  <pre><code>import { HTTP_404_ERROR, HTTP_500_ERROR, HTTP_OTHER_ERROR } from '../actions/errorHandlerActions';
  
  const initialState = {
      data: &quot;&quot;,
      showErrorModal: false,
      errorMessage: &quot;&quot;
  }
  const execute404 = (state, action) =&gt; {
      action.props.history.push('/404');
      return { ...state, isError: true };
  }
  const execute500 = (state, action) =&gt; {
      action.props.history.push('/500');
      return { ...state, isError: true };
  }
  const executeOtherError = (state, action) =&gt; {
      return {
          ...state,
          showErrorModal: true,
          errorMessage: action.error.response.data
      };
  }
  
  export function errorHandlerReducer (state = initialState, {type, payload} = {}) {
    switch (type) {
      case HTTP_404_ERROR:
          return execute404(state, payload);
      case HTTP_500_ERROR:
          return execute500(state, payload);
      case HTTP_OTHER_ERROR:
          return executeOtherError(state, payload);      
      default:
        return {...state} 
    }
  }
  </code></pre>
  <hr />