api-fetch: Check navigator.onLine to improve failure notices (#71438)

mcsf · jsnajdr · tyxla · web-flow · commit 62692fbfb472 · 2025-09-01T17:53:39.000+01:00
Check navigator.onLine to improve failure notices

When handling a failed request, let api-fetch infer from the value of
`navigator.onLine` whether the failure likely stems from the fact that
the user is disconnected from the network.

This still leaves out other kinds of network error, which right now will
still trigger the fallback "Could not get a valid response from the server"
messaging. The spec for `Window.fetch` does not prescribe a
standard error for network errors, meaning that browsers each implement
their own messaging.

Co-authored-by: mcsf &lt;mcsf@git.wordpress.org&gt;
Co-authored-by: jsnajdr &lt;jsnajdr@git.wordpress.org&gt;
Co-authored-by: tyxla &lt;tyxla@git.wordpress.org&gt;
Co-authored-by: Mamaduka &lt;mamaduka@git.wordpress.org&gt;
Co-authored-by: swissspidy &lt;swissspidy@git.wordpress.org&gt;
diff --git a/packages/api-fetch/src/index.ts b/packages/api-fetch/src/index.ts
@@ -114,11 +114,23 @@ const defaultFetchHandler: FetchHandler = ( nextOptions ) => {
 				throw err;
 			}
 
-			// Otherwise, there is most likely no network connection.
-			// Unfortunately the message might depend on the browser.
+			// If the browser reports being offline, we'll just assume that
+			// this is why the request failed.
+			if ( ! window.navigator.onLine ) {
+				throw {
+					code: 'offline_error',
+					message: __(
+						'Unable to connect. Please check your Internet connection.'
+					),
+				};
+			}
+
+			// Hard to diagnose further due to how Window.fetch reports errors.
 			throw {
 				code: 'fetch_error',
-				message: __( 'You are probably offline.' ),
+				message: __(
+					'Could not get a valid response from the server.'
+				),
 			};
 		}
 	);
diff --git a/packages/api-fetch/src/test/index.js b/packages/api-fetch/src/test/index.js
@@ -168,7 +168,7 @@ describe( 'apiFetch', () => {
 
 		await expect( apiFetch( { path: '/random' } ) ).rejects.toEqual( {
 			code: 'fetch_error',
-			message: 'You are probably offline.',
+			message: 'Could not get a valid response from the server.',
 		} );
 	} );
 
diff --git a/packages/editor/src/store/utils/notice-builder.js b/packages/editor/src/store/utils/notice-builder.js
@@ -89,17 +89,34 @@ export function getNotificationArgumentsForSaveFail( data ) {
 
 	const publishStatus = [ 'publish', 'private', 'future' ];
 	const isPublished = publishStatus.indexOf( post.status ) !== -1;
-	// If the post was being published, we show the corresponding publish error message
-	// Unless we publish an "updating failed" message.
+
+	if ( error.code === 'offline_error' ) {
+		const messages = {
+			publish: __( 'Publishing failed because you were offline.' ),
+			private: __( 'Publishing failed because you were offline.' ),
+			future: __( 'Scheduling failed because you were offline.' ),
+			default: __( 'Updating failed because you were offline.' ),
+		};
+
+		const noticeMessage =
+			! isPublished && edits.status in messages
+				? messages[ edits.status ]
+				: messages.default;
+
+		return [ noticeMessage, { id: 'editor-save' } ];
+	}
+
 	const messages = {
 		publish: __( 'Publishing failed.' ),
 		private: __( 'Publishing failed.' ),
 		future: __( 'Scheduling failed.' ),
+		default: __( 'Updating failed.' ),
 	};
+
 	let noticeMessage =
-		! isPublished && publishStatus.indexOf( edits.status ) !== -1
+		! isPublished && edits.status in messages
 			? messages[ edits.status ]
-			: __( 'Updating failed.' );
+			: messages.default;
 
 	// Check if message string contains HTML. Notice text is currently only
 	// supported as plaintext, and stripping the tags may muddle the meaning.
diff --git a/packages/media-utils/src/utils/test/upload-media.ts b/packages/media-utils/src/utils/test/upload-media.ts
@@ -215,7 +215,7 @@ describe( 'uploadMedia', () => {
 		( uploadToServer as jest.Mock ).mockImplementation( () => {
 			throw {
 				code: 'fetch_error',
-				message: 'You are probably offline.',
+				message: 'Could not get a valid response from the server.',
 			};
 		} );
 
@@ -229,7 +229,7 @@ describe( 'uploadMedia', () => {
 		expect( onError ).toHaveBeenCalledWith(
 			new UploadError( {
 				code: 'GENERAL',
-				message: 'You are probably offline.',
+				message: 'Could not get a valid response from the server.',
 				file: imageFile,
 			} )
 		);
diff --git a/test/e2e/specs/editor/various/autosave.spec.js b/test/e2e/specs/editor/various/autosave.spec.js
@@ -270,7 +270,7 @@ test.describe( 'Autosave', () => {
 
 		await expect(
 			page.locator( '.components-notice__content' )
-		).toContainText( 'Updating failed. You are probably offline.' );
+		).toContainText( 'Updating failed because you were offline.' );
 		expect(
 			await page.evaluate( () => window.sessionStorage.length )
 		).toBe( 1 );
diff --git a/test/e2e/specs/editor/various/change-detection.spec.js b/test/e2e/specs/editor/various/change-detection.spec.js
@@ -243,7 +243,7 @@ test.describe( 'Change detection', () => {
 		await expect(
 			page
 				.getByRole( 'region', { name: 'Editor content' } )
-				.getByText( 'Updating failed. You are probably offline.' )
+				.getByText( 'Updating failed because you were offline.' )
 		).toBeVisible();
 		await expect(
 			page
