From 060066ceeeafe31e16308b890a971ce01230f938 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Sun, 3 Dec 2017 19:18:22 -0800
Subject: [PATCH] More detailed error boundary for Document

---
 .../CenteredContent/CenteredContent.js        |   2 +-
 app/components/ErrorBoundary/ErrorBoundary.js |  13 +-
 app/scenes/Document/Document.js               | 139 +++++++++---------
 3 files changed, 83 insertions(+), 71 deletions(-)

diff --git a/app/components/CenteredContent/CenteredContent.js b/app/components/CenteredContent/CenteredContent.js
index bcfaedb8..b3736f6c 100644
--- a/app/components/CenteredContent/CenteredContent.js
+++ b/app/components/CenteredContent/CenteredContent.js
@@ -8,7 +8,7 @@ type Props = {
 
 const Container = styled.div`
   width: 100%;
-  margin: 60px;
+  padding: 60px;
 `;
 
 const Content = styled.div`
diff --git a/app/components/ErrorBoundary/ErrorBoundary.js b/app/components/ErrorBoundary/ErrorBoundary.js
index 7577017a..02bbc518 100644
--- a/app/components/ErrorBoundary/ErrorBoundary.js
+++ b/app/components/ErrorBoundary/ErrorBoundary.js
@@ -9,6 +9,14 @@ import PageTitle from 'components/PageTitle';
 class ErrorBoundary extends Component {
   @observable error: boolean = false;
 
+  componentWillReceiveProps(nextProps: Object) {
+    if (
+      (this.props.location || nextProps.location) &&
+      this.props.location.pathname !== nextProps.location.pathname
+    )
+      this.error = false;
+  }
+
   componentDidCatch(error: Error, info: Object) {
     this.error = true;
 
@@ -27,9 +35,10 @@ class ErrorBoundary extends Component {
       return (
         <CenteredContent>
           <PageTitle title="Something went wrong" />
-          <h1>Something went wrong</h1>
+          <h1>🛸 Something unexpected happened</h1>
           <p>
-            An unrecoverable error occurred. Please try{' '}
+            An unrecoverable error occurred{window.Bugsnag ||
+              (true && ' and our engineers have been notified')}. Please try{' '}
             <a onClick={this.handleReload}>reloading</a>.
           </p>
         </CenteredContent>
diff --git a/app/scenes/Document/Document.js b/app/scenes/Document/Document.js
index 7aa08b9c..af22e553 100644
--- a/app/scenes/Document/Document.js
+++ b/app/scenes/Document/Document.js
@@ -33,6 +33,7 @@ import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
 import NewDocumentIcon from 'components/Icon/NewDocumentIcon';
 import Actions, { Action, Separator } from 'components/Actions';
+import ErrorBoundary from 'components/ErrorBoundary';
 import Search from 'scenes/Search';
 
 const DISCARD_CHANGES = `
@@ -216,75 +217,77 @@ class DocumentScene extends Component {
 
     return (
       <Container column auto>
-        {isMoving && document && <DocumentMove document={document} />}
-        {titleText && <PageTitle title={titleText} />}
-        {(this.isLoading || this.isSaving) && <LoadingIndicator />}
-        {isFetching && (
-          <CenteredContent>
-            <LoadingState />
-          </CenteredContent>
-        )}
-        {!isFetching &&
-          document && (
-            <Flex justify="center" auto>
-              <Prompt
-                when={document.hasPendingChanges}
-                message={DISCARD_CHANGES}
-              />
-              <Editor
-                key={`${document.id}-${document.revision}`}
-                text={document.text}
-                emoji={document.emoji}
-                onImageUploadStart={this.onImageUploadStart}
-                onImageUploadStop={this.onImageUploadStop}
-                onChange={this.onChange}
-                onSave={this.onSave}
-                onCancel={this.onDiscard}
-                readOnly={!this.isEditing}
-              />
-              <Actions
-                align="center"
-                justify="flex-end"
-                readOnly={!this.isEditing}
-              >
-                {!isNew &&
-                  !this.isEditing && <Collaborators document={document} />}
-                <Action>
-                  {this.isEditing ? (
-                    <SaveAction
-                      isSaving={this.isSaving}
-                      onClick={this.onSave.bind(this, true)}
-                      disabled={
-                        !(this.document && this.document.allowSave) ||
-                        this.isSaving
-                      }
-                      isNew={!!isNew}
-                    />
-                  ) : (
-                    <a onClick={this.onClickEdit}>Edit</a>
-                  )}
-                </Action>
-                {this.isEditing && (
-                  <Action>
-                    <a onClick={this.onDiscard}>Discard</a>
-                  </Action>
-                )}
-                {!this.isEditing && (
-                  <Action>
-                    <DocumentMenu document={document} />
-                  </Action>
-                )}
-                {!this.isEditing && <Separator />}
-                <Action>
-                  {!this.isEditing && (
-                    <a onClick={this.onClickNew}>
-                      <NewDocumentIcon />
-                    </a>
-                  )}
-                </Action>
-              </Actions>
-            </Flex>
+        <ErrorBoundary location={this.props.location}>
+          {isMoving && document && <DocumentMove document={document} />}
+          {titleText && <PageTitle title={titleText} />}
+          {(this.isLoading || this.isSaving) && <LoadingIndicator />}
+          {isFetching && (
+            <CenteredContent>
+              <LoadingState />
+            </CenteredContent>
           )}
+          {!isFetching &&
+            document && (
+              <Flex justify="center" auto>
+                <Prompt
+                  when={document.hasPendingChanges}
+                  message={DISCARD_CHANGES}
+                />
+                <Editor
+                  key={`${document.id}-${document.revision}`}
+                  text={document.text}
+                  emoji={document.emoji}
+                  onImageUploadStart={this.onImageUploadStart}
+                  onImageUploadStop={this.onImageUploadStop}
+                  onChange={this.onChange}
+                  onSave={this.onSave}
+                  onCancel={this.onDiscard}
+                  readOnly={!this.isEditing}
+                />
+                <Actions
+                  align="center"
+                  justify="flex-end"
+                  readOnly={!this.isEditing}
+                >
+                  {!isNew &&
+                    !this.isEditing && <Collaborators document={document} />}
+                  <Action>
+                    {this.isEditing ? (
+                      <SaveAction
+                        isSaving={this.isSaving}
+                        onClick={this.onSave.bind(this, true)}
+                        disabled={
+                          !(this.document && this.document.allowSave) ||
+                          this.isSaving
+                        }
+                        isNew={!!isNew}
+                      />
+                    ) : (
+                      <a onClick={this.onClickEdit}>Edit</a>
+                    )}
+                  </Action>
+                  {this.isEditing && (
+                    <Action>
+                      <a onClick={this.onDiscard}>Discard</a>
+                    </Action>
+                  )}
+                  {!this.isEditing && (
+                    <Action>
+                      <DocumentMenu document={document} />
+                    </Action>
+                  )}
+                  {!this.isEditing && <Separator />}
+                  <Action>
+                    {!this.isEditing && (
+                      <a onClick={this.onClickNew}>
+                        <NewDocumentIcon />
+                      </a>
+                    )}
+                  </Action>
+                </Actions>
+              </Flex>
+            )}
+        </ErrorBoundary>
       </Container>
     );
   }