How to fix error when importing a profile picture from a server, but to the photo does not always come through?

Viewed 41

I am trying to import a profile pic to my app, and it is a real hit or a miss as to whether or not it renders. My console log's that the photo is getting sent but it won't always show up. When it doesn't show, I get hit with this error:

TypeError: undefined is not an object (evaluating 'response.photo_data.raw_data')]

Where: 'response.photo_data.raw_data' is server the function that carries the image data.

Below is the code I use to import the photo, as well as the information associated with the profile (which also comes from the server.) Any suggestions are helpful. I am running in Expo Managed Workflow.

Function that pulls data from server to the app

useEffect(() =>{
           const displayPhoto = async () => {
                let response = await
                        client_instance.download_profile_photo()
            getImageData(response.photo_data.raw_data)
        }

displayPhoto()

}

How photo is displayed in the app:

<View>                              
    {imageData && <Avatar.Image source={{uri:`data:image/jpg;base64,${imageData}`}}/>}
</View>
1 Answers

If photo_data is not an attribute of the response object, it will be undefined when you try to access it, so looking for the raw_data attribute on undefined will lead to this error. If raw_data is not an attribute of the photo_data object it will also be undefined when you access it. So you need to look at the responses you are getting from the server to see why sometimes the server responds with the expected attributes and sometimes without.

In short, rather than being an issue with client code, it appears to be an issue with the response from the service you are calling. So use a debugging tool that can view the raw service response. Perhaps the service times out on some pictures that are too large?

Related