impr: add X-Compatibility-Check header to all responses (@fehmer) (monkeytypegame#6262)

!nuf

Author: fehmer

backend/src/app.ts

@@ -8,17 +8,20 @@ import {
   badAuthRateLimiterHandler,
   rootRateLimiter,
 } from "./middlewares/rate-limit";
+import { compatibilityCheckMiddleware } from "./middlewares/compatibilityCheck";
+import { COMPATIBILITY_CHECK_HEADER } from "@monkeytype/contracts";
 
 function buildApp(): express.Application {
   const app = express();
 
   app.use(urlencoded({ extended: true }));
   app.use(json());
-  app.use(cors());
+  app.use(cors({ exposedHeaders: [COMPATIBILITY_CHECK_HEADER] }));
   app.use(helmet());
 
   app.set("trust proxy", 1);
 
+  app.use(compatibilityCheckMiddleware);
   app.use(contextMiddleware);
 
   app.use(badAuthRateLimiterHandler);

backend/src/middlewares/compatibilityCheck.ts

@@ -0,0 +1,20 @@
+import {
+  COMPATIBILITY_CHECK,
+  COMPATIBILITY_CHECK_HEADER,
+} from "@monkeytype/contracts";
+import type { Response, NextFunction, Request } from "express";
+
+/**
+ * Add the COMPATIBILITY_CHECK_HEADER to each response
+ * @param _req
+ * @param res
+ * @param next
+ */
+export async function compatibilityCheckMiddleware(
+  _req: Request,
+  res: Response,
+  next: NextFunction
+): Promise<void> {
+  res.setHeader(COMPATIBILITY_CHECK_HEADER, COMPATIBILITY_CHECK);
+  next();
+}

frontend/src/ts/ape/adapters/ts-rest-adapter.ts

@@ -7,6 +7,13 @@ import {
 import { getIdToken } from "firebase/auth";
 import { envConfig } from "../../constants/env-config";
 import { getAuthenticatedUser, isAuthenticated } from "../../firebase";
+import {
+  COMPATIBILITY_CHECK,
+  COMPATIBILITY_CHECK_HEADER,
+} from "@monkeytype/contracts";
+import * as Notifications from "../../elements/notifications";
+
+let bannerShownThisSession = false;
 
 function timeoutSignal(ms: number): AbortSignal {
   const ctrl = new AbortController();
@@ -35,14 +42,35 @@ function buildApi(timeout: number): (args: ApiFetcherArgs) => Promise<{
           : AbortSignal.timeout(timeout),
       };
       const response = await tsRestFetchApi(request);
-
       if (response.status >= 400) {
         console.error(`${request.method} ${request.path} failed`, {
           status: response.status,
           ...(response.body as object),
         });
       }
 
+      const compatibilityCheckHeader = response.headers.get(
+        COMPATIBILITY_CHECK_HEADER
+      );
+      if (compatibilityCheckHeader !== null && !bannerShownThisSession) {
+        const backendCheck = parseInt(compatibilityCheckHeader);
+        if (backendCheck !== COMPATIBILITY_CHECK) {
+          const message =
+            backendCheck > COMPATIBILITY_CHECK
+              ? `Looks like the client and server versions are mismatched (backend is newer). Please <a onClick="location.reload(true)">refresh</a> the page.`
+              : `Looks like our monkeys didn't deploy the new server version correctly. If this message persists contact support.`;
+          Notifications.addBanner(
+            message,
+            1,
+            undefined,
+            false,
+            undefined,
+            true
+          );
+          bannerShownThisSession = true;
+        }
+      }
+
       return response;
     } catch (e: Error | unknown) {
       let message = "Unknown error";

packages/contracts/src/index.ts

@@ -30,3 +30,10 @@ export const contract = c.router({
   quotes: quotesContract,
   webhooks: webhooksContract,
 });
+
+/**
+ * Whenever there is a breaking change with old frontend clients increase this number.
+ * This will inform the frontend to refresh.
+ */
+export const COMPATIBILITY_CHECK = 0;
+export const COMPATIBILITY_CHECK_HEADER = "X-Compatibility-Check";