diff --git a/client/src/observatory/landing.tsx b/client/src/observatory/landing.tsx
index 3cfe56b1639f..4089e213c5d6 100644
--- a/client/src/observatory/landing.tsx
+++ b/client/src/observatory/landing.tsx
@@ -78,7 +78,7 @@ export default function ObservatoryLanding() {
   useEffect(() => {
     if (error && !isMutating) {
       gleanClick(
-        `${OBSERVATORY}: error -> ${ERROR_MAP[error.name] || error.message}`
+        `${OBSERVATORY}: error -> ${ERROR_MAP[error.name] || error.name || error.message}`
       );
     }
   }, [error, isMutating, gleanClick]);
diff --git a/client/src/observatory/utils.tsx b/client/src/observatory/utils.tsx
index f16050375a5c..f05232c7570d 100644
--- a/client/src/observatory/utils.tsx
+++ b/client/src/observatory/utils.tsx
@@ -101,14 +101,23 @@ export function useResult(host?: string) {
 
 export async function handleJsonResponse<T>(res: Response): Promise<T> {
   if (!res.ok && res.status !== 429) {
+    // Example error payload we get from the Observatory API:
+    // {
+    //   "statusCode": 422,
+    //   "error": "invalid-hostname-lookup",
+    //   "message": "unknownhostmcunknownhostface.mozilla.org cannot be resolved"
+    // }
+    // We convey the `message` to the user and use the `error` field for glean telemetry.
     let message = `${res.status}: ${res.statusText}`;
+    let errName = "Error";
     try {
       const data = await res.json();
-      if (data.error) {
-        message = data.message;
-      }
+      errName = data.error || errName;
+      message = data.message || message;
     } finally {
-      throw Error(message);
+      const err = new Error(message);
+      err.name = errName;
+      throw err;
     }
   }
   return await res.json();