Added error message component. Update fetch hook.

components/metrics/MetricsBar.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import Loading from 'components/common/Loading';
+import ErrorMessage from 'components/common/ErrorMessage';
 import useFetch from 'hooks/useFetch';
 import useDateRange from 'hooks/useDateRange';
 import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
@@ -17,7 +18,7 @@ export default function MetricsBar({ websiteId, token, className }) {
     query: { url },
   } = usePageQuery();
 
-  const { data } = useFetch(
+  const { data, error, loading } = useFetch(
     `/api/website/${websiteId}/metrics`,
     {
       start_at: +startDate,
@@ -40,9 +41,9 @@ export default function MetricsBar({ websiteId, token, className }) {
 
   return (
     <div className={classNames(styles.bar, className)} onClick={handleSetFormat}>
-      {!data ? (
-        <Loading />
-      ) : (
+      {!data && loading && <Loading />}
+      {error && <ErrorMessage />}
+      {data && !error && (
         <>
           <MetricCard
             label={<FormattedMessage id="metrics.views" defaultMessage="Views" />}