Catch errors around document rendering

This commit is contained in:
Tom Moor
2018-08-04 10:48:07 -07:00
parent 43bf47fa62
commit 892ce64712
5 changed files with 119 additions and 107 deletions

View File

@@ -27,6 +27,7 @@ import DocumentMove from './components/DocumentMove';
import UiStore from 'stores/UiStore';
import AuthStore from 'stores/AuthStore';
import DocumentsStore from 'stores/DocumentsStore';
import ErrorBoundary from 'components/ErrorBoundary';
import LoadingPlaceholder from 'components/LoadingPlaceholder';
import LoadingIndicator from 'components/LoadingIndicator';
import CenteredContent from 'components/CenteredContent';
@@ -286,57 +287,59 @@ class DocumentScene extends React.Component<Props> {
}
return (
<Container key={document.id} isShare={isShare} column auto>
{isMoving && <DocumentMove document={document} />}
<PageTitle
title={document.title.replace(document.emoji, '')}
favicon={document.emoji ? emojiToUrl(document.emoji) : undefined}
/>
{(this.isUploading || this.isSaving) && <LoadingIndicator />}
<ErrorBoundary>
<Container key={document.id} isShare={isShare} column auto>
{isMoving && <DocumentMove document={document} />}
<PageTitle
title={document.title.replace(document.emoji, '')}
favicon={document.emoji ? emojiToUrl(document.emoji) : undefined}
/>
{(this.isUploading || this.isSaving) && <LoadingIndicator />}
<Container justify="center" column auto>
{this.isEditing && (
<React.Fragment>
<Prompt
when={document.hasPendingChanges}
message={DISCARD_CHANGES}
<Container justify="center" column auto>
{this.isEditing && (
<React.Fragment>
<Prompt
when={document.hasPendingChanges}
message={DISCARD_CHANGES}
/>
<Prompt when={this.isUploading} message={UPLOADING_WARNING} />
</React.Fragment>
)}
{!isShare && (
<Header
document={document}
isDraft={!document.publishedAt}
isEditing={this.isEditing}
isSaving={this.isSaving}
isPublishing={this.isPublishing}
savingIsDisabled={!document.allowSave}
history={this.props.history}
onDiscard={this.onDiscard}
onSave={this.onSave}
/>
<Prompt when={this.isUploading} message={UPLOADING_WARNING} />
</React.Fragment>
)}
{!isShare && (
<Header
document={document}
isDraft={!document.publishedAt}
isEditing={this.isEditing}
isSaving={this.isSaving}
isPublishing={this.isPublishing}
savingIsDisabled={!document.allowSave}
history={this.props.history}
onDiscard={this.onDiscard}
onSave={this.onSave}
/>
)}
<MaxWidth column auto>
<Editor
titlePlaceholder="Start with a title…"
bodyPlaceholder="…the rest is your canvas"
defaultValue={document.text}
pretitle={document.emoji}
uploadImage={this.onUploadImage}
onImageUploadStart={this.onImageUploadStart}
onImageUploadStop={this.onImageUploadStop}
onSearchLink={this.onSearchLink}
onClickLink={this.onClickLink}
onChange={this.onChange}
onSave={this.onSave}
onCancel={this.onDiscard}
readOnly={!this.isEditing}
toc
/>
</MaxWidth>
)}
<MaxWidth column auto>
<Editor
titlePlaceholder="Start with a title…"
bodyPlaceholder="…the rest is your canvas"
defaultValue={document.text}
pretitle={document.emoji}
uploadImage={this.onUploadImage}
onImageUploadStart={this.onImageUploadStart}
onImageUploadStop={this.onImageUploadStop}
onSearchLink={this.onSearchLink}
onClickLink={this.onClickLink}
onChange={this.onChange}
onSave={this.onSave}
onCancel={this.onDiscard}
readOnly={!this.isEditing}
toc
/>
</MaxWidth>
</Container>
</Container>
</Container>
</ErrorBoundary>
);
}
}