[Avatar] Expose onError hook

[whizkydee]

WHY are these changes introduced?

Due to surface area constraints, in our app, we use custom a user menu — the activator is a standalone avatar within a button which toggles a Popover. The popover includes an avatar and the full name of the user in question, as opposed to displaying the full name alongside the avatar directly on the top bar.

For Identity users that haven't uploaded an avatar, we attempt to grab an image from gravatar based on their uuid which eventually resolves to their email — that request can either return the image or 404 if the account doesn't exist.

The problem with that is each time the user menu activator is clicked, the popover is re-rendered which results in extraneous requests to the same url that previously failed in an attempt to retrieve the gravatar.

WHAT is this pull request doing?

This adds an onError hook to the Avatar component, which provides consumers with an avenue to make decisions when the HTTP request for an avatar fails. In our case, we'll simply prevent subsequent requests to the same url.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page, Avatar} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <Avatar source="invalidUrl" onError={() => console.log('bummer')} />
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[github-actions]

🟡 This pull request modifies 3 files and might impact 12 other files. This is an average splash zone for a change, remember to tophat areas that could be affected.

Details:

All files potentially affected (total: 12)

• /src/components/AccountConnection/AccountConnection.tsx
• /src/components/OptionList/OptionList.tsx
• /src/components/Autocomplete/components/ComboBox/ComboBox.tsx
• /src/components/Autocomplete/Autocomplete.tsx
• /src/components/OptionList/components/Option/Option.tsx
• /src/components/Page/components/Header/components/Title/Title.tsx
• /src/components/Page/components/Header/Header.tsx
• /src/components/Page/Page.tsx
• /src/components/ResourceItem/ResourceItem.tsx
• /src/components/ResourceList/ResourceList.tsx
• /src/components/TopBar/components/UserMenu/UserMenu.tsx
• /src/components/TopBar/TopBar.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🧩 src/components/Avatar/Avatar.tsx (total: 12)

Files potentially affected (total: 12)

• /src/components/AccountConnection/AccountConnection.tsx
• /src/components/OptionList/OptionList.tsx
• /src/components/Autocomplete/components/ComboBox/ComboBox.tsx
• /src/components/Autocomplete/Autocomplete.tsx
• /src/components/OptionList/components/Option/Option.tsx
• /src/components/Page/components/Header/components/Title/Title.tsx
• /src/components/Page/components/Header/Header.tsx
• /src/components/Page/Page.tsx
• /src/components/ResourceItem/ResourceItem.tsx
• /src/components/ResourceList/ResourceList.tsx
• /src/components/TopBar/components/UserMenu/UserMenu.tsx
• /src/components/TopBar/TopBar.tsx

🧩 src/components/Avatar/tests/Avatar.test.tsx (total: 0)

Files potentially affected (total: 0)

[alex-page]

@whizkydee I am wondering if the error could be handled in your app before using the component? It feels like the wrong level of abstraction. Interested to know what blockers exist there?

[whizkydee]

@alex-page The problem is we have know way of knowing that the image errored, so we can't handle it. This hook is meant to inform us.

[alex-page]

Happy to ship this, but I still think this check should happen before rendering the Avatar component.

[kyledurand]

I think this makes sense to add but also agree with Alex that the best UX would be to determine if the image request 404'd before trying to render the Avatar.

Sounds like your situation is a bit different with the re-rendering on click though so I think if this works for your use case then 🚢