Improve error message when uploading a profile photo

[matt-west]

Where

/me

Problem

If an error occurs when upload a profile photo we show a very generic error message.

Solution

Provide a more descriptive error message that helps users to resolve the issue.

[github-actions]

OpenAI suggested the following labels for this issue:

• [Feature Group] User Management: The issue pertains to user experience and management during the avatar upload process.
• [Feature] Authentication: Improving error messages relates to the user login and authentication process, helping users navigate issues more effectively.
• [Feature] Support: This issue highlights the need for better error handling and support for users facing difficulties during avatar uploads.

[draganescu]

@matt-west do you happen to remember how you triggered the error? That would be helpful.

In Calypso's client/state/data-layer/wpcom/gravatar-upload/index.js, we have a function announceFailure as error handler with signature:

announceFailure() → [ withAnalyticsResult, errorNoticeResult ]

which effectively ignores the actual error. It should be that this function receives the error from the fetch call and we could look at it to see if we can customise the message more.

[matt-west]

@draganescu I got this error after trying to update my avatar twice in quick succession. The first time worked okay, but the second attempt failed and I saw this error.

[tyxla]

@draganescu here's an really easy way to reproduce this:

• Go to https://wordpress.com/me?debug
• Type dispatch( { type: 'GRAVATAR_UPLOAD_REQUEST' } ) in your browser console
• See the notice.

A few clarifications:

• ?debug enables access to the global Redux state in the console on staging/production. It is enabled by default on dev envs.
• Dispatching the GRAVATAR_UPLOAD_REQUEST action will defer to the data layer, see here:

wp-calypso/client/state/data-layer/wpcom/gravatar-upload/index.js

Lines 82 to 88 in dabc183

	[ GRAVATAR_UPLOAD_REQUEST ]: [
	dispatchRequest( {
	fetch: uploadGravatar,
	onSuccess: announceSuccess,
	onError: announceFailure,
	} ),
	],

Essentially, it will trigger a request to upload an avatar, but because the request is empty (with no file in the request), it will fail, triggering the announceFailure() handler, which dispatches the error notice.

Let me know if that helps!

[crisbusquets]

@matt-west based on what @tyxla shared above, do you think we should update the copy? From what I understand, the only way for the user to solve this issue is to try again/reload, right?

[matt-west]

@crisbusquets Yeah, if we don’t know why the request failed then there's not much more we can share in the error message. We can close this.