Retry requests after 30s

Sometimes we get network errors, and those should be retried after 30s if they
are get requests. For the ink clustering we lower that to 3s to speed things up.

app/javascript/src/admin/micro-clusters/macroClusters.js

@@ -68,7 +68,8 @@ export const updateMacroCluster = (id, dispatch) => {
 
 const loadMacroClusterPage = async (page) => {
   const response = await getRequest(
-    `/admins/macro_clusters.json?per_page=25&page=${page}`
+    `/admins/macro_clusters.json?per_page=25&page=${page}`,
+    3 // timeout after 3s
   );
   return await response.json();
 };

app/javascript/src/fetch.js

@@ -1,39 +1,46 @@
 import "whatwg-fetch";
 
-export function deleteRequest(path) {
-  return request(path, "DELETE");
+export function deleteRequest(path, timeout = 30) {
+  return request(path, "DELETE", undefined, timeout);
 }
 
-export function getRequest(path) {
-  return request(path, "GET");
+export function getRequest(path, timeout = 30) {
+  return request(path, "GET", undefined, timeout);
 }
 
-export function postRequest(path, body) {
-  return request(path, "POST", body);
+export function postRequest(path, body, timeout = 30) {
+  return request(path, "POST", body, timeout);
 }
 
-export function putRequest(path, body) {
-  return request(path, "PUT", body);
+export function putRequest(path, body, timeout = 30) {
+  return request(path, "PUT", body, timeout);
 }
 
-function request(path, method, body) {
-  return req(path, method, body);
+function request(path, method, body, timeout) {
+  return req(path, method, body, timeout);
 }
 
-async function req(path, method, body, retries = 3) {
-  const response = await fetch(path, {
-    credentials: "same-origin",
-    method: method,
-    body: JSON.stringify(body),
-    headers: {
-      Accept: "application/vnd.api+json",
-      "Content-Type": "application/vnd.api+json",
-      "X-CSRF-Token": csrfToken()
-    }
-  });
-  if (method === "GET" && response.status >= 500 && retries > 0) {
+async function req(path, method, body, timeout, retries = 3) {
+  let response;
+  try {
+    response = await fetch(path, {
+      credentials: "same-origin",
+      method: method,
+      body: JSON.stringify(body),
+      headers: {
+        Accept: "application/vnd.api+json",
+        "Content-Type": "application/vnd.api+json",
+        "X-CSRF-Token": csrfToken()
+      },
+      signal: AbortSignal.timeout(timeout * 1000)
+    });
+  } catch (e) {
+    console.error("Failed to fetch", e);
+  }
+  const failure = !response || response.status >= 500;
+  if (method === "GET" && failure && retries > 0) {
     console.log("Retrying", path, method, body, retries);
-    return req(path, method, body, retries - 1);
+    return req(path, method, body, timeout, retries - 1);
   } else {
     return response;
   }