Skip to content

Commit

Permalink
Fix #569: Show websocket connection error banner (#570)
Browse files Browse the repository at this point in the history
  • Loading branch information
chenilim committed Jun 13, 2021
1 parent e11fb42 commit 5fc5b97
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 2 deletions.
5 changes: 4 additions & 1 deletion webapp/src/octoListener.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ type WSMessage = {
}

type OnChangeHandler = (blocks: IBlock[]) => void
type OnStateChange = (state: 'open' | 'close') => void

//
// OctoListener calls a handler when a block or any of its children changes
Expand Down Expand Up @@ -56,7 +57,7 @@ class OctoListener {
return readToken
}

open(workspaceId: string, blockIds: string[], onChange: OnChangeHandler, onReconnect: () => void): void {
open(workspaceId: string, blockIds: string[], onChange: OnChangeHandler, onReconnect: () => void, onStateChange?: OnStateChange): void {
if (this.ws) {
this.close()
}
Expand All @@ -76,6 +77,7 @@ class OctoListener {
this.authenticate(workspaceId)
this.addBlocks(blockIds)
this.isInitialized = true
onStateChange?.('open')
}

ws.onerror = (e) => {
Expand All @@ -88,6 +90,7 @@ class OctoListener {
// Unexpected close, re-open
const reopenBlockIds = this.isInitialized ? this.blockIds.slice() : blockIds.slice()
Utils.logError(`Unexpected close, re-opening with ${reopenBlockIds.length} blocks...`)
onStateChange?.('close')
setTimeout(() => {
this.open(workspaceId, reopenBlockIds, onChange, onReconnect)
onReconnect()
Expand Down
10 changes: 10 additions & 0 deletions webapp/src/pages/boardPage.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,14 @@
text-align: center;
padding: 10px;
}

> .banner {
background-color: rgba(230, 220, 192, 0.9);
text-align: center;
padding: 10px;
}

> .banner.error {
background-color: rgba(230, 192, 192, 0.9);
}
}
41 changes: 40 additions & 1 deletion webapp/src/pages/boardPage.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import {injectIntl, IntlShape} from 'react-intl'
import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
import {withRouter, RouteComponentProps} from 'react-router-dom'
import HotKeys from 'react-hot-keys'

Expand Down Expand Up @@ -29,6 +29,8 @@ type State = {
workspaceTree: WorkspaceTree
boardTree?: BoardTree
syncFailed?: boolean
websocketClosedTimeOutId?: ReturnType<typeof setTimeout>
websocketClosed?: boolean
}

class BoardPage extends React.Component<Props, State> {
Expand Down Expand Up @@ -163,6 +165,21 @@ class BoardPage extends React.Component<Props, State> {
keyName='shift+ctrl+z,shift+cmd+z,ctrl+z,cmd+z'
onKeyDown={this.undoRedoHandler}
/>
{(this.state.websocketClosed) &&
<div className='banner error'>
<a
href='https://www.focalboard.com/fwlink/websocket-connect-error.html'
target='_blank'
rel='noreferrer'
>
<FormattedMessage
id='Error.websocket-closed'
defaultMessage='Websocket connection closed, connection interrupted. If this persists, check your server or web proxy configuration.'
/>
</a>
</div>
}

<Workspace
workspace={workspace}
workspaceTree={workspaceTree}
Expand Down Expand Up @@ -235,6 +252,28 @@ class BoardPage extends React.Component<Props, State> {
Utils.log('workspaceListener.onReconnect')
this.sync()
},
(state) => {
switch (state) {
case 'close': {
// Show error after a delay to ignore brief interruptions
if (!this.state.websocketClosed && !this.state.websocketClosedTimeOutId) {
const timeoutId = setTimeout(() => {
this.setState({websocketClosed: true, websocketClosedTimeOutId: undefined})
}, 5000)
this.setState({websocketClosedTimeOutId: timeoutId})
}
break
}
case 'open': {
if (this.state.websocketClosedTimeOutId) {
clearTimeout(this.state.websocketClosedTimeOutId)
}
this.setState({websocketClosed: false, websocketClosedTimeOutId: undefined})
Utils.log('Connection established')
break
}
}
},
)

if (boardId) {
Expand Down

0 comments on commit 5fc5b97

Please sign in to comment.