Reactfire error handling on useFirestoreDocData when document does not exists

Question

I'm using reactfire with functional components as such:

export const SafeFileView = (props) => {
const db = useFirestore();
const fileRef = doc(db, 'content/' + props.sources.fileId);
const { status, data: currentFile } = useFirestoreDocData(fileRef);
if (status === 'loading') {
    return (<div>
        loading file
    </div>)
}
return ( 
    <div>Working!</div>
)
}

The following code will throw a FirebaseError: Missing or insufficient permissions. error if I provide the wrong ID

-> What is the correct way of handling this error? I've tried wrapping my component in a <ErrorBoundary> component but this won't catch async errors.

I would like to show a different template to the user if the requested document does not exist or if there is an error retrieving the doc

Thanks!

Answer 1

useFireStoreDocData hook does not return a promise, so you cannot use await or try...catch directly on it. Instead, it provides the status, data, and error properties in the return object. So, the way you are destructuring the status and data properties, you can also add error property which will include any error that may occur in the underlying observable. Also, the status property is an enum which can have "loading", "error" or "success" value. so you can check value of status to see if an error occured. For example,

export const SafeFileView = (props) => {
const db = useFirestore();
const fileRef = doc(db, 'content/' + props.sources.fileId);
const { status, data: currentFile, error } = useFirestoreDocData(fileRef);
if (status === 'loading') {
    return (<div>
        loading file
    </div>)
}
if (status === 'error' || error) {
    // Handle the error state, e.g., document not found or insufficient 
   //permissions
    return (
      <div>
        //render whatever you need to here
      </div>
    );
  }
return ( 
    <div>Working!</div>
)
}