diff --git a/app/javascript/components/bathroom.jsx b/app/javascript/components/bathroom.jsx
index bf3e4e06e..df6182ed9 100644
--- a/app/javascript/components/bathroom.jsx
+++ b/app/javascript/components/bathroom.jsx
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import { compose } from 'react-recompose';
 import { WhiteSubTitle, WhiteTitleLarge } from '@components/typography';
 import { LoadingMessage, ErrorMessage } from '@messages/default-messages';
+import renderWhileError from '@hocs/render-while-error';
 import renderWhileLoading from '@hocs/render-while-loading';
 import withFragment from './hocs/with-fragment';
 
@@ -20,11 +21,7 @@ const Column = styled.div`
   margin-top: 100px;
 `;
 
-export const Bathroom = ({ error, location }) => {
-  if (error) {
-    return <ErrorMessage />;
-  }
-
+export const Bathroom = ({ location }) => {
   const { bathroomCode } = location;
   if (!bathroomCode) {
     return null;
@@ -41,15 +38,14 @@ Bathroom.propTypes = {
   location: PropTypes.shape({
     bathroomCode: PropTypes.string,
   }),
-  error: PropTypes.bool,
 };
 
 Bathroom.defaultProps = {
   location: {},
-  error: false,
 };
 
 export default compose(
+  renderWhileError(ErrorMessage),
   renderWhileLoading(LoadingMessage),
   withFragment({ location: getBathroomCode }),
 )(Bathroom);
diff --git a/app/javascript/components/date.jsx b/app/javascript/components/date.jsx
index 225ddc69a..2ec14c975 100644
--- a/app/javascript/components/date.jsx
+++ b/app/javascript/components/date.jsx
@@ -6,6 +6,7 @@ import { compose } from 'react-recompose';
 import { dateForTimezone } from '@lib/datetime';
 import { colors, fontSizes, spacing, fonts } from '@lib/theme';
 import { LoadingMessage, ErrorMessage } from '@messages/default-messages';
+import renderWhileError from '@hocs/render-while-error';
 import renderWhileLoading from '@hocs/render-while-loading';
 import withFragment from './hocs/with-fragment';
 
@@ -24,15 +25,12 @@ export const DateText = styled.div`
 
 export class Date extends React.Component {
   static propTypes = {
-    error: PropTypes.bool,
     location: PropTypes.shape({
       timezone: PropTypes.string,
     }).isRequired,
   };
 
-  static defaultProps = {
-    error: false,
-  };
+  static defaultProps = {};
 
   state = { date: null };
 
@@ -66,12 +64,6 @@ export class Date extends React.Component {
   };
 
   render() {
-    const { error } = this.props;
-
-    if (error) {
-      return <ErrorMessage />;
-    }
-
     const { date } = this.state;
     if (!date) {
       return null;
@@ -81,6 +73,7 @@ export class Date extends React.Component {
 }
 
 export default compose(
+  renderWhileError(ErrorMessage),
   renderWhileLoading(LoadingMessage),
   withFragment({ location: getTimeZone }),
 )(Date);
diff --git a/app/javascript/components/time-hero.jsx b/app/javascript/components/time-hero.jsx
index eea81b5ea..1973c6fb4 100644
--- a/app/javascript/components/time-hero.jsx
+++ b/app/javascript/components/time-hero.jsx
@@ -4,6 +4,7 @@ import gql from 'graphql-tag';
 import Time from '@components/time';
 import { compose } from 'react-recompose';
 import { LoadingMessage, ErrorMessage } from '@messages/default-messages';
+import renderWhileError from '@hocs/render-while-error';
 import renderWhileLoading from '@hocs/render-while-loading';
 import withFragment from './hocs/with-fragment';
 
@@ -13,24 +14,18 @@ export const getTimeHero = gql`
   }
 `;
 
-export const TimeHero = ({ error, location }) => {
-  if (error) {
-    return <ErrorMessage />;
-  }
-
+export const TimeHero = ({ location }) => {
   return <Time location={location} />;
 };
 
 TimeHero.propTypes = {
-  error: PropTypes.bool,
   location: PropTypes.shape({}).isRequired,
 };
 
-TimeHero.defaultProps = {
-  error: false,
-};
+TimeHero.defaultProps = {};
 
 export default compose(
+  renderWhileError(ErrorMessage),
   renderWhileLoading(LoadingMessage),
   withFragment({ location: getTimeHero }),
 )(TimeHero);
diff --git a/app/javascript/components/wifi.jsx b/app/javascript/components/wifi.jsx
index 528fcf179..53149895d 100644
--- a/app/javascript/components/wifi.jsx
+++ b/app/javascript/components/wifi.jsx
@@ -8,6 +8,7 @@ import { Row } from '@components/row';
 import { LoadingMessage, ErrorMessage } from '@messages/default-messages';
 import WifiIcon from '@assets/images/icons/icon-wifi.svg';
 import LockIcon from '@assets/images/icons/icon-key.svg';
+import renderWhileError from '@hocs/render-while-error';
 import renderWhileLoading from '@hocs/render-while-loading';
 import withFragment from './hocs/with-fragment';
 
@@ -32,11 +33,7 @@ export const getWifi = gql`
   }
 `;
 
-export const Wifi = ({ error, location }) => {
-  if (error) {
-    return <ErrorMessage />;
-  }
-
+export const Wifi = ({ location }) => {
   const { wifiName, wifiPassword } = location;
   if (!wifiName || !wifiPassword) {
     return null;
@@ -69,14 +66,10 @@ Wifi.propTypes = {
     wifiName: PropTypes.string,
     wifiPassword: PropTypes.string,
   }).isRequired,
-  error: PropTypes.bool,
-};
-
-Wifi.defaultProps = {
-  error: false,
 };
 
 export default compose(
+  renderWhileError(ErrorMessage),
   renderWhileLoading(LoadingMessage),
   withFragment({ location: getWifi }),
 )(Wifi);