Client for reading Fastly dictionary ab test state #14344

Jakeii · 2025-08-05T13:37:31Z

Co-authored-by: Imogen Hardy [email protected]

What does this change?

This is based off @i-hardy's work that was integrated into our proof of concept branch for the new framework.

Adds a "beta" client for detecting if a user is in a test and/or variant, so that behaviour/rendering can be changed if a user is in said test/variant.

Client side tests are read from the gu_client_ab_tests cookie, and server side tests read from serverSideABTests on the data from frontend/window.

There's a react hook for use in DCR, as well as a method on the window for other bundles such as commercial to use. The hook works both client and server side, when running client side it will return both server and client side tests, but when used server side will only return server side tests.

Why?

As all test participation is calculated at the edge, the current frameworks use of @guardian/ab-core is no longer needed, with the Ophan reporting integrated here in DCR.

We've created a new "beta" client so that we can compare the old and new frameworks behaviour.

Co-authored-by: Imogen Hardy <[email protected]>

github-actions · 2025-08-05T13:38:18Z

Deploy build 44550 of `Mobile::mobile-apps-rendering` to CODE

All deployment options

From guardian/actions-riff-raff.

dotcom-rendering/src/server/lib/get-content-from-url.ts

…lient

Jakeii · 2025-08-07T15:01:58Z

dotcom-rendering/src/client/main.web.ts

@@ -51,6 +51,15 @@ void (async () => {
 		},
 	);

+	void startup(


The method on the window needs to be available ASAP so that commercial and other client side code is able to use it.

Alternatively we could move this to libs and import it?

Having it in the lib and not relying on DCR to have added it the window would remove the risk of a race condition where commercial tries to call something on the window that hasn't been defined? That seems a plus for moving it to a lib. Are there any negatives of moving this to a lib?

It's quite a small amount of code, the duplication's effect on bundle sizes would be negligible I think.

I would suggest adding a comment here initially, explaining what's going on and then convert to a lib later on if required?

github-actions · 2025-08-07T15:16:48Z

Deploy build 20323 of `dotcom:rendering-all` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2025-08-08T10:04:16Z

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

Copilot

Pull Request Overview

This PR introduces a new beta A/B testing client framework for reading Fastly dictionary A/B test state, designed to replace the current @guardian/ab-core framework. The implementation supports both server-side and client-side A/B testing with separate data sources and provides a React hook for DCR usage.

Adds BetaABTests class for managing A/B test participation with server-side and client-side support
Implements useBetaAB React hook for accessing A/B test state in components
Integrates client-side A/B test reading from cookies and server-side tests from configuration

Reviewed Changes

Copilot reviewed 30 out of 61 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
`src/experiments/lib/beta-ab-tests.ts`	Core beta A/B testing class implementation with server/client-side logic
`src/client/abTesting.ts`	Client-side A/B test initialization and cookie parsing logic
`src/lib/useAB.ts`	React hooks for beta A/B testing integration
`src/components/SetABTests.importable.tsx`	Integration of beta A/B tests into existing setup flow
`src/types/config.ts`	Type definition updates for new `serverSideABTests` property
Multiple schema/render files	Addition of `serverSideABTests` configuration throughout the application

Copilot · 2025-08-08T12:27:30Z

dotcom-rendering/src/lib/useAB.ts

+export const useBetaAB = (): BetaABTestAPI | undefined => {
+	const { data } = useSWRImmutable(
+		'beta-ab-tests',
+		() => new Promise<BetaABTestAPI>(() => {}),


This promise never resolves, which means the hook will always return undefined. The promise should either resolve with a real implementation or use a different approach to initialize the data.

Suggested change

() => new Promise<BetaABTestAPI>(() => {}),

() => undefined,

We want it to never resolve as it will be replaced.

How does this work?

This was copied from the current client useAB added in #4200, it is initially set to a promise that won't resolve, when SetABTests.importable runs it sets it to the initialised ab test API.

It needs to be a promise, not sure if it necessarily needs to be a promise that doesn't resolve. Promise.resolve(undefined) might do the trick too.

dotcom-rendering/src/components/SetABTests.importable.tsx

dotcom-rendering/src/experiments/lib/beta-ab-tests.ts

cemms1 · 2025-08-08T10:38:57Z

dotcom-rendering/src/model/guardian.ts

+		/**
+		 * The 'abTests' is for use by external scripts that need to
+		 * access A/B test information. Do not use this directly
+		 * in DCR, instead use the `useAB` hook as it is csr/ssr aware.
+		 */


cemms1 · 2025-08-08T15:53:38Z

dotcom-rendering/src/lib/useAB.ts

+export const useBetaAB = (): BetaABTestAPI | undefined => {
+	const { data } = useSWRImmutable(
+		'beta-ab-tests',
+		() => new Promise<BetaABTestAPI>(() => {}),


How does this work?

cemms1 · 2025-08-12T09:29:04Z

dotcom-rendering/src/client/main.web.ts

@@ -51,6 +51,15 @@ void (async () => {
 		},
 	);

+	void startup(


I would suggest adding a comment here initially, explaining what's going on and then convert to a lib later on if required?

Jakeii · 2025-08-12T11:38:49Z

I would suggest adding a comment here initially, explaining what's going on and then convert to a lib later on if required?

Yup good idea 👍

Jakeii and others added 3 commits August 5, 2025 12:41

Add client for reading new ab test framework state

aa37e09

Co-authored-by: Imogen Hardy <[email protected]>

pass through cookies on dev server

5d7e5ec

fixtures

bf70f87

github-actions bot added the dotcom-rendering label Aug 5, 2025

Jakeii changed the title ~~Add application code for reading new ab test framework state~~ Client for reading new ab test framework state Aug 5, 2025

github-advanced-security bot found potential problems Aug 5, 2025

View reviewed changes

dotcom-rendering/src/server/lib/get-content-from-url.ts Fixed Show resolved Hide resolved

Jakeii added 7 commits August 6, 2025 11:02

prevent dev server fetching from unknown origins

dcc15f7

Merge remote-tracking branch 'origin/main' into jlk/beta-ab-testing-c…

7de546b

…lient

bypass metrics sample rate for beta tests

ba9224f

Merge remote-tracking branch 'origin/main' into jlk/beta-ab-testing-c…

c5371d7

…lient

remove fixture override

e320be0

Merge remote-tracking branch 'origin/main' into jlk/beta-ab-testing-c…

3d36741

…lient

football fixture

4b9a751

Jakeii commented Aug 7, 2025

View reviewed changes

Jakeii added 3 commits August 7, 2025 16:09

don't do dev server cookie passthrough for now

04ab36b

remove serverSideABTests override

e1e5914

clientParticipations

0b5c45e

Jakeii changed the title ~~Client for reading new ab test framework state~~ Client for reading Fastly dictionary ab test state Aug 8, 2025

pass isServer to betaABTests

c77cfc8

Jakeii force-pushed the jlk/beta-ab-testing-client branch from 098ff9a to c77cfc8 Compare August 8, 2025 10:00

Jakeii marked this pull request as ready for review August 8, 2025 10:04

Jakeii requested a review from a team as a code owner August 8, 2025 10:04

cemms1 requested a review from a team August 8, 2025 10:33

Jakeii requested a review from Copilot August 8, 2025 12:26

Copilot AI reviewed Aug 8, 2025

View reviewed changes

setAB inside useMemo

346d749

cemms1 reviewed Aug 12, 2025

View reviewed changes

add a note to main.web on window module

1476af6

guardian deleted a comment from Copilot AI Aug 14, 2025

Client for reading Fastly dictionary ab test state #14344

Are you sure you want to change the base?

Client for reading Fastly dictionary ab test state #14344

Conversation

Jakeii commented Aug 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this change?

Why?

Uh oh!

github-actions bot commented Aug 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Jakeii Aug 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Aug 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Aug 8, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 8, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Jakeii commented Aug 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Jakeii commented Aug 5, 2025 •

edited

Loading

github-actions bot commented Aug 5, 2025 •

edited

Loading

Jakeii Aug 8, 2025 •

edited

Loading

github-actions bot commented Aug 7, 2025 •

edited

Loading

Jakeii commented Aug 12, 2025 •

edited

Loading