Add fallback logic when gravatar fails (#10533)

frontend/pages/LoginPage/LoginPage.tsx

@@ -95,6 +95,21 @@ const LoginPage = ({ router, location }: ILoginPageProps) => {
     return false;
   };
 
+  const testGravatarAvailability = async () => {
+    try {
+      const response = await fetch("https://gravatar.com/avatar");
+      if (response.ok) {
+        localStorage.setItem("gravatar_available", "true");
+      } else {
+        localStorage.setItem("gravatar_available", "false");
+      }
+    } catch (error) {
+      localStorage.setItem("gravatar_available", "false");
+    }
+  };
+
+  testGravatarAvailability();
+
   const onSubmit = async (formData: ILoginData) => {
     const { DASHBOARD, RESET_PASSWORD } = paths;
 

frontend/utilities/constants.ts

@@ -16,6 +16,12 @@ export const DEFAULT_GRAVATAR_LINK =
 export const DEFAULT_GRAVATAR_LINK_DARK =
   "https://fleetdm.com/images/permanent/icon-avatar-default-dark-24x24%402x.png";
 
+export const DEFAULT_GRAVATAR_LINK_FALLBACK =
+  "/assets/images/icon-avatar-default-transparent-64x64%402x.png";
+
+export const DEFAULT_GRAVATAR_LINK_DARK_FALLBACK =
+  "/assets/images/icon-avatar-default-dark-24x24%402x.png";
+
 export const FREQUENCY_DROPDOWN_OPTIONS = [
   { value: 900, label: "Every 15 minutes" },
   { value: 3600, label: "Every hour" },

frontend/utilities/helpers.ts

@@ -40,7 +40,9 @@ import sortUtils from "utilities/sort";
 import {
   DEFAULT_EMPTY_CELL_VALUE,
   DEFAULT_GRAVATAR_LINK,
+  DEFAULT_GRAVATAR_LINK_FALLBACK,
   DEFAULT_GRAVATAR_LINK_DARK,
+  DEFAULT_GRAVATAR_LINK_DARK_FALLBACK,
   PLATFORM_LABEL_DISPLAY_TYPES,
 } from "utilities/constants";
 import { IScheduledQueryStats } from "interfaces/scheduled_query_stats";
@@ -50,14 +52,26 @@ const ADMIN_ATTRS = ["email", "name", "password", "password_confirmation"];
 
 export const addGravatarUrlToResource = (resource: any): any => {
   const { email } = resource;
+  const gravatarAvailable =
+    localStorage.getItem("gravatar_available") === "true";
 
   const emailHash = md5(email.toLowerCase());
-  const gravatar_url = `https://www.gravatar.com/avatar/${emailHash}?d=${encodeURIComponent(
-    DEFAULT_GRAVATAR_LINK
-  )}&size=200`;
-  const gravatar_url_dark = `https://www.gravatar.com/avatar/${emailHash}?d=${encodeURIComponent(
-    DEFAULT_GRAVATAR_LINK_DARK
-  )}&size=200`;
+
+  let gravatar_url;
+  let gravatar_url_dark;
+
+  if (gravatarAvailable) {
+    gravatar_url = `https://www.gravatar.com/avatar/${emailHash}?d=${encodeURIComponent(
+      DEFAULT_GRAVATAR_LINK
+    )}&size=200`;
+    gravatar_url_dark = `https://www.gravatar.com/avatar/${emailHash}?d=${encodeURIComponent(
+      DEFAULT_GRAVATAR_LINK_DARK
+    )}&size=200`;
+  } else {
+    gravatar_url = DEFAULT_GRAVATAR_LINK_FALLBACK;
+    gravatar_url_dark = DEFAULT_GRAVATAR_LINK_DARK_FALLBACK;
+  }
+
   return {
     ...resource,
     gravatar_url,