Tweaks to showing new version available

- Added frontend translation for english
- Moved frontend api logic to hook and backend api space
- Added swagger schema for the new api endpoint
- Moved backend logic to its own internal file
- Added user agent header to github api check
- Added cypress integration test for version check api
- Added a memory cache item from github check to avoid hitting it too
  much

backend/internal/remote-version.js

@@ -0,0 +1,84 @@
+import https from "node:https";
+import { ProxyAgent } from "proxy-agent";
+import { debug, remoteVersion as logger } from "../logger.js";
+import pjson from "../package.json" with { type: "json" };
+
+const VERSION_URL = "https://api.github.com/repos/NginxProxyManager/nginx-proxy-manager/releases/latest";
+
+const internalRemoteVersion = {
+	cache_timeout: 1000 * 60 * 15, // 15 minutes
+	last_result: null,
+	last_fetch_time: null,
+
+	/**
+	 * Fetch the latest version info, using a cached result if within the cache timeout period.
+	 * @return {Promise<{current: string, latest: string, update_available: boolean}>} Version info
+	 */
+	get: async () => {
+		if (
+			!internalRemoteVersion.last_result ||
+			!internalRemoteVersion.last_fetch_time ||
+			Date.now() - internalRemoteVersion.last_fetch_time > internalRemoteVersion.cache_timeout
+		) {
+			const raw = await internalRemoteVersion.fetchUrl(VERSION_URL);
+			const data = JSON.parse(raw);
+			internalRemoteVersion.last_result = data;
+			internalRemoteVersion.last_fetch_time = Date.now();
+		} else {
+			debug(logger, "Using cached remote version result");
+		}
+
+		const latestVersion = internalRemoteVersion.last_result.tag_name;
+		const version = pjson.version.split("-").shift().split(".");
+		const currentVersion = `v${version[0]}.${version[1]}.${version[2]}`;
+		return {
+			current: currentVersion,
+			latest: latestVersion,
+			update_available: internalRemoteVersion.compareVersions(currentVersion, latestVersion),
+		};
+	},
+
+	fetchUrl: (url) => {
+		const agent = new ProxyAgent();
+		const headers = {
+			"User-Agent": `NginxProxyManager v${pjson.version}`,
+		};
+
+		return new Promise((resolve, reject) => {
+			logger.info(`Fetching ${url}`);
+			return https
+				.get(url, { agent, headers }, (res) => {
+					res.setEncoding("utf8");
+					let raw_data = "";
+					res.on("data", (chunk) => {
+						raw_data += chunk;
+					});
+					res.on("end", () => {
+						resolve(raw_data);
+					});
+				})
+				.on("error", (err) => {
+					reject(err);
+				});
+		});
+	},
+
+	compareVersions: (current, latest) => {
+		const cleanCurrent = current.replace(/^v/, "");
+		const cleanLatest = latest.replace(/^v/, "");
+
+		const currentParts = cleanCurrent.split(".").map(Number);
+		const latestParts = cleanLatest.split(".").map(Number);
+
+		for (let i = 0; i < Math.max(currentParts.length, latestParts.length); i++) {
+			const curr = currentParts[i] || 0;
+			const lat = latestParts[i] || 0;
+
+			if (lat > curr) return true;
+			if (lat < curr) return false;
+		}
+		return false;
+	},
+};
+
+export default internalRemoteVersion;

backend/logger.js

@@ -15,6 +15,7 @@ const certbot = new signale.Signale({ scope: "Certbot  ", ...opts });
 const importer = new signale.Signale({ scope: "Importer ", ...opts });
 const setup = new signale.Signale({ scope: "Setup    ", ...opts });
 const ipRanges = new signale.Signale({ scope: "IP Ranges", ...opts });
+const remoteVersion = new signale.Signale({ scope: "Remote Version", ...opts });
 
 const debug = (logger, ...args) => {
 	if (isDebugMode()) {
@@ -22,4 +23,4 @@ const debug = (logger, ...args) => {
 	}
 };
 
-export { debug, global, migrate, express, access, nginx, ssl, certbot, importer, setup, ipRanges };
+export { debug, global, migrate, express, access, nginx, ssl, certbot, importer, setup, ipRanges, remoteVersion };

backend/routes/version.js

@@ -1,8 +1,6 @@
 import express from "express";
+import internalRemoteVersion from "../internal/remote-version.js";
 import { debug, express as logger } from "../logger.js";
-import pjson from "../package.json" with { type: "json" };
-import https from "node:https";
-import { ProxyAgent } from "proxy-agent";
 
 const router = express.Router({
 	caseSensitive: true,
@@ -24,78 +22,19 @@ router
 	 *
 	 * Check for available updates
 	 */
-	.get(async (req, res, next) => {
+	.get(async (req, res, _next) => {
 		try {
-			const agent = new ProxyAgent();
+			const data = await internalRemoteVersion.get();
-			const url = "https://api.github.com/repos/NginxProxyManager/nginx-proxy-manager/releases/latest";
+			res.status(200).send(data);
-
-			const data = await new Promise((resolve, reject) => {
-				https
-					.get(url, { agent }, (response) => {
-						if (response.statusCode !== 200) {
-							reject(new Error(`GitHub API returned ${response.statusCode}`));
-							return;
-						}
-
-						response.setEncoding("utf8");
-						let raw_data = "";
-
-						response.on("data", (chunk) => {
-							raw_data += chunk;
-						});
-
-						response.on("end", () => {
-							try {
-								resolve(JSON.parse(raw_data));
-							} catch (err) {
-								reject(err);
-							}
-						});
-					})
-					.on("error", (err) => {
-						reject(err);
-					});
-			});
-
-			const latestVersion = data.tag_name;
-
-			const version = pjson.version.split("-").shift().split(".");
-			const currentVersion = `v${version[0]}.${version[1]}.${version[2]}`;
-
-			res.status(200).send({
-				current: currentVersion,
-				latest: latestVersion,
-				updateAvailable: compareVersions(currentVersion, latestVersion),
-			});
 		} catch (error) {
 			debug(logger, `${req.method.toUpperCase()} ${req.path}: ${error}`);
+			// Send 200 even though there's an error to avoid triggering update checks repeatedly
 			res.status(200).send({
 				current: null,
 				latest: null,
-				updateAvailable: false,
+				update_available: false,
 			});
 		}
 	});
 
-/**
- * Compare two version strings
- *
- */
-function compareVersions(current, latest) {
-	const cleanCurrent = current.replace(/^v/, "");
-	const cleanLatest = latest.replace(/^v/, "");
-
-	const currentParts = cleanCurrent.split(".").map(Number);
-	const latestParts = cleanLatest.split(".").map(Number);
-
-	for (let i = 0; i < Math.max(currentParts.length, latestParts.length); i++) {
-		const curr = currentParts[i] || 0;
-		const lat = latestParts[i] || 0;
-
-		if (lat > curr) return true;
-		if (lat < curr) return false;
-	}
-	return false;
-}
-
 export default router;

backend/schema/components/check-version-object.json

@@ -0,0 +1,25 @@
+{
+	"type": "object",
+	"description": "Check Version object",
+	"additionalProperties": false,
+	"required": ["current", "latest", "update_available"],
+	"properties": {
+		"current": {
+			"type": "string",
+			"description": "Current version string",
+			"example": "v2.10.1",
+			"nullable": true
+		},
+		"latest": {
+			"type": "string",
+			"description": "Latest version string",
+			"example": "v2.13.4",
+			"nullable": true
+		},
+		"update_available": {
+			"type": "boolean",
+			"description": "Whether there's an update available",
+			"example": true
+		}
+	}
+}

backend/schema/paths/version/check/get.json

@@ -0,0 +1,26 @@
+{
+	"operationId": "checkVersion",
+	"summary": "Returns any new version data from github",
+	"tags": ["public"],
+	"responses": {
+		"200": {
+			"description": "200 response",
+			"content": {
+				"application/json": {
+					"examples": {
+						"default": {
+							"value": {
+								"current": "v2.12.0",
+								"latest": "v2.13.4",
+								"update_available": true
+							}
+						}
+					},
+					"schema": {
+						"$ref": "../../../components/check-version-object.json"
+					}
+				}
+			}
+		}
+	}
+}

backend/schema/swagger.json

@@ -293,6 +293,11 @@
 				"$ref": "./paths/tokens/post.json"
 			}
 		},
+		"/version/check": {
+			"get": {
+				"$ref": "./paths/version/check/get.json"
+			}
+		},
 		"/users": {
 			"get": {
 				"$ref": "./paths/users/get.json"

frontend/src/api/backend/checkVersion.ts

@@ -0,0 +1,8 @@
+import * as api from "./base";
+import type { VersionCheckResponse } from "./responseTypes";
+
+export async function checkVersion(): Promise<VersionCheckResponse> {
+	return await api.get({
+		url: "/version/check",
+	});
+}

frontend/src/api/backend/index.ts

@@ -1,3 +1,4 @@
+export * from "./checkVersion";
 export * from "./createAccessList";
 export * from "./createCertificate";
 export * from "./createDeadHost";

frontend/src/api/backend/responseTypes.ts

@@ -19,3 +19,9 @@ export interface ValidatedCertificateResponse {
 export interface LoginAsTokenResponse extends TokenResponse {
 	user: User;
 }
+
+export interface VersionCheckResponse {
+	current: string | null;
+	latest: string | null;
+	updateAvailable: boolean;
+}

frontend/src/components/SiteFooter.tsx

@@ -1,11 +1,9 @@
-import { useEffect, useState } from "react";
+import { useCheckVersion, useHealth } from "src/hooks";
-import { useHealth } from "src/hooks";
 import { T } from "src/locale";
 
 export function SiteFooter() {
 	const health = useHealth();
-	const [latestVersion, setLatestVersion] = useState<string | null>(null);
+	const { data: versionData } = useCheckVersion();
-	const [isNewVersionAvailable, setIsNewVersionAvailable] = useState(false);
 
 	const getVersion = () => {
 		if (!health.data) {
@@ -15,25 +13,6 @@ export function SiteFooter() {
 		return `v${v.major}.${v.minor}.${v.revision}`;
 	};
 
-	useEffect(() => {
-		const checkForUpdates = async () => {
-			try {
-				const response = await fetch("/api/version/check");
-				if (response.ok) {
-					const data = await response.json();
-					setLatestVersion(data.latest);
-					setIsNewVersionAvailable(data.updateAvailable);
-				}
-			} catch (error) {
-				console.debug("Could not check for updates:", error);
-			}
-		};
-
-		if (health.data) {
-			checkForUpdates();
-		}
-	}, [health.data]);
-
 	return (
 		<footer className="footer d-print-none py-3">
 			<div className="container-xl">
@@ -77,16 +56,16 @@ export function SiteFooter() {
 									{getVersion()}{" "}
 								</a>
 							</li>
-							{isNewVersionAvailable && latestVersion && (
+							{versionData?.updateAvailable && versionData?.latest && (
 								<li className="list-inline-item">
 									<a
-										href={`https://github.com/NginxProxyManager/nginx-proxy-manager/releases/tag/${latestVersion}`}
+										href={`https://github.com/NginxProxyManager/nginx-proxy-manager/releases/tag/${versionData.latest}`}
 										className="link-warning fw-bold"
 										target="_blank"
 										rel="noopener"
-										title={`New version ${latestVersion} is available`}
+										title={`New version ${versionData.latest} is available`}
 									>
-										Update Available: ({latestVersion})
+										<T id="update-available" data={{ latestVersion: versionData.latest }} />
 									</a>
 								</li>
 							)}

frontend/src/hooks/index.ts

@@ -4,6 +4,7 @@ export * from "./useAuditLog";
 export * from "./useAuditLogs";
 export * from "./useCertificate";
 export * from "./useCertificates";
+export * from "./useCheckVersion";
 export * from "./useDeadHost";
 export * from "./useDeadHosts";
 export * from "./useDnsProviders";

frontend/src/hooks/useCheckVersion.ts

@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+import { checkVersion, type VersionCheckResponse } from "src/api/backend";
+
+const fetchVersion = () => checkVersion();
+
+const useCheckVersion = (options = {}) => {
+	return useQuery<VersionCheckResponse, Error>({
+		queryKey: ["version-check"],
+		queryFn: fetchVersion,
+		refetchOnWindowFocus: false,
+		retry: 5,
+		refetchInterval: 30 * 1000, // 30 seconds
+		staleTime: 5 * 60 * 1000, // 5 mins
+		...options,
+	});
+};
+
+export { fetchVersion, useCheckVersion };

frontend/src/locale/lang/en.json

@@ -197,6 +197,7 @@
   "streams.tcp": "TCP",
   "streams.udp": "UDP",
   "test": "Test",
+  "update-available": "Update Available: {latestVersion}",
   "user": "User",
   "user.change-password": "Change Password",
   "user.confirm-password": "Confirm Password",

frontend/src/locale/src/en.json

@@ -593,6 +593,9 @@
 	"test": {
 		"defaultMessage": "Test"
 	},
+	"update-available": {
+		"defaultMessage": "Update Available: {latestVersion}"
+	},
 	"user": {
 		"defaultMessage": "User"
 	},

test/cypress/e2e/api/Health.cy.js

@@ -17,4 +17,12 @@ describe('Basic API checks', () => {
 			expect(data.openapi).to.be.equal('3.1.0');
 		});
 	});
+
+	it('Should return a valid payload for version check', () => {
+		cy.task('backendApiGet', {
+			path: `/api/version/check?ts=${Date.now()}`,
+		}).then((data) => {
+			cy.validateSwaggerSchema('get', 200, '/version/check', data);
+		});
+	});
 });