Add initial error handling for conversion process

packages/block-library/src/navigation/edit/index.js

@@ -333,10 +333,17 @@ function Navigation( {
 
 	useEffect( () => {
 		if (
-			! classicMenuConversionState?.isFetching &&
+			classicMenuConversionState?.status === 'success' &&
 			classicMenuConversionState.navMenu
 		) {
 			handleUpdateMenu( classicMenuConversionState.navMenu?.id );
+			hideClassicMenuConversionErrorNotice();
+		}
+
+		if ( classicMenuConversionState?.status === 'error' ) {
+			showClassicMenuConversionErrorNotice(
+				classicMenuConversionState.error
+			);
 		}
 	}, [ classicMenuConversionState ] );
 
@@ -386,6 +393,13 @@ function Navigation( {
 		}
 	);
 
+	const [
+		showClassicMenuConversionErrorNotice,
+		hideClassicMenuConversionErrorNotice,
+	] = useNavigationNotice( {
+		name: 'block-library/core/navigation/classic-menu-conversion/error',
+	} );
+
 	useEffect( () => {
 		if ( ! isSelected && ! isInnerBlockSelected ) {
 			hideCantEditNotice();

packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js

@@ -78,6 +78,18 @@ function useConvertClassicToBlockMenu( clientId ) {
 			.resolveSelect( coreStore )
 			.getMenuItems( menuItemsParameters );
 
+		// Offline response results in `null`
+		if ( classicMenuItems === null ) {
+			throw new Error(
+				// TODO - i18n
+				`Unable to fetch classic menu "${ menuName }" from API.`,
+				{
+					menuId,
+					menuName,
+				}
+			);
+		}
+
 		// 2. Convert the classic items into blocks.
 		const { innerBlocks } = menuItemsToBlocks( classicMenuItems );
 
@@ -109,9 +121,10 @@ function useConvertClassicToBlockMenu( clientId ) {
 						navMenu,
 					} );
 				} )
-				.catch( () => {
+				.catch( ( e ) => {
 					safeDispatch( {
 						type: 'ERROR',
+						error: e?.message,
 					} );
 				} );
 		},

packages/block-library/src/navigation/edit/use-navigation-notice.js

@@ -5,19 +5,19 @@ import { useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { store as noticeStore } from '@wordpress/notices';
 
-function useNavigationNotice( { name, message } = {} ) {
+function useNavigationNotice( { name, message = '' } = {} ) {
 	const noticeRef = useRef();
 
 	const { createWarningNotice, removeNotice } = useDispatch( noticeStore );
 
-	const showNotice = () => {
+	const showNotice = ( customMsg ) => {
 		if ( noticeRef.current ) {
 			return;
 		}
 
 		noticeRef.current = name;
 
-		createWarningNotice( message, {
+		createWarningNotice( customMsg || message, {
 			id: noticeRef.current,
 			type: 'snackbar',
 		} );