Improved network debugging

app/utils/ApiClient.ts

@@ -9,6 +9,7 @@ import Logger from "./Logger";
 import download from "./download";
 import {
   AuthorizationError,
+  BadGatewayError,
   BadRequestError,
   NetworkError,
   NotFoundError,
@@ -101,6 +102,7 @@ class ApiClient {
     }
 
     let response;
+    const timeStart = window.performance.now();
 
     try {
       response = await fetchWithRetry(urlToFetch, {
@@ -127,6 +129,7 @@ class ApiClient {
       }
     }
 
+    const timeEnd = window.performance.now();
     const success = response.status >= 200 && response.status < 300;
 
     if (options.download && success) {
@@ -196,6 +199,12 @@ class ApiClient {
       );
     }
 
+    if (response.status === 502) {
+      throw new BadGatewayError(
+        `Request to ${urlToFetch} failed in ${timeEnd - timeStart}ms.`
+      );
+    }
+
     const err = new RequestError(`Error ${response.status}`);
     Logger.error("Request failed", err, {
       ...error,

app/utils/errors.ts

@@ -12,6 +12,8 @@ export class OfflineError extends ExtendableError {}
 
 export class ServiceUnavailableError extends ExtendableError {}
 
+export class BadGatewayError extends ExtendableError {}
+
 export class RateLimitExceededError extends ExtendableError {}
 
 export class RequestError extends ExtendableError {}

server/routes/index.ts

@@ -16,10 +16,11 @@ const isProduction = env.ENVIRONMENT === "production";
 const koa = new Koa();
 const router = new Router();
 
-// serve static assets
+// serve public assets
 koa.use(
   serve(path.resolve(__dirname, "../../../public"), {
-    maxage: 60 * 60 * 24 * 30 * 1000,
+    // 1 month expiry, these assets are mostly static but do not contain a hash
+    maxAge: 30 * 24 * 60 * 60 * 1000,
   })
 );
 
@@ -43,10 +44,12 @@ if (isProduction) {
 
       await send(ctx, pathname, {
         root: path.join(__dirname, "../../app/"),
+        // Hashed static assets get 1 year expiry plus immutable flag
+        maxAge: 365 * 24 * 60 * 60 * 1000,
+        immutable: true,
         setHeaders: (res) => {
           res.setHeader("Service-Worker-Allowed", "/");
           res.setHeader("Access-Control-Allow-Origin", "*");
-          res.setHeader("Cache-Control", `max-age=${365 * 24 * 60 * 60}`);
         },
       });
     } catch (err) {