Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Wrap EventTile rather than its children in an error boundary #7945

Merged
merged 5 commits into from
Mar 9, 2022
Merged

Wrap EventTile rather than its children in an error boundary #7945

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0ee3041
Wrap EventTile rather than its children in an error boundary
t3chguy Mar 2, 2022
84d9801
Fix types
t3chguy Mar 2, 2022
34084e1
Fix test
t3chguy Mar 2, 2022
0d660fb
Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into…
t3chguy Mar 4, 2022
97f1bc0
Make tests happy
t3chguy Mar 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/components/structures/MessagePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import SettingsStore from '../../settings/SettingsStore';
import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
import { Layout } from "../../settings/enums/Layout";
import { _t } from "../../languageHandler";
import EventTile, { haveTileForEvent, IReadReceiptProps } from "../views/rooms/EventTile";
import EventTile, { EventTileType, haveTileForEvent, IReadReceiptProps } from "../views/rooms/EventTile";
import { hasText } from "../../TextForEvent";
import IRCTimelineProfileResizer from "../views/elements/IRCTimelineProfileResizer";
import DMRoomMap from "../../utils/DMRoomMap";
Expand Down Expand Up @@ -251,7 +251,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
private scrollPanel = createRef<ScrollPanel>();

private readonly showTypingNotificationsWatcherRef: string;
private eventTiles: Record<string, EventTile> = {};
private eventTiles: Record<string, EventTileType> = {};

// A map to allow groupers to maintain consistent keys even if their first event is uprooted due to back-pagination.
public grouperKeyMap = new WeakMap<MatrixEvent, string>();
Expand Down Expand Up @@ -336,7 +336,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
return this.eventTiles[eventId]?.ref?.current;
}

public getTileForEventId(eventId: string): EventTile {
public getTileForEventId(eventId: string): EventTileType {
if (!this.eventTiles) {
return undefined;
}
Expand Down Expand Up @@ -919,7 +919,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
return receiptsByEvent;
}

private collectEventTile = (eventId: string, node: EventTile): void => {
private collectEventTile = (eventId: string, node: EventTileType): void => {
this.eventTiles[eventId] = node;
};

Expand Down
22 changes: 13 additions & 9 deletions src/components/views/rooms/EventTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import React, { createRef, MouseEvent } from 'react';
import React, { createRef, forwardRef, MouseEvent, RefObject } from 'react';
import classNames from "classnames";
import { EventType, MsgType, RelationType } from "matrix-js-sdk/src/@types/event";
import { EventStatus, MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/models/event";
Expand Down Expand Up @@ -356,7 +356,7 @@ interface IState {

// MUST be rendered within a RoomContext with a set timelineRenderingType
@replaceableComponent("views.rooms.EventTile")
export default class EventTile extends React.Component<IProps, IState> {
class EventTile extends React.Component<IProps, IState> {
private suppressReadReceiptAnimation: boolean;
private isListeningForReceipts: boolean;
// TODO: Types
Expand Down Expand Up @@ -1129,7 +1129,7 @@ export default class EventTile extends React.Component<IProps, IState> {
return false;
}

private renderEvent() {
public render() {
const msgtype = this.props.mxEvent.getContent().msgtype;
const eventType = this.props.mxEvent.getType() as EventType;
const {
Expand Down Expand Up @@ -1653,14 +1653,18 @@ export default class EventTile extends React.Component<IProps, IState> {
}
}
}

public render() {
return <TileErrorBoundary mxEvent={this.props.mxEvent} layout={this.props.layout}>
{ this.renderEvent() }
</TileErrorBoundary>;
}
}

// Wrap all event tiles with the tile error boundary so that any throws even during construction are captured
const SafeEventTile = forwardRef((props: IProps, ref: RefObject<EventTile>) => {
return <TileErrorBoundary mxEvent={props.mxEvent} layout={props.layout}>
<EventTile ref={ref} {...props} />
</TileErrorBoundary>;
});

export default SafeEventTile;
export type EventTileType = EventTile;

// XXX this'll eventually be dynamic based on the fields once we have extensible event types
const messageTypes = [EventType.RoomMessage, EventType.Sticker];
function isMessageEvent(ev: MatrixEvent): boolean {
Expand Down