my quick tests for implementing stale-if-error

Rate limit error caching to alleviate PATs.

api/index.js

@@ -7,6 +7,7 @@ import {
   parseBoolean,
   renderError,
 } from "../src/common/utils.js";
+import { HttpException } from "../src/common/exceptions.js";
 import { fetchStats } from "../src/fetchers/stats-fetcher.js";
 import { isLocaleAvailable } from "../src/translations.js";
 
@@ -56,7 +57,7 @@ export default async (req, res) => {
     );
 
     const cacheSeconds = clampValue(
-      parseInt(cache_seconds || CONSTANTS.FOUR_HOURS, 10),
+      parseInt(cache_seconds || CONSTANTS.CARD_CACHE_SECONDS, 10),
       CONSTANTS.FOUR_HOURS,
       CONSTANTS.ONE_DAY,
     );
@@ -65,7 +66,8 @@ export default async (req, res) => {
       "Cache-Control",
       `max-age=${
         cacheSeconds / 2
-      }, s-maxage=${cacheSeconds}, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
+      }, s-maxage=${cacheSeconds}, stale-while-revalidate=${CONSTANTS.ONE_DAY}, 
+      stale-if-error=${CONSTANTS.ONE_HOUR}`,
     );
 
     return res.send(
@@ -93,7 +95,27 @@ export default async (req, res) => {
       }),
     );
   } catch (err) {
-    res.setHeader("Cache-Control", `no-cache, no-store, must-revalidate`); // Don't cache error responses.
+    // Throw error if REST and GraphQL API calls fail. This way we can return a cached
+    if (err instanceof HttpException) {
+      // throw err;
+      // throw new Error(err.message);
+      // return res.status(404).;
+      // return {statusCode: 404, body: err.message}
+      return res
+        .status(500)
+        .send(
+          renderError(err.errors[0].message, err.errors[0].secondaryMessage),
+        );
+    }
+
+    // Cache the error response less frequently.
+    res.setHeader(
+      "Cache-Control",
+      `max-age=${CONSTANTS.ERROR_CACHE_SECONDS / 2}, s-maxage=${
+        CONSTANTS.ERROR_CACHE_SECONDS
+      }, stale-while-revalidate=${CONSTANTS.ONE_DAY}
+      stale-if-error=${CONSTANTS.ONE_HOUR}`,
+    );
     return res.send(renderError(err.message, err.secondaryMessage));
   }
 };

api/pin.js

@@ -40,7 +40,7 @@ export default async (req, res) => {
     const repoData = await fetchRepo(username, repo);
 
     let cacheSeconds = clampValue(
-      parseInt(cache_seconds || CONSTANTS.FOUR_HOURS, 10),
+      parseInt(cache_seconds || CONSTANTS.CARD_CACHE_SECONDS, 10),
       CONSTANTS.FOUR_HOURS,
       CONSTANTS.ONE_DAY,
     );
@@ -80,7 +80,12 @@ export default async (req, res) => {
       }),
     );
   } catch (err) {
-    res.setHeader("Cache-Control", `no-cache, no-store, must-revalidate`); // Don't cache error responses.
+    res.setHeader(
+      "Cache-Control",
+      `max-age=${CONSTANTS.ERROR_CACHE_SECONDS / 2}, s-maxage=${
+        CONSTANTS.ERROR_CACHE_SECONDS
+      }, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
+    ); // Cache the error response less frequently.
     return res.send(renderError(err.message, err.secondaryMessage));
   }
 };

api/top-langs.js

@@ -48,7 +48,7 @@ export default async (req, res) => {
     );
 
     const cacheSeconds = clampValue(
-      parseInt(cache_seconds || CONSTANTS.FOUR_HOURS, 10),
+      parseInt(cache_seconds || CONSTANTS.CARD_CACHE_SECONDS, 10),
       CONSTANTS.FOUR_HOURS,
       CONSTANTS.ONE_DAY,
     );
@@ -80,7 +80,12 @@ export default async (req, res) => {
       }),
     );
   } catch (err) {
-    res.setHeader("Cache-Control", `no-cache, no-store, must-revalidate`); // Don't cache error responses.
+    res.setHeader(
+      "Cache-Control",
+      `max-age=${CONSTANTS.ERROR_CACHE_SECONDS / 2}, s-maxage=${
+        CONSTANTS.ERROR_CACHE_SECONDS
+      }, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
+    ); // Cache the error response less frequently.
     return res.send(renderError(err.message, err.secondaryMessage));
   }
 };

api/wakatime.js

@@ -43,15 +43,11 @@ export default async (req, res) => {
     const stats = await fetchWakatimeStats({ username, api_domain, range });
 
     let cacheSeconds = clampValue(
-      parseInt(cache_seconds || CONSTANTS.FOUR_HOURS, 10),
+      parseInt(cache_seconds || CONSTANTS.CARD_CACHE_SECONDS, 10),
       CONSTANTS.FOUR_HOURS,
       CONSTANTS.ONE_DAY,
     );
 
-    if (!cache_seconds) {
-      cacheSeconds = CONSTANTS.FOUR_HOURS;
-    }
-
     res.setHeader(
       "Cache-Control",
       `max-age=${
@@ -80,7 +76,12 @@ export default async (req, res) => {
       }),
     );
   } catch (err) {
-    res.setHeader("Cache-Control", `no-cache, no-store, must-revalidate`); // Don't cache error responses.
+    res.setHeader(
+      "Cache-Control",
+      `max-age=${CONSTANTS.ERROR_CACHE_SECONDS / 2}, s-maxage=${
+        CONSTANTS.ERROR_CACHE_SECONDS
+      }, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
+    ); // Cache the error response less frequently.
     return res.send(renderError(err.message, err.secondaryMessage));
   }
 };

src/common/exceptions.js

@@ -0,0 +1,82 @@
+/**
+ * @file GRS Exception/Errors.
+ */
+
+const SECONDARY_ERROR_MESSAGES = {
+  MAX_RETRY:
+    "Please add an env variable called PAT_1 with your github token in vercel",
+  USER_NOT_FOUND: "Make sure the provided username is not an organization",
+  GRAPHQL_ERROR: "Please try again later",
+};
+
+/**
+ * Custom error class to handle custom GRS errors.
+ *
+ * @extends Error
+ */
+class CustomError extends Error {
+  /**
+   * @param {string} message Error message.
+   * @param {string} type Error type.
+   */
+  constructor(message, type) {
+    super(message);
+    this.type = type;
+    this.secondaryMessage = SECONDARY_ERROR_MESSAGES[type] || type;
+  }
+
+  static MAX_RETRY = "MAX_RETRY";
+  static USER_NOT_FOUND = "USER_NOT_FOUND";
+  static GRAPHQL_ERROR = "GRAPHQL_ERROR";
+}
+
+/**
+ * Missing query parameter class.
+ *
+ * @extends Error
+ */
+class MissingParamError extends Error {
+  /**
+   * @param {string[]} missedParams
+   * @param {string?=} secondaryMessage
+   */
+  constructor(missedParams, secondaryMessage) {
+    const msg = `Missing params ${missedParams
+      .map((p) => `"${p}"`)
+      .join(", ")} make sure you pass the parameters in URL`;
+    super(msg);
+    this.missedParams = missedParams;
+    this.secondaryMessage = secondaryMessage;
+  }
+}
+
+/**
+ * HttpException class.
+ *
+ * @extends Error
+ */
+class HttpException extends Error {
+  /**
+   * Create a HttpException.
+   *
+   * @param {number} statusCode - The status code.
+   * @param {string} message - The error message.
+   * @param {string[]} errors - The errors.
+   */
+  constructor(
+    statusCode,
+    message = "Exception occurred during the processing of HTTP requests.",
+    errors = [],
+  ) {
+    super(message);
+    this.statusCode = statusCode;
+    this.errors = errors;
+  }
+}
+
+export {
+  SECONDARY_ERROR_MESSAGES,
+  CustomError,
+  MissingParamError,
+  HttpException,
+};

src/common/index.js

@@ -21,10 +21,9 @@ export {
   wrapTextMultiline,
   logger,
   CONSTANTS,
-  CustomError,
-  MissingParamError,
   measureText,
   lowercaseTrim,
   chunkArray,
   parseEmojis,
 } from "./utils.js";
+export { CustomError, MissingParamError, HttpException } from "./exceptions.js";

src/common/retryer.js

@@ -1,4 +1,8 @@
-import { CustomError, logger } from "./utils.js";
+import { logger } from "./utils.js";
+import {
+  CustomError,
+  HttpException,
+} from "./exceptions.js";
 
 // Script variables.
 const PATs = Object.keys(process.env).filter((key) =>
@@ -16,8 +20,13 @@ const RETRIES = PATs ? PATs : 7;
  * @returns Promise<retryer>
  */
 const retryer = async (fetcher, variables, retries = 0) => {
-  if (retries > RETRIES) {
+  // if (retries > RETRIES) {
-    throw new CustomError("Maximum retries exceeded", CustomError.MAX_RETRY);
+  if (true) { // FIXME: Test out error
+    throw new HttpException(
+      statusCode=500,
+      message=`Max GraphQL retries exceeded. Please add an env variable called PAT_1 with your github token in vercel.`,
+      errors=[new CustomError("Maximum retries exceeded", CustomError.MAX_RETRY)]
+    );
   }
   try {
     // try to fetch with the first token since RETRIES is 0 index i'm adding +1
@@ -60,5 +69,5 @@ const retryer = async (fetcher, variables, retries = 0) => {
   }
 };
 
-export { retryer };
+export { retryer, RETRIES };
 export default retryer;

src/common/utils.js

@@ -22,8 +22,7 @@ const renderError = (message, secondaryMessage = "") => {
     .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #252525 }
     .gray { fill: #858585 }
     </style>
-    <rect x="0.5" y="0.5" width="${
+    <rect x="0.5" y="0.5" width="${ERROR_CARD_LENGTH - 1
-      ERROR_CARD_LENGTH - 1
     }" height="99%" rx="4.5" fill="#FFFEFE" stroke="#E4E2E2"/>
     <text x="25" y="45" class="text">Something went wrong! file an issue at https://tiny.one/readme-stats</text>
     <text data-testid="message" x="25" y="55" class="text small">
@@ -288,62 +287,28 @@ const wrapTextMultiline = (text, width = 59, maxLines = 3) => {
   return multiLineText;
 };
 
-const noop = () => {};
+const noop = () => { };
 // return console instance based on the environment
 const logger =
   process.env.NODE_ENV !== "test" ? console : { log: noop, error: noop };
 
+// Cache settings.
+const CARD_CACHE_SECONDS = 14400;
+const ERROR_CACHE_SECONDS = 600;
+
 const CONSTANTS = {
+  ONE_MINUTE: 60,
+  FIVE_MINUTES: 300,
+  TEN_MINUTES: 600,
+  FIFTEEN_MINUTES: 900,
   THIRTY_MINUTES: 1800,
   TWO_HOURS: 7200,
   FOUR_HOURS: 14400,
   ONE_DAY: 86400,
+  CARD_CACHE_SECONDS: CARD_CACHE_SECONDS,
+  ERROR_CACHE_SECONDS: ERROR_CACHE_SECONDS,
 };
 
-const SECONDARY_ERROR_MESSAGES = {
-  MAX_RETRY:
-    "Please add an env variable called PAT_1 with your github token in vercel",
-  USER_NOT_FOUND: "Make sure the provided username is not an organization",
-  GRAPHQL_ERROR: "Please try again later",
-};
-
-/**
- * Custom error class to handle custom GRS errors.
- */
-class CustomError extends Error {
-  /**
-   * @param {string} message Error message.
-   * @param {string} type Error type.
-   */
-  constructor(message, type) {
-    super(message);
-    this.type = type;
-    this.secondaryMessage = SECONDARY_ERROR_MESSAGES[type] || type;
-  }
-
-  static MAX_RETRY = "MAX_RETRY";
-  static USER_NOT_FOUND = "USER_NOT_FOUND";
-  static GRAPHQL_ERROR = "GRAPHQL_ERROR";
-}
-
-/**
- * Missing query parameter class.
- */
-class MissingParamError extends Error {
-  /**
-   * @param {string[]} missedParams
-   * @param {string?=} secondaryMessage
-   */
-  constructor(missedParams, secondaryMessage) {
-    const msg = `Missing params ${missedParams
-      .map((p) => `"${p}"`)
-      .join(", ")} make sure you pass the parameters in URL`;
-    super(msg);
-    this.missedParams = missedParams;
-    this.secondaryMessage = secondaryMessage;
-  }
-}
-
 /**
  * Retrieve text length.
  *
@@ -441,8 +406,6 @@ export {
   wrapTextMultiline,
   logger,
   CONSTANTS,
-  CustomError,
-  MissingParamError,
   measureText,
   lowercaseTrim,
   chunkArray,

src/fetchers/repo-fetcher.js

@@ -1,6 +1,7 @@
 // @ts-check
 import { retryer } from "../common/retryer.js";
-import { MissingParamError, request } from "../common/utils.js";
+import { request } from "../common/utils.js";
+import { MissingParamError } from "../common/exceptions.js";
 
 /**
  * Repo data fetcher.

src/fetchers/stats-fetcher.js

@@ -5,12 +5,11 @@ import githubUsernameRegex from "github-username-regex";
 import { calculateRank } from "../calculateRank.js";
 import { retryer } from "../common/retryer.js";
 import {
-  CustomError,
   logger,
-  MissingParamError,
   request,
   wrapTextMultiline,
 } from "../common/utils.js";
+import { CustomError, MissingParamError } from "../common/exceptions.js";
 
 dotenv.config();
 

src/fetchers/top-languages-fetcher.js

@@ -1,12 +1,11 @@
 // @ts-check
 import { retryer } from "../common/retryer.js";
 import {
-  CustomError,
   logger,
-  MissingParamError,
   request,
   wrapTextMultiline,
 } from "../common/utils.js";
+import { CustomError, MissingParamError } from "../common/exceptions.js";
 
 /**
  * Top languages fetcher object.

src/fetchers/wakatime-fetcher.js

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { MissingParamError } from "../common/utils.js";
+import { MissingParamError } from "../common/exceptions.js";
 
 /**
  * WakaTime data fetcher.

tests/api.test.js

@@ -171,13 +171,18 @@ describe("Test /api/", () => {
     ]);
   });
 
-  it("should not store cache when error", async () => {
+  it("should set shorter cache when error", async () => {
     const { req, res } = faker({}, error);
     await api(req, res);
 
     expect(res.setHeader.mock.calls).toEqual([
       ["Content-Type", "image/svg+xml"],
-      ["Cache-Control", `no-cache, no-store, must-revalidate`],
+      [
+        "Cache-Control",
+        `max-age=${CONSTANTS.ERROR_CACHE_SECONDS / 2}, s-maxage=${
+          CONSTANTS.ERROR_CACHE_SECONDS
+        }, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
+      ],
     ]);
   });
 

tests/retryer.test.js

@@ -1,6 +1,6 @@
 import { jest } from "@jest/globals";
 import "@testing-library/jest-dom";
-import { retryer } from "../src/common/retryer.js";
+import { retryer, RETRIES } from "../src/common/retryer.js";
 import { logger } from "../src/common/utils.js";
 
 const fetcher = jest.fn((variables, token) => {
@@ -45,7 +45,7 @@ describe("Test Retryer", () => {
     try {
       res = await retryer(fetcherFail, {});
     } catch (err) {
-      expect(fetcherFail).toBeCalledTimes(8);
+      expect(fetcherFail).toBeCalledTimes(RETRIES + 1);
       expect(err.message).toBe("Maximum retries exceeded");
     }
   });