Better error handling in jump to date

src/components/views/messages/DateSeparator.tsx

@@ -20,7 +20,7 @@ import { Direction } from "matrix-js-sdk/src/models/event-timeline";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "../../../languageHandler";
-import { formatFullDateNoTime } from "../../../DateUtils";
+import { formatFullDateNoDay, formatFullDateNoTime } from "../../../DateUtils";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
@@ -118,12 +118,12 @@ export default class DateSeparator extends React.Component<IProps, IState> {
 
     private pickDate = async (inputTimestamp: number | string | Date): Promise<void> => {
         const unixTimestamp = new Date(inputTimestamp).getTime();
+        const roomIdForJumpRequest = this.props.roomId;
 
-        const cli = MatrixClientPeg.get();
         try {
-            const roomId = this.props.roomId;
+            const cli = MatrixClientPeg.get();
             const { event_id: eventId, origin_server_ts: originServerTs } = await cli.timestampToEvent(
-                roomId,
+                roomIdForJumpRequest,
                 unixTimestamp,
                 Direction.Forward,
             );
@@ -132,23 +132,67 @@ export default class DateSeparator extends React.Component<IProps, IState> {
                     `found ${eventId} (${originServerTs}) for timestamp=${unixTimestamp} (looking forward)`,
             );
 
-            dis.dispatch<ViewRoomPayload>({
-                action: Action.ViewRoom,
-                event_id: eventId,
-                highlighted: true,
-                room_id: roomId,
-                metricsTrigger: undefined, // room doesn't change
-            });
-        } catch (e) {
-            const code = e.errcode || e.statusCode;
-            // only show the dialog if failing for something other than a network error
-            // (e.g. no errcode or statusCode) as in that case the redactions end up in the
-            // detached queue and we show the room status bar to allow retry
-            if (typeof code !== "undefined") {
-                // display error message stating you couldn't delete this.
+            // Only try to navigate to the room if the user is still viewing the same
+            // room. We don't want to jump someone back to a room after a slow request
+            // if they've already navigated away to another room.
+            const roomIdBeforeNavigation = this.props.roomId;
+            if (roomIdBeforeNavigation === roomIdForJumpRequest) {
+                dis.dispatch<ViewRoomPayload>({
+                    action: Action.ViewRoom,
+                    event_id: eventId,
+                    highlighted: true,
+                    room_id: roomIdBeforeNavigation,
+                    metricsTrigger: undefined, // room doesn't change
+                });
+            }
+        } catch (err) {
+            logger.error(
+                `Error occured while trying to find event in ${roomIdForJumpRequest} ` +
+                    `at timestamp=${unixTimestamp}:`,
+                err,
+            );
+
+            // Only display an error if the user is still viewing the same room. We
+            // don't want to worry someone about an error in a room they no longer care
+            // about after a slow request if they've already navigated away to another
+            // room.
+            const roomIdBeforeDisplayingError = this.props.roomId;
+            if (roomIdBeforeDisplayingError === roomIdForJumpRequest) {
+                let friendlyErrorMessage = `An error occured while trying to find and jump to the given date.`;
+                if (err.errcode === "M_NOT_FOUND") {
+                    friendlyErrorMessage = _t(
+                        "We were unable to find an event looking forwards from %(dateString)s. " +
+                            "Try choosing an earlier date.",
+                        { dateString: formatFullDateNoDay(new Date(unixTimestamp)) },
+                    );
+                }
+                if (err.name === "ConnectionError") {
+                    friendlyErrorMessage = _t(
+                        "Your homeserver was unreachable and was not able to log you in. Please try again. " +
+                            "If this continues, please contact your homeserver administrator.",
+                    );
+                }
+
                 Modal.createDialog(ErrorDialog, {
-                    title: _t("Error"),
-                    description: _t("Unable to find event at that date. (%(code)s)", { code }),
+                    title: _t("Unable to find event at that date"),
+                    description: (
+                        <>
+                            <p>{friendlyErrorMessage}</p>
+                            <details>
+                                <summary>{_t("Error details")}</summary>
+
+                                <ul>
+                                    <li>{_t("Request status code: %(statusCode)s", { statusCode: err.httpStatus })}</li>
+                                    <li>
+                                        {_t("Error code: %(errorCode)s", {
+                                            errorCode: err.errcode || _t("Error code not available"),
+                                        })}
+                                    </li>
+                                </ul>
+                                <p>{String(err)}</p>
+                            </details>
+                        </>
+                    ),
                 });
             }
         }

src/i18n/strings/en_EN.json

@@ -2350,7 +2350,12 @@
     "Saturday": "Saturday",
     "Today": "Today",
     "Yesterday": "Yesterday",
-    "Unable to find event at that date. (%(code)s)": "Unable to find event at that date. (%(code)s)",
+    "We were unable to find an event looking forwards from %(dateString)s. Try choosing an earlier date.": "We were unable to find an event looking forwards from %(dateString)s. Try choosing an earlier date.",
+    "Unable to find event at that date": "Unable to find event at that date",
+    "Error details": "Error details",
+    "Request status code: %(statusCode)s": "Request status code: %(statusCode)s",
+    "Error code: %(errorCode)s": "Error code: %(errorCode)s",
+    "Error code not available": "Error code not available",
     "Last week": "Last week",
     "Last month": "Last month",
     "The beginning of the room": "The beginning of the room",