Simulate geoip server header in local development (#103597)

* Simulate geoip server header in local development

* Bootstrap in development condition instead of feature flag

See: #103597 (comment)

* Flatten to remove IIFE

See: #103597 (comment)

* Remove unnecessary async

* Avoid refetch on failed geolocation request

* Mock fetch implementation to resolve fetch completed

See: #103597 (comment)

Author: aduth

client/server/boot/index.js

@@ -10,6 +10,7 @@ import analytics from 'calypso/server/lib/analytics';
 import loggerMiddleware from 'calypso/server/middleware/logger';
 import pages from 'calypso/server/pages';
 import pwa from 'calypso/server/pwa';
+import geoipHeaderMiddleware from '../middleware/geoip-header.ts';
 
 /**
  * Returns the server HTTP request handler "app".
@@ -36,6 +37,10 @@ export default function setup() {
 	if ( 'development' === process.env.NODE_ENV ) {
 		require( 'calypso/server/bundler' )( app );
 
+		// Production servers forward a request header with the user's country code. To ensure a
+		// consistent experience, we simulate this in local development with a custom middleware.
+		app.use( geoipHeaderMiddleware() );
+
 		// When mocking WordPress.com to point locally, wordpress.com/wp-login.php will hit Calypso creating an infinite loop.
 		// redirect traffic to de.wordpress.com to hit the real backend and prevent a loop.
 		// `de.wordpress.com` accepts POST requests to `/wp-login.php` exactly like `wordpress.com`.

client/server/middleware/geoip-header.ts

@@ -0,0 +1,46 @@
+import { type RequestHandler } from 'express';
+import { getLogger } from 'calypso/server/lib/logger';
+
+/**
+ * Adds the `x-geoip-country-code` header to the request. This is used to simulate the header added
+ * in production environments, which is not available in all environments.
+ * @returns A middleware function that adds the `x-geoip-country-code` header to the request.
+ */
+export default function (): RequestHandler {
+	// To avoid delays on handling individual requests, fetch the geolocation once during server
+	// startup. This will retrieve the geolocation of the server (not the client), but it's expected
+	// that the middleware would be enabled on a developer's own machine.
+	let countryCode: string | undefined;
+	let countryCodePromise: Promise< string | undefined > | undefined;
+
+	async function getGeoCountryCode() {
+		if ( ! countryCode ) {
+			if ( ! countryCodePromise ) {
+				countryCodePromise = fetch( 'https://public-api.wordpress.com/geo/' )
+					.then( ( response ) => response.json() )
+					.then( ( { country_short } ) => country_short )
+					// Support offline development and set an expectation that the header is not
+					// always available by quietly skipping if the request fails.
+					.catch( () => {
+						getLogger().info( 'Failed to fetch geolocation' );
+					} );
+			}
+
+			countryCode = await countryCodePromise;
+		}
+
+		return countryCode;
+	}
+
+	// Prime the cache when the middleware is initialized.
+	getGeoCountryCode();
+
+	return async ( req, _res, next ) => {
+		const countryCode = await getGeoCountryCode();
+		if ( countryCode ) {
+			req.headers[ 'x-geoip-country-code' ] = countryCode;
+		}
+
+		next();
+	};
+}

client/server/middleware/test/geoip-header.test.ts

@@ -0,0 +1,98 @@
+import { type Request, type Response } from 'express';
+import middlewareGeoipHeader from '../geoip-header';
+
+const mockInfo = jest.fn();
+
+jest.mock( 'calypso/server/lib/logger', () => ( {
+	getLogger: jest.fn().mockImplementation( () => ( { info: mockInfo } ) ),
+} ) );
+
+describe( 'geoip-header middleware', () => {
+	let request: Request;
+	let response: Response;
+
+	beforeEach( () => {
+		jest.clearAllMocks();
+		jest.spyOn( global, 'fetch' );
+		request = { headers: {} } as Request;
+		response = {} as Response;
+	} );
+
+	it( 'should fetch country code on initialization', async () => {
+		const { promise, resolve } = Promise.withResolvers< void >();
+		( global.fetch as jest.Mock ).mockImplementation( () => {
+			resolve();
+			return Promise.resolve( {
+				json: () => Promise.resolve( { country_short: 'US' } ),
+			} );
+		} );
+
+		middlewareGeoipHeader();
+
+		await promise;
+		expect( global.fetch ).toHaveBeenCalledTimes( 1 );
+		expect( global.fetch ).toHaveBeenCalledWith( 'https://public-api.wordpress.com/geo/' );
+	} );
+
+	it( 'should add country code header to request when available', async () => {
+		( global.fetch as jest.Mock ).mockResolvedValueOnce( {
+			json: () => Promise.resolve( { country_short: 'US' } ),
+		} );
+		const next = jest.fn();
+
+		const middleware = middlewareGeoipHeader();
+
+		await middleware( request, response, next );
+
+		expect( request.headers[ 'x-geoip-country-code' ] ).toBe( 'US' );
+		expect( next ).toHaveBeenCalled();
+	} );
+
+	it( 'should not add header when country code is not available', async () => {
+		( global.fetch as jest.Mock ).mockRejectedValueOnce( new Error( 'Network error' ) );
+		const next = jest.fn();
+
+		const middleware = middlewareGeoipHeader();
+
+		await middleware( request, response, next );
+
+		expect( request.headers[ 'x-geoip-country-code' ] ).toBeUndefined();
+		expect( next ).toHaveBeenCalled();
+		expect( mockInfo ).toHaveBeenCalledWith( 'Failed to fetch geolocation' );
+	} );
+
+	it( 'should avoid duplicate requests when country code is available', async () => {
+		( global.fetch as jest.Mock ).mockResolvedValueOnce( {
+			json: () => Promise.resolve( { country_short: 'US' } ),
+		} );
+		const next = jest.fn();
+
+		const middleware = middlewareGeoipHeader();
+
+		await middleware( request, response, next );
+		await middleware( request, response, next );
+		await middleware( request, response, next );
+
+		expect( global.fetch ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should not re-fetch on next request if previous fetch failed', async () => {
+		( global.fetch as jest.Mock ).mockRejectedValue( new Error( 'Network error' ) );
+		const next = jest.fn();
+
+		const middleware = middlewareGeoipHeader();
+
+		const req1 = { headers: {} } as Request;
+		await middleware( req1, response, next );
+
+		expect( req1.headers[ 'x-geoip-country-code' ] ).toBeUndefined();
+		expect( mockInfo ).toHaveBeenCalledWith( 'Failed to fetch geolocation' );
+
+		const req2 = { headers: {} } as Request;
+		await middleware( req2, response, next );
+
+		expect( global.fetch ).toHaveBeenCalledTimes( 1 );
+		expect( mockInfo ).toHaveBeenCalledTimes( 1 );
+		expect( req2.headers[ 'x-geoip-country-code' ] ).toBeUndefined();
+	} );
+} );