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 1/4] 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 bcfaedb8f..b3736f6c8 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 7577017a9..02bbc5188 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 7aa08b9cb..af22e5536 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>
     );
   }

From f3e3e6d2ca142824c9f3fe21a7c7a15920219887 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Sun, 3 Dec 2017 19:21:58 -0800
Subject: [PATCH 2/4] props

---
 app/components/ErrorBoundary/ErrorBoundary.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/components/ErrorBoundary/ErrorBoundary.js b/app/components/ErrorBoundary/ErrorBoundary.js
index 02bbc5188..60a380364 100644
--- a/app/components/ErrorBoundary/ErrorBoundary.js
+++ b/app/components/ErrorBoundary/ErrorBoundary.js
@@ -2,16 +2,23 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import { observable } from 'mobx';
+import type { Location } from 'react-router-dom';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
 
+type Props = {
+  location?: Location,
+};
+
 @observer
 class ErrorBoundary extends Component {
+  props: Props;
   @observable error: boolean = false;
 
   componentWillReceiveProps(nextProps: Object) {
     if (
-      (this.props.location || nextProps.location) &&
+      this.props.location &&
+      nextProps.location &&
       this.props.location.pathname !== nextProps.location.pathname
     )
       this.error = false;

From 42d5686182ead5b6a8f8e506e24e3660b79bf499 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Sun, 3 Dec 2017 19:29:04 -0800
Subject: [PATCH 3/4] linting

---
 app/components/ErrorBoundary/ErrorBoundary.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/ErrorBoundary/ErrorBoundary.js b/app/components/ErrorBoundary/ErrorBoundary.js
index 60a380364..162e164f5 100644
--- a/app/components/ErrorBoundary/ErrorBoundary.js
+++ b/app/components/ErrorBoundary/ErrorBoundary.js
@@ -8,6 +8,7 @@ import PageTitle from 'components/PageTitle';
 
 type Props = {
   location?: Location,
+  children?: ?React.Element<any>,
 };
 
 @observer

From 564748cfc0678f2295fa6edc787e329c9bca559c Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Sun, 3 Dec 2017 20:56:45 -0800
Subject: [PATCH 4/4] Use key instead

---
 app/components/ErrorBoundary/ErrorBoundary.js | 11 -----------
 app/scenes/Document/Document.js               |  2 +-
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/app/components/ErrorBoundary/ErrorBoundary.js b/app/components/ErrorBoundary/ErrorBoundary.js
index 162e164f5..f34df8fac 100644
--- a/app/components/ErrorBoundary/ErrorBoundary.js
+++ b/app/components/ErrorBoundary/ErrorBoundary.js
@@ -2,12 +2,10 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import { observable } from 'mobx';
-import type { Location } from 'react-router-dom';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
 
 type Props = {
-  location?: Location,
   children?: ?React.Element<any>,
 };
 
@@ -16,15 +14,6 @@ class ErrorBoundary extends Component {
   props: Props;
   @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;
 
diff --git a/app/scenes/Document/Document.js b/app/scenes/Document/Document.js
index af22e5536..084d96f68 100644
--- a/app/scenes/Document/Document.js
+++ b/app/scenes/Document/Document.js
@@ -217,7 +217,7 @@ class DocumentScene extends Component {
 
     return (
       <Container column auto>
-        <ErrorBoundary location={this.props.location}>
+        <ErrorBoundary key={this.props.location.pathname}>
           {isMoving && document && <DocumentMove document={document} />}
           {titleText && <PageTitle title={titleText} />}
           {(this.isLoading || this.isSaving) && <LoadingIndicator />}