fix(web): fall back when pull request avatars fail

apps/web/src/components/pullRequest/pullRequestPresentation.test.tsx

@@ -0,0 +1,28 @@
+import { act } from "react";
+import { create, type ReactTestRenderer } from "react-test-renderer";
+import { afterEach, expect, it, vi } from "vite-plus/test";
+
+import { PullRequestActorAvatar } from "./pullRequestPresentation";
+
+let renderer: ReactTestRenderer | undefined;
+
+afterEach(async () => {
+  await act(async () => renderer?.unmount());
+  vi.unstubAllGlobals();
+});
+
+it("falls back to the actor initial when a remote avatar fails", async () => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  await act(async () => {
+    renderer = create(
+      <PullRequestActorAvatar
+        actor={{ login: "octocat", name: null, avatarUrl: "https://ghe.example/octocat.png" }}
+      />,
+    );
+  });
+
+  await act(async () => renderer!.root.findByType("img").props.onError());
+
+  expect(renderer!.root.findAllByType("img")).toHaveLength(0);
+  expect(renderer!.root.findByType("span").children).toEqual(["O"]);
+});

apps/web/src/components/pullRequest/pullRequestPresentation.tsx

@@ -19,7 +19,7 @@ import {
   TriangleAlertIcon,
   UserCheckIcon,
 } from "lucide-react";
-import { Children, isValidElement, type ReactNode } from "react";
+import { Children, isValidElement, type ReactNode, useState } from "react";
 
 import { cn } from "~/lib/utils";
 
@@ -346,8 +346,9 @@ export function PullRequestActorAvatar({
 }) {
   const login = actor?.login ?? "ghost";
   const avatarUrl = actor?.avatarUrl ?? null;
-  return avatarUrl === null ? (
-    // Not every host reports an avatar, so the initial stands in where none arrives.
+  const [failedAvatarUrl, setFailedAvatarUrl] = useState<string | null>(null);
+  return avatarUrl === null || failedAvatarUrl === avatarUrl ? (
+    // Not every host reports an avatar, and a private host may refuse the browser's request.
     <span
       aria-hidden
       className={cn(
@@ -364,6 +365,7 @@ export function PullRequestActorAvatar({
       src={avatarUrl}
       loading="lazy"
       className={cn("size-4 shrink-0 rounded-full bg-muted object-cover", className)}
+      onError={() => setFailedAvatarUrl(avatarUrl)}
     />
   );
 }