Detect errors in data layer and handle them when routing (#104920)

Author: p-jackson

client/dashboard/app/router.tsx

@@ -4,6 +4,7 @@ import {
 	createRootRoute,
 	redirect,
 	createLazyRoute,
+	lazyRouteComponent,
 } from '@tanstack/react-router';
 import { HostingFeatures } from '../data/constants';
 import { fetchTwoStep } from '../data/me';
@@ -111,6 +112,7 @@ const siteRoute = createRoute( {
 			await queryClient.ensureQueryData( siteByIdQuery( otherEnvironmentSiteId ) );
 		}
 	},
+	errorComponent: lazyRouteComponent( () => import( '../sites/site/error' ) ),
 } ).lazy( () =>
 	import( '../sites/site' ).then( ( d ) =>
 		createLazyRoute( 'site' )( {

client/dashboard/data/error.ts

@@ -0,0 +1,31 @@
+export class DashboardDataError extends Error {
+	constructor(
+		public code: string,
+		cause?: unknown
+	) {
+		const message = cause instanceof Error ? cause.message : `Error: ${ cause }`;
+		super( message, { cause } );
+		this.name = 'DashboardDataError';
+
+		// Fix prototype chain (important for instanceof to work reliably)
+		Object.setPrototypeOf( this, new.target.prototype );
+	}
+}
+
+interface WPError extends Error {
+	status: number;
+	statusCode: number;
+	error?: string;
+	[ key: string ]: unknown;
+}
+
+export function isWpError( error: unknown ): error is WPError {
+	return (
+		error instanceof Error &&
+		'status' in error &&
+		typeof error.status === 'number' &&
+		'statusCode' in error &&
+		typeof error.statusCode === 'number' &&
+		( 'error' in error ? typeof error.error === 'string' : true )
+	);
+}

client/dashboard/data/site.ts

@@ -1,4 +1,5 @@
 import wpcom from 'calypso/lib/wp';
+import { isWpError, DashboardDataError } from './error';
 
 export const SITE_FIELDS = [
 	'ID',
@@ -112,10 +113,17 @@ export interface Site {
 }
 
 export async function fetchSite( siteIdOrSlug: number | string ): Promise< Site > {
-	return await wpcom.req.get(
-		{ path: `/sites/${ siteIdOrSlug }` },
-		{ fields: JOINED_SITE_FIELDS, options: JOINED_SITE_OPTIONS }
-	);
+	try {
+		return await wpcom.req.get(
+			{ path: `/sites/${ siteIdOrSlug }` },
+			{ fields: JOINED_SITE_FIELDS, options: JOINED_SITE_OPTIONS }
+		);
+	} catch ( error ) {
+		if ( isWpError( error ) && error.error === 'parse_error' ) {
+			throw new DashboardDataError( 'inaccessible_jetpack', error );
+		}
+		throw error;
+	}
 }
 
 export async function deleteSite( siteId: number ) {

client/dashboard/sites/site/error.tsx

@@ -0,0 +1,42 @@
+import { Notice } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import UnknownError from '../../app/500';
+import { siteRoute } from '../../app/router';
+import { PageHeader } from '../../components/page-header';
+import PageLayout from '../../components/page-layout';
+import RouterLinkButton from '../../components/router-link-button';
+import { DashboardDataError } from '../../data/error';
+
+export default function Error( { error }: { error: Error } ) {
+	switch ( error instanceof DashboardDataError && error.code ) {
+		case 'inaccessible_jetpack':
+			return <InaccessibleJetpackError error={ error } />;
+		default:
+			return <UnknownError error={ error } />;
+	}
+}
+
+function InaccessibleJetpackError( { error }: { error: Error } ) {
+	const { siteSlug } = siteRoute.useParams();
+
+	return (
+		<PageLayout
+			header={
+				<PageHeader
+					title={ siteSlug }
+					description={ __( 'Your Jetpack site can not be reached at this time.' ) }
+					actions={
+						<RouterLinkButton to="/sites" variant="primary" __next40pxDefaultSize>
+							{ __( 'Go to Sites' ) }
+						</RouterLinkButton>
+					}
+				/>
+			}
+			notices={
+				<Notice status="error" isDismissible={ false }>
+					{ error.message }
+				</Notice>
+			}
+		></PageLayout>
+	);
+}