Added maintenance banner when fractal-server is down

zonia3000 · zonia3000 · commit eba71741d629 · 2024-06-03T15:27:28.000+02:00
diff --git a/.eslintignore b/.eslintignore
@@ -7,6 +7,7 @@ node_modules
 .env.*
 !.env.example
 *.d.ts
+/venv
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 *Note: Numbers like (\#123) point to closed Pull Requests on the fractal-web repository.*
 
+# Unreleased
+
+* Added maintenance banner when fractal-server is down (\#504).
+
 # 1.1.0
 
 > WARNING: with this release all the environment variables will be read from
diff --git a/src/hooks.server.js b/src/hooks.server.js
@@ -1,48 +1,82 @@
 import { env } from '$env/dynamic/private';
-import { error } from '@sveltejs/kit';
+import { getCurrentUser } from '$lib/server/api/v1/auth_api';
 import { getLogger } from '$lib/server/logger.js';
+import { error, redirect } from '@sveltejs/kit';
 
 const logger = getLogger('hooks');
 
+if (env.FRACTAL_SERVER_HOST.endsWith('/')) {
+	env.FRACTAL_SERVER_HOST = env.FRACTAL_SERVER_HOST.substring(
+		0,
+		env.FRACTAL_SERVER_HOST.length - 1
+	);
+	logger.trace(
+		'Removing final slash from FRACTAL_SERVER_HOST, new value is %s',
+		env.FRACTAL_SERVER_HOST
+	);
+}
+
 export async function handle({ event, resolve }) {
+	if (event.url.pathname.startsWith('/_app')) {
+		// The _app folder contains static files that are the result of npm build.
+		// The hooks handle function is not called when loading valid static files, however we can
+		// reach this point if a not existing file is requested. That could happen after an update
+		// if the browser is loading a cached page that references to outdated contents.
+		// In that case we can just skip the whole function.
+		await resolve(event);
+	}
+
+	if (event.url.pathname.startsWith('/api')) {
+		// API page - AJAX request - handled in proxy'
+		logger.trace('API endpoint detected, leaving the handling to the proxy');
+		return await resolve(event);
+	}
+
 	logger.info('[%s] - %s', event.request.method, event.url.pathname);
 
-	if (
+	// Retrieve server info (alive and version)
+	const serverInfo = await getServerInfo(event.fetch);
+
+	// Check if auth cookie is present
+	const fastApiUsersAuth = event.cookies.get('fastapiusersauth');
+	if (!fastApiUsersAuth) {
+		logger.debug('No auth cookie found');
+	}
+
+	// Retrieve user info
+	let userInfo = null;
+	if (serverInfo.alive && fastApiUsersAuth) {
+		userInfo = await getUserInfo(event.fetch);
+		logger.trace('User: %s', userInfo?.email);
+	}
+
+	// Store the pageInfo in locals variable to use the in +layout.server.js
+	event.locals['pageInfo'] = { serverInfo, userInfo };
+
+	const isPublicPage =
 		event.url.pathname == '/' ||
 		event.url.pathname.startsWith('/auth') ||
-		event.url.pathname.startsWith('/sandbox/jsonschema')
-	) {
+		event.url.pathname.startsWith('/sandbox/jsonschema');
+
+	if (isPublicPage) {
 		logger.debug('Public page - No auth required');
 		return await resolve(event);
 	}
 
-	if (event.url.pathname.startsWith('/api')) {
-		// API page - AJAX request - handled in proxy'
-		return await resolve(event);
+	if (!serverInfo.alive && !isPublicPage) {
+		// If fractal-server is not available, redirect to the home page to display the maintenance banner
+		throw redirect(302, '/?invalidate=true');
 	}
 
 	// Authentication guard
-	const fastApiUsersAuth = event.cookies.get('fastapiusersauth');
-	if (!fastApiUsersAuth) {
+	if (!isPublicPage && userInfo === null) {
 		logger.debug('Authentication required - No auth cookie found - Redirecting to login');
-		return new Response(null, {
-			status: 302,
-			headers: { location: '/auth/login?invalidate=true' }
-		});
-	}
-
-	const currentUser = await event.fetch(`${env.FRACTAL_SERVER_HOST}/auth/current-user/`);
-	if (!currentUser.ok) {
-		logger.debug('Validation of authentication - Error loading user info');
-		return new Response(null, {
-			status: 302,
-			headers: { location: '/auth/login?invalidate=true' }
-		});
+		throw redirect(302, '/auth/login?invalidate=true');
 	}
 
+	// Admin area check
 	if (event.url.pathname.startsWith('/v1/admin') || event.url.pathname.startsWith('/v2/admin')) {
-		const user = await currentUser.json();
-		if (!user.is_superuser) {
+		if (!(/** @type {import('$lib/types').User} */ (userInfo).is_superuser)) {
 			throw error(403, `Only superusers can access the admin area`);
 		}
 	}
@@ -57,11 +91,6 @@ export async function handleFetch({ event, request, fetch }) {
 	1. https://github.com/fractal-analytics-platform/fractal-web/issues/274
 	2. https://kit.svelte.dev/docs/hooks#server-hooks-handlefetch
 	*/
-
-	if (env.FRACTAL_SERVER_HOST.endsWith('/')) {
-		env.FRACTAL_SERVER_HOST = env.FRACTAL_SERVER_HOST.substring(0, env.FRACTAL_SERVER_HOST.length - 1);
-	}
-
 	if (request.url.startsWith(env.FRACTAL_SERVER_HOST)) {
 		logger.trace('Including cookie into request to %s, via handleFetch', request.url);
 		const cookie = event.request.headers.get('cookie');
@@ -71,3 +100,41 @@ export async function handleFetch({ event, request, fetch }) {
 	}
 	return fetch(request);
 }
+
+/**
+ * @param {typeof fetch} fetch
+ * @returns {Promise<{ alive: boolean, version: string | null }>}
+ */
+async function getServerInfo(fetch) {
+	let serverInfo = { alive: false, version: null };
+
+	try {
+		const serverInfoResponse = await fetch(env.FRACTAL_SERVER_HOST + '/api/alive/');
+		if (serverInfoResponse.ok) {
+			serverInfo = await serverInfoResponse.json();
+			logger.debug('Server info loaded: Alive %s - %s', serverInfo.alive, serverInfo.version);
+		} else {
+			logger.error(
+				'Alive endpoint replied with unsuccessful status code %d',
+				serverInfoResponse.status
+			);
+		}
+	} catch (error) {
+		logger.fatal('Error loading server info', error);
+	}
+
+	return serverInfo;
+}
+
+/**
+ * @param {typeof fetch} fetch
+ * @returns {Promise<import('$lib/types').User|null>}
+ */
+async function getUserInfo(fetch) {
+	try {
+		return await getCurrentUser(fetch);
+	} catch (error) {
+		logger.error('Error loading user info', error);
+		return null;
+	}
+}
diff --git a/src/lib/server/api/v1/auth_api.js b/src/lib/server/api/v1/auth_api.js
@@ -29,7 +29,7 @@ export async function userAuthentication(fetch, data) {
 /**
  * Fetches user identity
  * @param {typeof fetch} fetch
- * @returns {Promise<import('$lib/types').User>}
+ * @returns {Promise<import('$lib/types').User|null>}
  */
 export async function getCurrentUser(fetch) {
 	logger.debug('Retrieving current user');
@@ -40,7 +40,7 @@ export async function getCurrentUser(fetch) {
 
 	if (!response.ok) {
 		logger.warn('Unable to retrieve the current user');
-		await responseError(response);
+		return null;
 	}
 
 	return await response.json();
diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js
@@ -1,41 +1,19 @@
-import { env } from '$env/dynamic/private';
-import { getCurrentUser } from '$lib/server/api/v1/auth_api';
 import { getLogger } from '$lib/server/logger.js';
 
 const logger = getLogger('page layout');
 
-export async function load({ fetch, cookies }) {
+export async function load({ locals, request, url }) {
 	// This is a mark to notify and log when the server is running SSR
 	logger.debug('SSR - Main layout');
 
-	const serverInfo = await fetch(env.FRACTAL_SERVER_HOST + '/api/alive/')
-		.then(async (res) => {
-			const info = await res.json();
-			logger.debug('Server info loaded: Alive %s - %s', info.alive, info.version);
-			return info;
-		})
-		.catch((error) => {
-			logger.fatal('Error loading server info', error);
-		});
+	logger.trace('[%s] - %s', request.method, url.pathname);
 
-	// Check user info
-	// Check auth cookie is present
-	const fastApiUsersAuth = cookies.get('fastapiusersauth');
-	if (!fastApiUsersAuth) {
-		logger.debug('No auth cookie found');
-		return {
-			serverInfo,
-			userInfo: null
-		};
-	}
+	// read pageInfo set from hooks.server.js
+	const pageInfo = locals['pageInfo'];
 
-	const userInfo = await getCurrentUser(fetch).catch((error) => {
-		logger.error('Error loading user info', error);
-		return null;
-	});
+	if (!pageInfo) {
+		logger.error('pageInfo is missing, it should have been loaded by hooks.server.js');
+	}
 
-	return {
-		serverInfo,
-		userInfo
-	};
+	return pageInfo;
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { browser } from '$app/environment';
+	import { afterNavigate, invalidateAll } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { navigating } from '$app/stores';
 	import { reloadVersionedPage } from '$lib/common/selected_api_version';
@@ -102,6 +103,12 @@
 			sessionStorage.setItem('userLoggedIn', 'true');
 		}
 	});
+
+	afterNavigate(async () => {
+		if (location.href.includes('invalidate=true')) {
+			await invalidateAll();
+		}
+	});
 </script>
 
 <main>
@@ -208,6 +215,11 @@
 		<div class="admin-border" />
 	{/if}
 	<div class="container p-4">
+		{#if !server.alive}
+			<div class="alert alert-danger">
+				Sorry, we are performing some maintenance on fractal-server. It will be back online soon.
+			</div>
+		{/if}
 		{#if userLoggedIn && !$page.data.userInfo.is_verified}
 			<div class="row">
 				<div class="col">
@@ -235,7 +247,10 @@
 			<div class="col d-flex justify-content-center">
 				<div class="hstack gap-3">
 					<span class="font-monospace">
-						fractal-server {server.version}, fractal-web {clientVersion}
+						{#if server.version}
+							fractal-server {server.version},
+						{/if}
+						fractal-web {clientVersion}
 					</span>
 				</div>
 			</div>
diff --git a/src/routes/proxy.js b/src/routes/proxy.js
@@ -9,7 +9,7 @@ const logger = getLogger('proxy');
 export function createGetProxy(path) {
 	return async function GET({ params, url, request }) {
 		try {
-			logger.trace('[GET] /%s/%s/%s', path, params.path, url.search);
+			logger.info('[GET] - /%s/%s/%s', path, params.path, url.search);
 			return await fetch(`${env.FRACTAL_SERVER_HOST}/${path}/${params.path}/${url.search}`, {
 				method: 'GET',
 				credentials: 'include',
@@ -28,7 +28,7 @@ export function createGetProxy(path) {
 export function createPostProxy(path) {
 	return async function POST({ params, url, request }) {
 		try {
-			logger.trace('[POST] /%s/%s/%s', path, params.path, url.search);
+			logger.info('[POST] - /%s/%s/%s', path, params.path, url.search);
 			return await fetch(`${env.FRACTAL_SERVER_HOST}/${path}/${params.path}/${url.search}`, {
 				method: 'POST',
 				credentials: 'include',
@@ -48,7 +48,7 @@ export function createPostProxy(path) {
 export function createPatchProxy(path) {
 	return async function PATCH({ params, url, request }) {
 		try {
-			logger.trace('[PATCH] /%s/%s/%s', path, params.path, url.search);
+			logger.info('[PATCH] - /%s/%s/%s', path, params.path, url.search);
 			return await fetch(`${env.FRACTAL_SERVER_HOST}/${path}/${params.path}/${url.search}`, {
 				method: 'PATCH',
 				credentials: 'include',
@@ -68,7 +68,7 @@ export function createPatchProxy(path) {
 export function createDeleteProxy(path) {
 	return async function DELETE({ params, url, request }) {
 		try {
-			logger.trace('[DELETE] /%s/%s/%s', path, params.path, url.search);
+			logger.info('[DELETE] - /%s/%s/%s', path, params.path, url.search);
 			return await fetch(`${env.FRACTAL_SERVER_HOST}/${path}/${params.path}/${url.search}`, {
 				method: 'DELETE',
 				credentials: 'include',
