OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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.
pull/21833/head
J. Ryan Stinnett 2019-10-02 17:28:03 +01:00
parent 0e8dc24c3f
commit b605c0048d
1 changed files with 73 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/structures/RoomView.js
View File

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