Error handling approach

[michaelschwinges]

Hi, I have a general question about handling errors with reactFire, arising from inexperience I think.

For example, it is possible in my application for an image to not exist at all:

export default function ReadingPhoto(props) {
    const storage = useStorage();
    const thumbnailPath = `c/${props.clientid}/u/${props.userid}/thumb_${props.photoid}`;
    const { status: thumbnailStatus, data: thumbnailURL } = useStorageDownloadURL(ref(storage, thumbnailPath));

    if (thumbnailStatus === 'loading') {
        return <span>loading...</span>;
    } 

    return (
        <img src={thumbnailURL} alt="Main" />
    )
}

If the image doesn't exist at the path in storage, then React crashes with a long stack trace along the lines of: "Unhandled Rejection (FirebaseError): Firebase Storage: Object does not exist". What is strange to me is that checking the status flag doesn't work, I still get the error.

I don't see error handling examples in the documentation and samples for things like documents that don't exist in Firestore or files that don't exist in Storage; any checks or validation I add run into issues of calling hooks conditionally etc.. Could someone guide me towards examples of what I should be doing generally in React with hooks and functions and with ReactFire specifically?

[jhuleatt]

Hi @michaelschwinges, wrapping your component in an error boundary is probably the way to go here if it is erroring out in a way that prevents you from checking the status flag.

I've been meaning to add some more tests and docs to make sure ReactFire's error handling is behaving the way we want it to. Let's use #470 to track that work.

[michaelschwinges]

Hi @jhuleatt Thank you for your quick reply! I did try wrapping the ReadingPhoto component in an error boundary as follows, however the unhandled promise exception and stack trace was still thrown, leading me to think I don't understand something sufficiently.

{ userinfoData.clientid !== undefined && reading.useruid !== undefined && reading.photomain !== undefined &&
<ErrorBoundary>                           
    <ReadingPhoto clientid={userinfoData.clientid} userid={reading.useruid} photoid={reading.photomain} />
</ErrorBoundary>
}

I was nervous to open an issue and allege that the image not found error should have manifested itself through the status variable because I think I might not yet understand how errors are supposed to be handled... still think I'm missing something :-)