From 3302469a2b4368500d20840a1f101781b5ef3711 Mon Sep 17 00:00:00 2001 From: Zoe Date: Mon, 24 Feb 2020 18:04:11 +0000 Subject: [PATCH 1/5] Catch errors sooner so users can recover more easily --- res/css/views/rooms/_EventTile.scss | 14 ++++ src/components/structures/MessagePanel.js | 76 ++++++++++--------- .../views/messages/TileErrorBoundary.js | 70 +++++++++++++++++ src/i18n/strings/en_EN.json | 1 + 4 files changed, 126 insertions(+), 35 deletions(-) create mode 100644 src/components/views/messages/TileErrorBoundary.js diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index d292c729dd..68aca63459 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -653,3 +653,17 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { } } } + +.mx_EventTile_tileError { + color: red; + + .mx_EventTile_line span { + padding: 4px 8px; + border-radius: 11px; + box-shadow: 0px 0px 3px red inset; + } + + a { + margin-left: 1em; + } +} \ No newline at end of file diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js index b8b11fbb31..e6f8de61a9 100644 --- a/src/components/structures/MessagePanel.js +++ b/src/components/structures/MessagePanel.js @@ -502,6 +502,7 @@ export default class MessagePanel extends React.Component { } _getTilesForEvent(prevEvent, mxEv, last) { + const TileErrorBoundary = sdk.getComponent('messages.TileErrorBoundary'); const EventTile = sdk.getComponent('rooms.EventTile'); const DateSeparator = sdk.getComponent('messages.DateSeparator'); const ret = []; @@ -575,25 +576,27 @@ export default class MessagePanel extends React.Component { ref={this._collectEventNode.bind(this, eventId)} data-scroll-tokens={scrollToken} > - + + + , ); @@ -755,6 +758,7 @@ export default class MessagePanel extends React.Component { } render() { + const ErrorBoundary = sdk.getComponent('elements.ErrorBoundary'); const ScrollPanel = sdk.getComponent("structures.ScrollPanel"); const WhoIsTypingTile = sdk.getComponent("rooms.WhoIsTypingTile"); const Spinner = sdk.getComponent("elements.Spinner"); @@ -787,22 +791,24 @@ export default class MessagePanel extends React.Component { } return ( - - { topSpinner } - { this._getEventTiles() } - { whoIsTyping } - { bottomSpinner } - + + + { topSpinner } + { this._getEventTiles() } + { whoIsTyping } + { bottomSpinner } + + ); } } diff --git a/src/components/views/messages/TileErrorBoundary.js b/src/components/views/messages/TileErrorBoundary.js new file mode 100644 index 0000000000..372d402899 --- /dev/null +++ b/src/components/views/messages/TileErrorBoundary.js @@ -0,0 +1,70 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from 'react'; +import classNames from 'classnames'; +import { _t } from '../../../languageHandler'; +import * as sdk from '../../../index'; +import Modal from '../../../Modal'; + +export default class TileErrorBoundary extends React.Component { + constructor(props) { + super(props); + + this.state = { + error: null, + }; + } + + static getDerivedStateFromError(error) { + // Side effects are not permitted here, so we only update the state so + // that the next render shows an error message. + return { error }; + } + + _onBugReport = () => { + const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog"); + if (!BugReportDialog) { + return; + } + Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, { + label: 'react-soft-crash-tile', + }); + }; + + render() { + if (this.state.error) { + const classes = { + mx_EventTile: true, + mx_EventTile_info: true, + mx_EventTile_content: true, + mx_EventTile_tileError: true, + }; + return (
+
+ + {_t("An error occurred while rendering this event.")} + + {_t("Submit debug logs")} + + +
+
); + } + + return this.props.children; + } +} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 1d030f5118..adce7f9a03 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1268,6 +1268,7 @@ "You are about to be taken to a third-party site so you can authenticate your account for use with %(integrationsUrl)s. Do you wish to continue?": "You are about to be taken to a third-party site so you can authenticate your account for use with %(integrationsUrl)s. Do you wish to continue?", "Edited at %(date)s. Click to view edits.": "Edited at %(date)s. Click to view edits.", "edited": "edited", + "An error occurred while rendering this event.": "An error occurred while rendering this event.", "Removed or unknown message type": "Removed or unknown message type", "Message removed by %(userId)s": "Message removed by %(userId)s", "Message removed": "Message removed", From 0d03a8791dc6ba1cdb7ec7dd1e0290f09fcc0b7f Mon Sep 17 00:00:00 2001 From: Zoe Date: Tue, 25 Feb 2020 10:20:42 +0000 Subject: [PATCH 2/5] style lint --- res/css/views/rooms/_EventTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 68aca63459..9e683c5fe4 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -666,4 +666,4 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { a { margin-left: 1em; } -} \ No newline at end of file +} From adf6dfe4ea831e08730485f85147d9805f711aa8 Mon Sep 17 00:00:00 2001 From: Zoe Date: Tue, 25 Feb 2020 10:30:35 +0000 Subject: [PATCH 3/5] Threaded through the event type to the user --- src/components/structures/MessagePanel.js | 2 +- src/components/views/messages/TileErrorBoundary.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js index e6f8de61a9..d35b0fce1f 100644 --- a/src/components/structures/MessagePanel.js +++ b/src/components/structures/MessagePanel.js @@ -576,7 +576,7 @@ export default class MessagePanel extends React.Component { ref={this._collectEventNode.bind(this, eventId)} data-scroll-tokens={scrollToken} > - + {_t("An error occurred while rendering this event.")} + { mxEvent && ` [${mxEvent.getType()}]` } {_t("Submit debug logs")} From 04849f7f0d91ed9bee30db744d8397cf9e835800 Mon Sep 17 00:00:00 2001 From: Zoe Date: Thu, 26 Mar 2020 13:47:32 +0000 Subject: [PATCH 4/5] incorporated design feedback --- res/css/views/rooms/_EventTile.scss | 3 +-- src/components/views/messages/TileErrorBoundary.js | 6 +++--- src/i18n/strings/en_EN.json | 3 ++- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 2f89c96d57..59f82808dc 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -661,11 +661,10 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { .mx_EventTile_tileError { color: red; + text-align: center; .mx_EventTile_line span { padding: 4px 8px; - border-radius: 11px; - box-shadow: 0px 0px 3px red inset; } a { diff --git a/src/components/views/messages/TileErrorBoundary.js b/src/components/views/messages/TileErrorBoundary.js index a8e7b144f2..e42ddab16a 100644 --- a/src/components/views/messages/TileErrorBoundary.js +++ b/src/components/views/messages/TileErrorBoundary.js @@ -57,10 +57,10 @@ export default class TileErrorBoundary extends React.Component { return (
- {_t("An error occurred while rendering this event.")} - { mxEvent && ` [${mxEvent.getType()}]` } + {_t("Can't load this message")} + { mxEvent && ` (${mxEvent.getType()})` } - {_t("Submit debug logs")} + {_t("Submit logs")}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index cf170fce62..40b1cab99d 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1294,7 +1294,8 @@ "You are about to be taken to a third-party site so you can authenticate your account for use with %(integrationsUrl)s. Do you wish to continue?": "You are about to be taken to a third-party site so you can authenticate your account for use with %(integrationsUrl)s. Do you wish to continue?", "Edited at %(date)s. Click to view edits.": "Edited at %(date)s. Click to view edits.", "edited": "edited", - "An error occurred while rendering this event.": "An error occurred while rendering this event.", + "Can't load this message": "Can't load this message", + "Submit logs": "Submit logs", "Removed or unknown message type": "Removed or unknown message type", "Message removed by %(userId)s": "Message removed by %(userId)s", "Message removed": "Message removed", From 1395cb02edaab4f9f589814cc58e79cdc261ab1d Mon Sep 17 00:00:00 2001 From: Zoe Date: Mon, 6 Apr 2020 11:44:46 +0100 Subject: [PATCH 5/5] Fixup alignment --- res/css/views/rooms/_EventTile.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 0f324cc082..3c91089dc9 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -665,6 +665,13 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { color: red; text-align: center; + // Remove some of the default tile padding so that the error is centered + margin-right: 0; + .mx_EventTile_line { + padding-left: 0; + margin-right: 0; + } + .mx_EventTile_line span { padding: 4px 8px; }