[Avatar] Expose onError hook (#4052)

UNRELEASED.md

@@ -7,6 +7,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 ### Enhancements
 
 - Added `statusAndProgressLabelOverride` prop to `Badge` ([#4028](https://github.com/Shopify/polaris-react/pull/4028))
+- Added an `onError` hook to the `Avatar` component ([#4052](https://github.com/Shopify/polaris-react/pull/4052))
 - Added `zIndexOverride` prop to `Popover` ([#3937](https://github.com/Shopify/polaris-react/pull/3937))
 
 ### Bug fixes

src/components/Avatar/Avatar.tsx

@@ -31,13 +31,16 @@ export interface AvatarProps {
   customer?: boolean;
   /** URL of the avatar image which falls back to initials if the image fails to load */
   source?: string;
+  /** Callback fired when the image fails to load  */
+  onError?(): void;
   /** Accessible label for the avatar image */
   accessibilityLabel?: string;
 }
 
 export function Avatar({
   name,
   source,
+  onError,
   initials,
   customer,
   size = 'medium',
@@ -61,7 +64,10 @@ export function Avatar({
 
   const handleError = useCallback(() => {
     setStatus(Status.Errored);
-  }, []);
+    if (onError) {
+      onError();
+    }
+  }, [onError]);
   const handleLoad = useCallback(() => {
     setStatus(Status.Loaded);
   }, []);

src/components/Avatar/tests/Avatar.test.tsx

@@ -67,6 +67,23 @@ describe('<Avatar />', () => {
     });
   });
 
+  describe('consumer-specified "onError" hook', () => {
+    it('gets invoked in the event of an error', () => {
+      const spy = jest.fn();
+      const avatar = mountWithApp(
+        <Avatar
+          size="large"
+          initials="DL"
+          source="image/path/"
+          onError={spy}
+        />,
+      );
+
+      avatar.find(Image)!.trigger('onError');
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe('on Error with changed props', () => {
     it('re-renders the image if a the source prop is changed after an error', () => {
       const workingSrc = 'image/goodPath/';