Studio: Handle error when reading backup directories from /ls endpoint (#2366)

* Handle remote errors

* Cleanup

* Fix unintended changes

* Use addError boolean

* Clean up code duplication

---------

Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com>

Author: katinthehatsite

src/components/tree-view.tsx

@@ -17,6 +17,7 @@ export type TreeNode = {
 	children?: TreeNode[];
 	type?: TreeNodeType;
 	loading?: boolean;
+	hasError?: boolean;
 	pathId?: string;
 	path?: string;
 };
@@ -97,7 +98,7 @@ const TreeItem = ( {
 	isLast?: boolean;
 	disabled?: boolean;
 	renderAfterChildren?: ( nodeId: string ) => React.ReactNode;
-	renderEmptyContent?: ( nodeId: string ) => React.ReactNode;
+	renderEmptyContent?: ( nodeId: string, node: TreeNode ) => React.ReactNode;
 } ) => {
 	const { __ } = useI18n();
 	const isFirstLevel = level === 1;
@@ -168,7 +169,7 @@ const TreeItem = ( {
 				>
 					{ node.children.length === 0 ? (
 						renderEmptyContent ? (
-							renderEmptyContent( node.id )
+							renderEmptyContent( node.id, node )
 						) : (
 							<div className="text-gray-500 italic" aria-label={ __( 'Empty folder' ) }>
 								{ __( 'Empty' ) }
@@ -202,7 +203,7 @@ export type TreeViewProps = {
 	onExpand?: ( node: TreeNode ) => Promise< void >;
 	disabled?: boolean;
 	renderAfterChildren?: ( nodeId: string ) => React.ReactNode;
-	renderEmptyContent?: ( nodeId: string ) => React.ReactNode;
+	renderEmptyContent?: ( nodeId: string, node: TreeNode ) => React.ReactNode;
 };
 
 export const TreeView = ( {

src/modules/sync/components/sync-dialog.tsx

@@ -57,6 +57,7 @@ const useDynamicTreeState = (
 		isLoading: isLoadingLocalFileTree,
 		error: localFileTreeError,
 	} = useLocalFileTree();
+	const [ remoteFileTreeError, setRemoteFileTreeError ] = useState< Error | null >( null );
 
 	// If the site was just created and if there is no rewind_id yet,
 	// then all options are pre-checked to allow only a full sync
@@ -73,6 +74,7 @@ const useDynamicTreeState = (
 		if ( type === 'pull' && remoteSiteId ) {
 			let isCancelled = false;
 			const loadRemoteTree = async () => {
+				setRemoteFileTreeError( null );
 				try {
 					if ( rewindId ) {
 						const remoteTree = await fetchChildren( remoteSiteId, rewindId, '/wp-content/', false );
@@ -83,7 +85,10 @@ const useDynamicTreeState = (
 						}
 					}
 				} catch ( error ) {
-					console.error( 'Failed to load remote file tree:', error );
+					const errorObj = error instanceof Error ? error : new Error( 'Unknown error occurred' );
+					if ( ! isCancelled ) {
+						setRemoteFileTreeError( errorObj );
+					}
 				}
 			};
 			void loadRemoteTree();
@@ -125,6 +130,7 @@ const useDynamicTreeState = (
 		isErrorRewindId,
 		isLoadingLocalFileTree,
 		localFileTreeError,
+		remoteFileTreeError,
 	};
 };
 
@@ -162,6 +168,7 @@ export function SyncDialog( {
 		isErrorRewindId,
 		isLoadingLocalFileTree,
 		localFileTreeError,
+		remoteFileTreeError,
 	} = useDynamicTreeState( type, localSite.id, remoteSite.id, setTreeState );
 
 	const [ wpVersion ] = useGetWpVersion( localSite );
@@ -225,8 +232,23 @@ export function SyncDialog( {
 			}
 
 			if ( type === 'pull' && rewindId && node.path && node.children?.length === 0 ) {
-				const children = await fetchChildren( remoteSite.id, rewindId, node.path, node.checked );
-				setTreeState( ( prev ) => updateNodeById( prev, node.id, { children } ) );
+				// Set loading state for the node
+				setTreeState( ( prev ) => updateNodeById( prev, node.id, { loading: true } ) );
+
+				try {
+					const children = await fetchChildren( remoteSite.id, rewindId, node.path, node.checked );
+					setTreeState( ( prev ) =>
+						updateNodeById( prev, node.id, { children, loading: false, hasError: false } )
+					);
+				} catch ( error ) {
+					setTreeState( ( prev ) =>
+						updateNodeById( prev, node.id, {
+							children: [],
+							loading: false,
+							hasError: true,
+						} )
+					);
+				}
 			}
 			// For push operations, children are already loaded - no async fetching needed
 		},
@@ -361,7 +383,7 @@ export function SyncDialog( {
 										}
 										return null;
 									} }
-									renderEmptyContent={ ( nodeId ) => {
+									renderEmptyContent={ ( nodeId, node ) => {
 										if ( nodeId === 'wp-content' && type === 'push' && localFileTreeError ) {
 											return (
 												<div className="text-gray-500 italic">
@@ -371,6 +393,18 @@ export function SyncDialog( {
 												</div>
 											);
 										}
+										if (
+											( nodeId === 'wp-content' && type === 'pull' && remoteFileTreeError ) ||
+											node.hasError
+										) {
+											return (
+												<div className="text-gray-500 italic">
+													{ __(
+														'Error retrieving remote files and directories. Please close and reopen this dialog to try again.'
+													) }
+												</div>
+											);
+										}
 										return (
 											<div className="text-gray-500 italic" aria-label={ __( 'Empty folder' ) }>
 												{ __( 'Empty' ) }

src/stores/sync/sync-api.ts

@@ -110,11 +110,18 @@ export const fetchRemoteFileTree = createAsyncThunk(
 			path,
 		};
 
-		const rawResponse = await client.req.post( {
-			path: `/sites/${ remoteSiteId }/rewind/backup/ls`,
-			apiNamespace: 'wpcom/v2',
-			body: requestBody,
-		} );
+		let rawResponse;
+		try {
+			rawResponse = await client.req.post( {
+				path: `/sites/${ remoteSiteId }/rewind/backup/ls`,
+				apiNamespace: 'wpcom/v2',
+				body: requestBody,
+			} );
+		} catch ( err ) {
+			const errorMessage =
+				err instanceof Error ? err.message : 'Network error while fetching remote file tree';
+			throw new Error( errorMessage );
+		}
 
 		const validationResult = BackupLsResponseSchema.shape.body.safeParse( rawResponse );
 		if ( ! validationResult.success ) {

src/stores/sync/sync-hooks.ts

@@ -60,8 +60,9 @@ export function useRemoteFileTree() {
 
 				return result.children;
 			} catch ( err ) {
-				console.error( 'Failed to fetch remote file tree:', err );
-				return [];
+				const errorMessage =
+					err instanceof Error ? err.message : 'Failed to fetch remote file tree';
+				throw new Error( errorMessage );
 			}
 		},
 		[ client, dispatch ]