Add error handling when there is an error to load stream posts (#107589)

Author: gabrielcaires

client/reader/stream/error.tsx

@@ -0,0 +1,43 @@
+import { recordTracksEvent } from '@automattic/calypso-analytics';
+import { useTranslate } from 'i18n-calypso';
+import { useEffect } from 'react';
+import EmptyContent from 'calypso/components/empty-content';
+
+/**
+ * Props for the StreamError component.
+ * @param onTryAgain - Callback to try again.
+ * @param streamKey - The key of the stream.
+ */
+interface StreamErrorProps {
+	onTryAgain?: () => void;
+	streamKey: string;
+}
+
+export const StreamError = ( { onTryAgain, streamKey }: StreamErrorProps ) => {
+	const translate = useTranslate();
+
+	useEffect( () => {
+		recordTracksEvent( 'reader_stream_error', {
+			stream_key: streamKey,
+			path: window.location.pathname,
+		} );
+	}, [ streamKey ] );
+
+	const handleTryAgain = () => {
+		recordTracksEvent( 'reader_stream_error_try_again', {
+			stream_key: streamKey,
+			path: window.location.pathname,
+		} );
+		onTryAgain?.();
+	};
+
+	return (
+		<EmptyContent
+			className="stream__empty"
+			title={ translate( 'Sorry, something went wrong.' ) }
+			line={ translate( 'We couldn’t load your feed. Please try again.' ) }
+			action={ translate( 'Try again' ) }
+			actionCallback={ handleTryAgain }
+		/>
+	);
+};

client/reader/stream/index.jsx

@@ -55,6 +55,7 @@ import isNotificationsOpen from 'calypso/state/selectors/is-notifications-open';
 import { ReaderPerformanceTrackerStop } from '../reader-performance-tracker';
 import { CustomerCouncilBanner } from './customer-council-banner';
 import EmptyContent from './empty';
+import { StreamError } from './error';
 import PostLifecycle from './post-lifecycle';
 import PostPlaceholder from './post-placeholder';
 
@@ -166,6 +167,10 @@ class ReaderStream extends Component {
 			} );
 		}
 	}
+	tryAgain = () => {
+		this.props.clearStream( { streamKey: this.props.streamKey } );
+		this.fetchNextPage( {} );
+	};
 
 	focusSelectedPost = ( selectedPostKey ) => {
 		const postRefKey = this.getPostRef( selectedPostKey );
@@ -647,7 +652,7 @@ class ReaderStream extends Component {
 			isRequesting = true;
 		}
 
-		const hasNoPosts = this.isMounted && items.length === 0 && ! isRequesting;
+		const hasNoPosts = this.isMounted && items.length === 0 && ! isRequesting && ! this.props.error;
 
 		const streamType = getStreamType( streamKey );
 
@@ -753,6 +758,16 @@ class ReaderStream extends Component {
 
 		const TopLevel = this.props.isMain ? ReaderMain : 'div';
 
+		if ( this.props.error ) {
+			body = (
+				<StreamError
+					onTryAgain={ this.tryAgain }
+					streamKey={ streamKey }
+					context={ this.state.selectedTab }
+				/>
+			);
+		}
+
 		return (
 			<TopLevel className={ baseClassnames }>
 				<div ref={ this.overlayRef } className="stream__init-overlay" />
@@ -812,6 +827,7 @@ export default connect(
 			selectedPost,
 			lastPage: stream.lastPage,
 			isRequesting: stream.isRequesting,
+			error: stream.error,
 			shouldRequestRecs: shouldRequestRecs( state, streamKey, recsStreamKey ),
 			likedPost: selectedPost && isLikedPost( state, selectedPost.site_ID, selectedPost.ID ),
 			organizations: getReaderOrganizations( state ),

client/state/data-layer/wpcom/read/streams/index.js

@@ -14,9 +14,11 @@ import {
 } from 'calypso/state/reader/action-types';
 import { receivePosts } from 'calypso/state/reader/posts/actions';
 import { receiveRecommendedSites } from 'calypso/state/reader/recommended-sites/actions';
-import { receivePage, receiveUpdates } from 'calypso/state/reader/streams/actions';
-
-const noop = () => {};
+import {
+	receivePage,
+	receiveUpdates,
+	receiveStreamError,
+} from 'calypso/state/reader/streams/actions';
 
 /**
  * Pull the suffix off of a stream key
@@ -520,19 +522,23 @@ export function handlePage( action, data ) {
 	return actions;
 }
 
+const handleError = ( action, error ) => {
+	return receiveStreamError( action, error );
+};
+
 registerHandlers( 'state/data-layer/wpcom/read/streams/index.js', {
 	[ READER_STREAMS_PAGE_REQUEST ]: [
 		dispatchRequest( {
 			fetch: requestPage,
 			onSuccess: handlePage,
-			onError: noop,
+			onError: handleError,
 		} ),
 	],
 	[ READER_STREAMS_PAGINATED_REQUEST ]: [
 		dispatchRequest( {
 			fetch: requestPage,
 			onSuccess: handlePage,
-			onError: noop,
+			onError: handleError,
 		} ),
 	],
 } );

client/state/reader/action-types.ts

@@ -111,3 +111,4 @@ export const READER_USER_LISTS_REQUEST = 'READER_USER_LISTS_REQUEST';
 export const READER_USER_LISTS_RECEIVE = 'READER_USER_LISTS_RECEIVE';
 export const READER_VIEWING_FULL_POST_SET = 'READER_VIEWING_FULL_POST_SET';
 export const READER_VIEWING_FULL_POST_UNSET = 'READER_VIEWING_FULL_POST_UNSET';
+export const READER_STREAMS_ERROR = 'READER_STREAMS_ERROR';

client/state/reader/streams/actions.js

@@ -11,6 +11,7 @@ import {
 	READER_STREAMS_NEW_POST_RECEIVE,
 	READER_STREAMS_CLEAR,
 	READER_STREAMS_REMOVE_ITEM,
+	READER_STREAMS_ERROR,
 } from 'calypso/state/reader/action-types';
 import { getStream } from 'calypso/state/reader/streams/selectors';
 import 'calypso/state/data-layer/wpcom/read/streams';
@@ -155,3 +156,17 @@ export function requestPaginatedStream( { streamKey, page = 1, perPage = 10, loc
 		},
 	};
 }
+
+/**
+ * Returns an action object to signal that an error was encountered
+ * when following a URL.
+ * @param  {Object} action Original action object
+ * @param  {Object} error Error object
+ * @returns {Object} Action
+ */
+export function receiveStreamError( action, error ) {
+	return {
+		type: READER_STREAMS_ERROR,
+		payload: { streamKey: action.payload.streamKey, error },
+	};
+}

client/state/reader/streams/reducer.js

@@ -13,6 +13,7 @@ import {
 	READER_STREAMS_CLEAR,
 	READER_STREAMS_NEW_POST_RECEIVE,
 	READER_STREAMS_REMOVE_ITEM,
+	READER_STREAMS_ERROR,
 } from 'calypso/state/reader/action-types';
 import { keyedReducer, combineReducers } from 'calypso/state/utils';
 import { combineXPosts } from './utils';
@@ -311,6 +312,19 @@ export const pagination = ( state = { totalItems: 0, totalPages: 0 }, action ) =
 	}
 };
 
+export const error = ( state = null, action ) => {
+	switch ( action.type ) {
+		case READER_STREAMS_ERROR:
+			return action.payload.error;
+		case READER_STREAMS_CLEAR:
+		case READER_STREAMS_PAGE_REQUEST:
+		case READER_STREAMS_PAGINATED_REQUEST:
+			return null;
+		default:
+			return state;
+	}
+};
+
 const streamReducer = combineReducers( {
 	items,
 	pendingItems,
@@ -319,6 +333,7 @@ const streamReducer = combineReducers( {
 	isRequesting,
 	pageHandle,
 	pagination,
+	error,
 } );
 
 export default keyedReducer( 'payload.streamKey', streamReducer );

client/state/reader/streams/schema.js

@@ -10,6 +10,7 @@ export default {
 				lastPage: { type: 'boolean' },
 				isRequesting: { type: 'boolean' },
 				pageHandle: { type: 'string' },
+				error: { type: 'object' },
 			},
 			additionalProperties: false,
 		},

client/state/reader/streams/test/reducer.js

@@ -8,6 +8,8 @@ import {
 	selectNextItem,
 	selectPrevItem,
 	requestPage,
+	receiveStreamError,
+	clearStream,
 } from '../actions';
 import {
 	items,
@@ -16,6 +18,7 @@ import {
 	pageHandle,
 	isRequesting,
 	lastPage,
+	error,
 	PENDING_ITEMS_DEFAULT,
 } from '../reducer';
 
@@ -295,6 +298,34 @@ describe( 'streams.isRequesting', () => {
 	} );
 } );
 
+describe( 'streams.error', () => {
+	it( 'should default to null', () => {
+		expect( error( undefined, {} ) ).toBe( null );
+	} );
+
+	it( 'should return the error', () => {
+		const action = receiveStreamError(
+			{ payload: { streamKey: 'following' } },
+			new Error( 'test error' )
+		);
+		expect( error( undefined, action ) ).toEqual( new Error( 'test error' ) );
+	} );
+
+	it( 'should cleanup the error after a page request', () => {
+		const previousError = new Error( 'test error' );
+		const action = requestPage( { streamKey: 'following' } );
+
+		expect( error( previousError, action ) ).toBe( null );
+	} );
+
+	it( 'should cleanup the error after a stream is cleared', () => {
+		const previousError = new Error( 'test error' );
+		const action = clearStream( { streamKey: 'following' } );
+
+		expect( error( previousError, action ) ).toBe( null );
+	} );
+} );
+
 describe( 'streams.lastPage', () => {
 	it( 'should default to false', () => {
 		expect( lastPage( undefined, {} ) ).toBe( false );