This repository has been archived by the owner on Sep 11, 2024. It is now read-only.
Better error handling in jump to date #10405
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -18,16 +18,19 @@ limitations under the License. | |
| import React from "react"; | ||
| import { Direction } from "matrix-js-sdk/src/models/event-timeline"; | ||
| import { logger } from "matrix-js-sdk/src/logger"; | ||
| import { ConnectionError, MatrixError, HTTPError } from "matrix-js-sdk/src/http-api"; | ||
|
|
||
| import { _t } from "../../../languageHandler"; | ||
| import { formatFullDateNoDay, formatFullDateNoTime } from "../../../DateUtils"; | ||
| import { MatrixClientPeg } from "../../../MatrixClientPeg"; | ||
| import dispatcher from "../../../dispatcher/dispatcher"; | ||
| import { Action } from "../../../dispatcher/actions"; | ||
| import SettingsStore from "../../../settings/SettingsStore"; | ||
| import { UIFeature } from "../../../settings/UIFeature"; | ||
| import Modal from "../../../Modal"; | ||
| import ErrorDialog from "../dialogs/ErrorDialog"; | ||
| import BugReportDialog from "../dialogs/BugReportDialog"; | ||
| import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; | ||
| import { contextMenuBelow } from "../rooms/RoomTile"; | ||
| import { ContextMenuTooltipButton } from "../../structures/ContextMenu"; | ||
| import IconizedContextMenu, { | ||
|
|
@@ -36,6 +39,7 @@ import IconizedContextMenu, { | |
| } from "../context_menus/IconizedContextMenu"; | ||
| import JumpToDatePicker from "./JumpToDatePicker"; | ||
| import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; | ||
| import { SdkContextClass } from "../../../contexts/SDKContext"; | ||
|
|
||
| function getDaysArray(): string[] { | ||
| return [_t("Sunday"), _t("Monday"), _t("Tuesday"), _t("Wednesday"), _t("Thursday"), _t("Friday"), _t("Saturday")]; | ||
|
|
@@ -76,7 +80,7 @@ export default class DateSeparator extends React.Component<IProps, IState> { | |
| if (this.settingWatcherRef) SettingsStore.unwatchSetting(this.settingWatcherRef); | ||
| } | ||
|
|
||
| private onContextMenuOpenClick = (e: ButtonEvent): void => { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| const target = e.target as HTMLButtonElement; | ||
|
|
@@ -118,12 +122,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; | ||
|
|
||
| try { | ||
| const cli = MatrixClientPeg.get(); | ||
| const { event_id: eventId, origin_server_ts: originServerTs } = await cli.timestampToEvent( | ||
| roomIdForJumpRequest, | ||
| unixTimestamp, | ||
| Direction.Forward, | ||
| ); | ||
|
|
@@ -132,28 +136,113 @@ export default class DateSeparator extends React.Component<IProps, IState> { | |
| `found ${eventId} (${originServerTs}) for timestamp=${unixTimestamp} (looking forward)`, | ||
| ); | ||
|
|
||
|
Comment on lines
-144
to
-146
There was a problem hiding this comment. This previous comment was bogus. Just copy/paste cruft from matrix-react-sdk/src/components/views/dialogs/ConfirmRedactDialog.tsx Lines 96 to 98 in bc60e59 |
||
| // 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 currentRoomId = SdkContextClass.instance.roomViewStore.getRoomId(); | ||
| if (currentRoomId === roomIdForJumpRequest) { | ||
| dispatcher.dispatch<ViewRoomPayload>({ | ||
| action: Action.ViewRoom, | ||
| event_id: eventId, | ||
| highlighted: true, | ||
| room_id: roomIdForJumpRequest, | ||
| metricsTrigger: undefined, // room doesn't change | ||
| }); | ||
| } else { | ||
| logger.debug( | ||
| `No longer navigating to date in room (jump to date) because the user already switched ` + | ||
| `to another room: currentRoomId=${currentRoomId}, roomIdForJumpRequest=${roomIdForJumpRequest}`, | ||
| ); | ||
| } | ||
| } 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 currentRoomId = SdkContextClass.instance.roomViewStore.getRoomId(); | ||
| if (currentRoomId === roomIdForJumpRequest) { | ||
| let friendlyErrorMessage = "An error occured while trying to find and jump to the given date."; | ||
| let submitDebugLogsContent: JSX.Element = <></>; | ||
| if (err instanceof ConnectionError) { | ||
| friendlyErrorMessage = _t( | ||
| "A network error occurred while trying to find and jump to the given date. " + | ||
| "Your homeserver might be down or there was just a temporary problem with " + | ||
| "your internet connection. Please try again. If this continues, please " + | ||
| "contact your homeserver administrator.", | ||
| ); | ||
| } else if (err instanceof MatrixError) { | ||
| if (err?.errcode === "M_NOT_FOUND") { | ||
| friendlyErrorMessage = _t( | ||
| "We were unable to find an event looking forwards from %(dateString)s. " + | ||
MadLittleMods marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| "Try choosing an earlier date.", | ||
| { dateString: formatFullDateNoDay(new Date(unixTimestamp)) }, | ||
| ); | ||
| } else { | ||
| friendlyErrorMessage = _t("Server returned %(statusCode)s with error code %(errorCode)s", { | ||
| statusCode: err?.httpStatus || _t("unknown status code"), | ||
| errorCode: err?.errcode || _t("unavailable"), | ||
| }); | ||
| } | ||
| } else if (err instanceof HTTPError) { | ||
| friendlyErrorMessage = err.message; | ||
| } else { | ||
| // We only give the option to submit logs for actual errors, not network problems. | ||
| submitDebugLogsContent = ( | ||
| <p> | ||
| {_t( | ||
| "Please submit <debugLogsLink>debug logs</debugLogsLink> to help us " + | ||
| "track down the problem.", | ||
| {}, | ||
| { | ||
| debugLogsLink: (sub) => ( | ||
| <AccessibleButton | ||
| // This is by default a `<div>` which we | ||
| // can't nest within a `<p>` here so update | ||
| // this to a be a inline anchor element. | ||
| element="a" | ||
| kind="link" | ||
| onClick={() => this.onBugReport(err instanceof Error ? err : undefined)} | ||
| data-testid="jump-to-date-error-submit-debug-logs-button" | ||
| > | ||
| {sub} | ||
| </AccessibleButton> | ||
| ), | ||
| }, | ||
| )} | ||
| </p> | ||
| ); | ||
| } | ||
|
|
||
| Modal.createDialog(ErrorDialog, { | ||
|
There was a problem hiding this comment. I don't know how to fix this TypeScript error: Same pattern we use everywhere else in the codebase so I don't know of a better example to work from either. There was a problem hiding this comment. @alunturner Any tips on how to fix this error? There was a problem hiding this comment. I'm afraid I think I've probably done the same as you and checked the other uses of this, seeing that they all have the same issue. The problem must lie in There was a problem hiding this comment. I've created an issue to track this element-hq/element-web#24899 I guess we will just go with an exception here and worry about the problem generally in a separate PR down the line. |
||
| title: _t("Unable to find event at that date"), | ||
| description: ( | ||
| <div data-testid="jump-to-date-error-content"> | ||
| <p>{friendlyErrorMessage}</p> | ||
| {submitDebugLogsContent} | ||
| <details> | ||
| <summary>{_t("Error details")}</summary> | ||
| <p>{String(err)}</p> | ||
| </details> | ||
| </div> | ||
| ), | ||
| }); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| private onBugReport = (err?: Error): void => { | ||
| Modal.createDialog(BugReportDialog, { | ||
| error: err, | ||
| initialText: "Error occured while using jump to date #jump-to-date", | ||
| }); | ||
| }; | ||
|
|
||
| private onLastWeekClicked = (): void => { | ||
| const date = new Date(); | ||
| date.setDate(date.getDate() - 7); | ||
|
|
@@ -189,11 +278,20 @@ export default class DateSeparator extends React.Component<IProps, IState> { | |
| onFinished={this.onContextMenuCloseClick} | ||
| > | ||
| <IconizedContextMenuOptionList first> | ||
| <IconizedContextMenuOption | ||
| label={_t("Last week")} | ||
| onClick={this.onLastWeekClicked} | ||
| data-testid="jump-to-date-last-week" | ||
| /> | ||
| <IconizedContextMenuOption | ||
| label={_t("Last month")} | ||
| onClick={this.onLastMonthClicked} | ||
| data-testid="jump-to-date-last-month" | ||
| /> | ||
| <IconizedContextMenuOption | ||
| label={_t("The beginning of the room")} | ||
| onClick={this.onTheBeginningClicked} | ||
| data-testid="jump-to-date-beginning" | ||
| /> | ||
| </IconizedContextMenuOptionList> | ||
|
|
||
|
|
@@ -207,6 +305,7 @@ export default class DateSeparator extends React.Component<IProps, IState> { | |
| return ( | ||
| <ContextMenuTooltipButton | ||
| className="mx_DateSeparator_jumpToDateMenu mx_DateSeparator_dateContent" | ||
| data-testid="jump-to-date-separator-button" | ||
| onClick={this.onContextMenuOpenClick} | ||
| isExpanded={!!this.state.contextMenuPosition} | ||
| title={_t("Jump to date")} | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Returning a boolean so we can keep looping until all modals are closed. See
clearAllModals