Add a way to submit debug logs for actual errors

Inspired by #8354

Author: MadLittleMods

src/components/views/messages/DateSeparator.tsx

@@ -28,6 +28,8 @@ 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 from "../elements/AccessibleButton";
 import { contextMenuBelow } from "../rooms/RoomTile";
 import { ContextMenuTooltipButton } from "../../structures/ContextMenu";
 import IconizedContextMenu, {
@@ -160,17 +162,43 @@ export default class DateSeparator extends React.Component<IProps, IState> {
             const roomIdBeforeDisplayingError = SdkContextClass.instance.roomViewStore.getRoomId();
             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)) },
-                    );
-                }
+                let submitDebugLogsContent: JSX.Element = <></>;
                 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.",
+                    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)) },
+                        );
+                    } else {
+                        friendlyErrorMessage = _t(
+                            "A network error occurred while trying to find and jump to the given date. " +
+                                "Your homeserver might be down or was just a temporary problem with your " +
+                                "internet connection. Please try again. If this continues, please " +
+                                "contact your homeserver administrator.",
+                        );
+                    }
+                } 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
+                                            kind="link"
+                                            onClick={() => this.onBugReport(err)}
+                                            data-testid="jump-to-date-error-submit-debug-logs-button"
+                                        >
+                                            {sub}
+                                        </AccessibleButton>
+                                    ),
+                                },
+                            )}
+                        </p>
                     );
                 }
 
@@ -179,6 +207,7 @@ export default class DateSeparator extends React.Component<IProps, IState> {
                     description: (
                         <>
                             <p>{friendlyErrorMessage}</p>
+                            {submitDebugLogsContent}
                             <details>
                                 <summary>{_t("Error details")}</summary>
 
@@ -203,6 +232,13 @@ export default class DateSeparator extends React.Component<IProps, IState> {
         }
     };
 
+    private onBugReport = (err): 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);

src/i18n/strings/en_EN.json

@@ -2351,9 +2351,12 @@
     "Today": "Today",
     "Yesterday": "Yesterday",
     "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.",
+    "A network error occurred while trying to find and jump to the given date. Your homeserver might be down or was just a temporary problem with your internet connection. Please try again. If this continues, please contact your homeserver administrator.": "A network error occurred while trying to find and jump to the given date. Your homeserver might be down or was just a temporary problem with your internet connection. Please try again. If this continues, please contact your homeserver administrator.",
+    "Please submit <debugLogsLink>debug logs</debugLogsLink> to help us track down the problem.": "Please submit <debugLogsLink>debug logs</debugLogsLink> to help us track down the problem.",
     "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",
+    "HTTP status code not available": "HTTP status code not available",
     "Error code: %(errorCode)s": "Error code: %(errorCode)s",
     "Error code not available": "Error code not available",
     "Last week": "Last week",