Add an error boundary around the RoomView

This adds a more specific boundary around the `RoomView` for room-specific
errors and is an example how we could use add boundaries around just a portion
of the app.
This commit is contained in:
J. Ryan Stinnett 2019-10-02 17:28:03 +01:00
parent 0e8dc24c3f
commit b605c0048d

View file

@ -1566,12 +1566,14 @@ module.exports = createReactClass({
const TimelinePanel = sdk.getComponent("structures.TimelinePanel");
const RoomUpgradeWarningBar = sdk.getComponent("rooms.RoomUpgradeWarningBar");
const RoomRecoveryReminder = sdk.getComponent("rooms.RoomRecoveryReminder");
const ErrorBoundary = sdk.getComponent("elements.ErrorBoundary");
if (!this.state.room) {
const loading = this.state.roomLoading || this.state.peekLoading;
if (loading) {
return (
<div className="mx_RoomView">
<ErrorBoundary>
<RoomPreviewBar
canPreview={false}
previewLoading={this.state.peekLoading}
@ -1580,6 +1582,7 @@ module.exports = createReactClass({
joining={this.state.joining}
oobData={this.props.oobData}
/>
</ErrorBoundary>
</div>
);
} else {
@ -1597,6 +1600,7 @@ module.exports = createReactClass({
const roomAlias = this.state.roomAlias;
return (
<div className="mx_RoomView">
<ErrorBoundary>
<RoomPreviewBar onJoinClick={this.onJoinButtonClicked}
onForgetClick={this.onForgetClick}
onRejectClick={this.onRejectThreepidInviteButtonClicked}
@ -1609,6 +1613,7 @@ module.exports = createReactClass({
signUrl={this.props.thirdPartyInvite ? this.props.thirdPartyInvite.inviteSignUrl : null}
room={this.state.room}
/>
</ErrorBoundary>
</div>
);
}
@ -1618,12 +1623,14 @@ module.exports = createReactClass({
if (myMembership == 'invite') {
if (this.state.joining || this.state.rejecting) {
return (
<ErrorBoundary>
<RoomPreviewBar
canPreview={false}
error={this.state.roomLoadError}
joining={this.state.joining}
rejecting={this.state.rejecting}
/>
</ErrorBoundary>
);
} else {
const myUserId = MatrixClientPeg.get().credentials.userId;
@ -1638,6 +1645,7 @@ module.exports = createReactClass({
// We have a regular invite for this room.
return (
<div className="mx_RoomView">
<ErrorBoundary>
<RoomPreviewBar onJoinClick={this.onJoinButtonClicked}
onForgetClick={this.onForgetClick}
onRejectClick={this.onRejectButtonClicked}
@ -1646,6 +1654,7 @@ module.exports = createReactClass({
joining={this.state.joining}
room={this.state.room}
/>
</ErrorBoundary>
</div>
);
}
@ -1942,6 +1951,7 @@ module.exports = createReactClass({
return (
<main className={"mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "")} ref="roomView">
<ErrorBoundary>
<RoomHeader ref="header" room={this.state.room} searchInfo={searchInfo}
oobData={this.props.oobData}
inRoom={myMembership === 'join'}
@ -1977,6 +1987,7 @@ module.exports = createReactClass({
{messageComposer}
</div>
</MainSplit>
</ErrorBoundary>
</main>
);
},