Handle AJAX errors by showing a notification (elastic#717)

* timeout property for axios instance

* remove TODOS

* notifier class

* TODO

* second notification with the context

* redirect to home if workpad could not be fetched

* less noisy error checking

common/lib/constants.js

@@ -3,3 +3,4 @@ export const APP_ROUTE = '/app/canvas';
 export const API_ROUTE = '/api/canvas';
 export const API_ROUTE_WORKPAD = `${API_ROUTE}/workpad`;
 export const LOCALSTORAGE_LASTPAGE = 'canvas:lastpage';
+export const FETCH_TIMEOUT = 30000; // 30 seconds

common/lib/fetch.js

@@ -1,9 +1,11 @@
 import axios from 'axios';
+import { FETCH_TIMEOUT } from './constants';
 
 export const fetch = axios.create({
   headers: {
     Accept: 'application/json',
     'Content-Type': 'application/json',
     'kbn-xsrf': 'professionally-crafted-string-of-text',
   },
+  timeout: FETCH_TIMEOUT,
 });

public/apps/workpad/routes.js

@@ -1,5 +1,4 @@
 import * as workpadService from '../../lib/workpad_service';
-import { notify } from '../../lib/notify';
 import { getDefaultWorkpad } from '../../state/defaults';
 import { setWorkpad } from '../../state/actions/workpad';
 import { setAssets, resetAssets } from '../../state/actions/assets';
@@ -15,7 +14,6 @@ export const routes = [
         name: 'createWorkpad',
         path: '/create',
         action: dispatch => async ({ router }) => {
-          // TODO: handle the failed creation state
           const newWorkpad = getDefaultWorkpad();
           await workpadService.create(newWorkpad);
           dispatch(setWorkpad(newWorkpad));
@@ -33,13 +31,15 @@ export const routes = [
           // load workpad if given a new id via url param
           const currentWorkpad = getWorkpad(getState());
           if (params.id !== currentWorkpad.id) {
-            try {
-              const { assets, ...workpad } = await workpadService.get(params.id);
-              dispatch(setWorkpad(workpad));
-              dispatch(setAssets(assets));
-            } catch (fetchErr) {
-              notify.error(fetchErr);
+            const fetchedWorkpad = await workpadService.get(params.id);
+
+            if (fetchedWorkpad == null) {
+              return router.redirectTo('home');
             }
+
+            const { assets, ...workpad } = fetchedWorkpad;
+            dispatch(setWorkpad(workpad));
+            dispatch(setAssets(assets));
           }
 
           // fetch the workpad again, to get changes

public/components/update_modal/index.js

@@ -1,7 +1,7 @@
 import { withState, lifecycle, compose } from 'recompose';
 import Markdown from 'markdown-it';
 import { get } from 'lodash';
-import fetch from 'axios';
+import { fetch } from '../../../common/lib/fetch';
 import pkg from '../../../package.json';
 import { UpdateModal as Component } from './update_modal';
 

public/components/workpad_loader/index.js

@@ -31,14 +31,12 @@ export const WorkpadLoader = compose(
 
     // Workpad search
     findWorkpads: ({ setWorkpads }) => async text => {
-      // TODO: handle search failures
       const workpads = await workpadService.find(text);
       setWorkpads(workpads);
     },
 
     // Workpad import/export methods
     downloadWorkpad: () => async workpadId => {
-      // TODO: handle the failed loading state
       const workpad = await workpadService.get(workpadId);
       const jsonBlob = new Blob([JSON.stringify(workpad)], { type: 'application/json' });
       fileSaver.saveAs(jsonBlob, `canvas-workpad-${workpad.name}-${workpad.id}.json`);
@@ -48,7 +46,6 @@ export const WorkpadLoader = compose(
     removeWorkpad: props => async workpadId => {
       const { setWorkpads, workpads, workpadId: loadedWorkpad } = props;
 
-      // TODO: handle the failed removal condition
       await workpadService.remove(workpadId);
 
       const remainingWorkpads = workpads.workpads.filter(w => w.id !== workpadId);

public/functions/geoip.js

@@ -1,4 +1,4 @@
-import fetch from 'axios';
+import { fetch } from '../../common/lib/fetch';
 
 // TODO: We should implement our own Elastic GeoIP service instead of using freegeoip.net
 export const geoip = () => ({

public/lib/notify.js

@@ -1,4 +1,13 @@
-import { notify as kbnNotify } from 'ui/notify';
+import { Notifier } from 'ui/notify';
+
+/*
+ * TODO Make this use a toast error instead of a banner.
+ * Toast should be able to give context about where the error originated,
+ * not just show you the error data
+ */
+const kbnNotify = new Notifier({
+  location: 'Canvas',
+});
 
 export const notify = {
   /*

public/lib/workpad_service.js

@@ -1,33 +1,49 @@
 import chrome from 'ui/chrome';
 import { API_ROUTE_WORKPAD } from '../../common/lib/constants';
+import { notify } from '../lib/notify';
 import { fetch } from '../../common/lib/fetch';
 
 const basePath = chrome.getBasePath();
 const apiPath = `${basePath}${API_ROUTE_WORKPAD}`;
 
+/*
+ * The error data will be in `err.response` if the error comes from the server (example: 404)
+ * The error object will be error data if it comes directly from the fetch library, (example: network error)
+ */
+const notifyError = source => {
+  return err => {
+    const errData = err.response || err;
+    notify.error(source);
+    notify.error(errData);
+  };
+};
+
 export function create(workpad) {
-  return fetch.post(apiPath, { ...workpad, assets: workpad.assets || {} });
+  return fetch
+    .post(apiPath, { ...workpad, assets: workpad.assets || {} })
+    .catch(notifyError('Could not create workpad'));
 }
 
 export function get(workpadId) {
   return fetch
     .get(`${apiPath}/${workpadId}`)
     .then(res => res.data)
-    .catch(({ response }) => Promise.reject(response));
+    .catch(notifyError('Could not get workpad'));
 }
 
 export function update(id, workpad) {
-  return fetch.put(`${apiPath}/${id}`, workpad);
+  return fetch.put(`${apiPath}/${id}`, workpad).catch(notifyError('Could not update workpad'));
 }
 
 export function remove(id) {
-  return fetch.delete(`${apiPath}/${id}`);
+  return fetch.delete(`${apiPath}/${id}`).catch(notifyError('Could not remove workpad'));
 }
 
 export function find(searchTerm) {
   const validSearchTerm = typeof searchTerm === 'string' && searchTerm.length > 0;
 
   return fetch
     .get(`${apiPath}/find?name=${validSearchTerm ? searchTerm : ''}`)
-    .then(resp => resp.data);
+    .then(resp => resp.data)
+    .catch(notifyError('Could not find workpads'));
 }

server/functions/timelion.js

@@ -1,5 +1,5 @@
-import fetch from 'axios';
 import { flatten } from 'lodash';
+import { fetch } from '../../common/lib/fetch';
 import { buildBoolArray } from './esdocs/lib/build_bool_array';
 
 export const timelion = () => ({