Implement FetchHostedOnwards component which is a client-side rendered component within an Island to render onward content for hosted content pages

Author: cemms1

dotcom-rendering/src/components/FetchHostedOnwards.island.tsx

@@ -9,30 +9,19 @@ type Props = {
 };
 
 type OnwardsResponse = {
-	result: {
-		owner: string;
-		trails: Array<TrailType>;
-		// trails: Array<{
-		// 	/** URL of the article, used for the anchor tag */
-		// 	url: string;
-		// 	/** Headline of the article represented by trail */
-		// 	headline: string;
-		// 	/** Image thumbnail details for the article */
-		// 	image: {
-		// 		/** Trail image URL */
-		// 		src: string;
-		// 		/** Alt text for the trail image */
-		// 		alt: string;
-		// 	};
-		// 	format: FEFormat;
-		// }>;
-	};
+	trails: Array<TrailType>;
 };
 
 export const FetchHostedOnwards = ({ branding, url }: Props) => {
-	const { data } = useApi<OnwardsResponse>(url);
+	const { data, error } = useApi<OnwardsResponse>(url);
 
-	const { result: { trails = [] } = {} } = data ?? {};
+	if (error) {
+		// Send the error to Sentry and then prevent the element from rendering
+		window.guardian.modules.sentry.reportError(error, 'hosted-onwards');
+		return null;
+	}
+
+	const { trails = [] } = data ?? {};
 
 	if (!trails.length) {
 		return null;

dotcom-rendering/src/components/HostedContentOnwards.stories.tsx

@@ -1,6 +1,42 @@
-import { trails } from '../layouts/HostedArticleLayout';
+import type { TrailType } from '../types/trails';
 import { HostedContentOnwards } from './HostedContentOnwards';
 
+const trails: TrailType[] = [
+	{
+		url: 'https://www.theguardian.com/money/gallery/2026/mar/27/loft-style-apartments-for-sale-in-england-in-pictures',
+		headline: 'Loft-style apartments for sale in England – in pictures',
+		format: { design: 27, display: 1, theme: 6 },
+		dataLinkName: 'media | group-0 | card-@1',
+		image: {
+			src: 'https://media.guim.co.uk/276ed08e0380a9a3045a779ea1ca8c93f7c1b51e/500_0_5000_4000/2000.jpg',
+			altText:
+				'Loft-style apartment interior in Clapton, east London with industrial design elements',
+		},
+	},
+	{
+		url: 'https://www.theguardian.com/books/2026/apr/01/under-water-by-tara-menon-review-love-loss-and-a-longing-for-the-ocean',
+		headline:
+			'Under Water by Tara Menon review – love, loss and a longing for the ocean',
+		format: { design: 27, display: 1, theme: 6 },
+		dataLinkName: 'media | group-0 | card-@2',
+		image: {
+			src: 'https://media.guim.co.uk/95d6b3df9e3471344dc19a32d94bb3d5ff6f5016/205_5_2978_2382/2000.jpg',
+			altText: 'Tropical fish',
+		},
+	},
+	{
+		url: 'https://www.theguardian.com/money/gallery/2026/feb/27/homes-a-short-walk-from-the-sea-in-england-and-scotland-in-pictures',
+		headline:
+			'Homes a short walk from the sea in England and Scotland – in pictures',
+		format: { design: 27, display: 1, theme: 6 },
+		dataLinkName: 'media | group-0 | card-@3',
+		image: {
+			src: 'https://media.guim.co.uk/9879e5d3275b5dae8c8bfd8e1ac700332e2de8c4/237_0_3750_3000/2000.jpg',
+			altText: 'Craster, Northumberland',
+		},
+	},
+];
+
 export default {
 	component: HostedContentOnwards,
 	title: 'Components/HostedContentOnwards',

dotcom-rendering/src/layouts/HostedArticleLayout.tsx

@@ -329,9 +329,7 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
 					<div css={onwardContentStyles}>
 						<Island priority="feature" defer={{ until: 'idle' }}>
 							<FetchHostedOnwards
-								url={
-									'http://localhost:9000/advertiser-content/we-are-still-in/faces-of-we-are-still-in/onward.json'
-								}
+								url={`${frontendData.config.ajaxUrl}/${frontendData.config.pageId}/onward.json`}
 								branding={branding}
 							/>
 						</Island>

dotcom-rendering/src/layouts/HostedVideoLayout.tsx

@@ -323,7 +323,10 @@ export const HostedVideoLayout = (props: WebProps | AppProps) => {
 
 					<div css={onwardContentStyles}>
 						<Island priority="feature" defer={{ until: 'idle' }}>
-							<FetchHostedOnwards branding={branding} />
+							<FetchHostedOnwards
+								url={`${frontendData.config.ajaxUrl}/${frontendData.config.pageId}/onward.json`}
+								branding={branding}
+							/>
 						</Island>
 					</div>