feat: Improved error filtering and reporting (#1293)

app/scenes/Document/components/DataLoader.js

@@ -17,6 +17,7 @@ import DocumentsStore from 'stores/DocumentsStore';
 import PoliciesStore from 'stores/PoliciesStore';
 import RevisionsStore from 'stores/RevisionsStore';
 import UiStore from 'stores/UiStore';
+import { OfflineError } from 'utils/errors';
 
 type Props = {|
   match: Object,
@@ -47,7 +48,7 @@ class DataLoader extends React.Component<Props> {
     if (this.document) {
       const policy = this.props.policies.get(this.document.id);
 
-      if (!policy) {
+      if (!policy && !this.error) {
         this.loadDocument();
       }
     }
@@ -131,7 +132,11 @@ class DataLoader extends React.Component<Props> {
     const { location, policies, ui } = this.props;
 
     if (this.error) {
-      return navigator.onLine ? <Error404 /> : <ErrorOffline />;
+      return this.error instanceof OfflineError ? (
+        <ErrorOffline />
+      ) : (
+        <Error404 />
+      );
     }
 
     const document = this.document;

app/utils/ApiClient.js

@@ -4,6 +4,14 @@ import { map, trim } from 'lodash';
 import invariant from 'invariant';
 import stores from 'stores';
 import download from './download';
+import {
+  AuthorizationError,
+  NetworkError,
+  NotFoundError,
+  OfflineError,
+  RequestError,
+  UpdateRequiredError,
+} from './errors';
 
 type Options = {
   baseUrl?: string,
@@ -62,9 +70,9 @@ class ApiClient {
       });
     } catch (err) {
       if (window.navigator.onLine) {
-        throw new Error('A network error occurred, try again?');
+        throw new NetworkError('A network error occurred, try again?');
       } else {
-        throw new Error('No internet connection available');
+        throw new OfflineError('No internet connection available');
       }
     }
 
@@ -104,9 +112,18 @@ class ApiClient {
 
     if (response.status === 400 && error.error === 'editor_update_required') {
       window.location.reload(true);
+      throw new UpdateRequiredError(error.message);
     }
 
-    throw new Error(error.message);
+    if (response.status === 403) {
+      throw new AuthorizationError(error.message);
+    }
+
+    if (response.status === 404) {
+      throw new NotFoundError(error.message);
+    }
+
+    throw new RequestError(error.message);
   };
 
   get = (path: string, data: ?Object, options?: Object) => {

app/utils/errors.js

@@ -0,0 +1,9 @@
+// @flow
+import ExtendableError from 'es6-error';
+
+export class AuthorizationError extends ExtendableError {}
+export class NetworkError extends ExtendableError {}
+export class NotFoundError extends ExtendableError {}
+export class OfflineError extends ExtendableError {}
+export class RequestError extends ExtendableError {}
+export class UpdateRequiredError extends ExtendableError {}

package.json

@@ -86,6 +86,7 @@
     "debug": "^4.1.1",
     "dotenv": "^4.0.0",
     "emoji-regex": "^6.5.1",
+    "es6-error": "^4.1.1",
     "exports-loader": "^0.6.4",
     "file-loader": "^1.1.6",
     "flow-typed": "^2.6.2",

server/app.js

@@ -93,6 +93,13 @@ if (process.env.SENTRY_DSN) {
     dsn: process.env.SENTRY_DSN,
     environment: process.env.NODE_ENV,
     maxBreadcrumbs: 0,
+    ignoreErrors: [
+      // emitted by Koa when bots attempt to snoop on paths such as wp-admin
+      // or the user submits a bad request. These are expected in normal running
+      // of the application
+      'BadRequestError',
+      'UnauthorizedError',
+    ],
   });
 }
 

server/static/index.html

@@ -40,7 +40,16 @@
     >
     </script>
     <script>
-      Sentry.init({ dsn: '<%= SENTRY_DSN %>' });
+      Sentry.init({
+        dsn: '<%= SENTRY_DSN %>',
+        ignoreErrors: [
+          'AuthorizationError',
+          'NetworkError',
+          'NotFoundError',
+          'OfflineError',
+          'UpdateRequiredError',
+        ],
+      });
 
       if (window.localStorage.getItem("theme") === "dark") {
         window.document.querySelector('#root').style.background = "#111319";

yarn.lock

@@ -3328,6 +3328,11 @@ es5-ext@^0.10.35, es5-ext@^0.10.45, es5-ext@^0.10.46, es5-ext@^0.10.50, es5-ext@
     es6-symbol "~3.1.3"
     next-tick "~1.0.0"
 
+es6-error@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.1.1.tgz#9e3af407459deed47e9a91f9b885a84eb05c561d"
+  integrity sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==
+
 es6-iterator@^2.0.3, es6-iterator@~2.0.1, es6-iterator@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"