import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import DocumentDetails from './DocumentDetails';
import { Container } from 'react-bootstrap';

export default () => {

    const { id } = useParams();
    const [document, setDocument] = useState(null);
    const [error, setError] = useState(null);

    useEffect (() => {
        getDocument(id)
            .then(setDocument)
            .catch(setError);
    }, [id]);

    return (document && document.resource)
        ? renderDocument(document)
        : error
            ? renderError(error)
            : null;
};


const renderDocument = (document: any) => <DocumentDetails document={ document } />;


const renderError = (error: any) => <Container fluid>Error: { error.error }</Container>;


const getDocument = async (id: string) => {

    const response = await fetch(`/documents/${id}`);
    if (response.ok) return await response.json();
    else throw(await response.json());
};

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import DocumentDetails from './DocumentDetails';

export default () => {

    const { id } = useParams();
    const [document, setDocument] = useState(null);

    useEffect (() => {
        getDocument(id).then(setDocument);
    }, [id]);

    return (document && document.resource)
        ? renderDocument(document)
        : renderError();
};


const renderDocument = (document: any) => <DocumentDetails document={ document } />;


const renderError = () => <div>Error: No matching document found.</div>;


const getDocument = async (id: string) => {

    const response = await fetch(`/documents/${id}`);
    return await response.json();
};

--- 
+++ 
@@ -1,30 +1,37 @@
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import DocumentDetails from './DocumentDetails';
+import { Container } from 'react-bootstrap';
 
 export default () => {
 
     const { id } = useParams();
     const [document, setDocument] = useState(null);
+    const [error, setError] = useState(null);
 
     useEffect (() => {
-        getDocument(id).then(setDocument);
+        getDocument(id)
+            .then(setDocument)
+            .catch(setError);
     }, [id]);
 
     return (document && document.resource)
         ? renderDocument(document)
-        : renderError();
+        : error
+            ? renderError(error)
+            : null;
 };
 
 
 const renderDocument = (document: any) => <DocumentDetails document={ document } />;
 
 
-const renderError = () => <div>Error: No matching document found.</div>;
+const renderError = (error: any) => <Container fluid>Error: { error.error }</Container>;
 
 
 const getDocument = async (id: string) => {
 
     const response = await fetch(`/documents/${id}`);
-    return await response.json();
+    if (response.ok) return await response.json();
+    else throw(await response.json());
 };
Handle errors in document component
