Prompt the user to refresh the page if their session expires (#2241)

Author: kumar303

src/core/constants.js

@@ -174,3 +174,11 @@ export const GLOBAL_EVENT_STATUS_MAP = {
 // The events here are set directly on mozAddonManager
 // they will be fired by addons and themes.
 export const GLOBAL_EVENTS = Object.keys(GLOBAL_EVENT_STATUS_MAP);
+
+// Generic error codes.
+export const ERROR_UNKNOWN = 'ERROR_UNKNOWN';
+// API error codes. These values match the error codes defined here:
+// http://addons-server.readthedocs.io/en/latest/topics/api/overview.html#unauthorized-and-permission-denied
+export const API_ERROR_DECODING_SIGNATURE = 'ERROR_DECODING_SIGNATURE';
+export const API_ERROR_INVALID_HEADER = 'ERROR_INVALID_HEADER';
+export const API_ERROR_SIGNATURE_EXPIRED = 'ERROR_SIGNATURE_EXPIRED';

src/core/css/ErrorHandler.scss

@@ -11,6 +11,8 @@ $sub-text-color: #6a6a6a;
 $form-border-color: $primary-font-color;
 $error-text-color: $text-color-message;
 $error-background-color: #f03e3e;
+$error-button-background-color: $error-text-color;
+$error-button-text-color: $error-background-color;
 
 $button-background-color: #0095dd;
 

src/core/css/inc/vars.scss

@@ -4,8 +4,7 @@ import { connect } from 'react-redux';
 
 import { clearError, setError } from 'core/actions/errors';
 import log from 'core/logger';
-
-import 'core/css/ErrorHandler.scss';
+import ErrorList from 'ui/components/ErrorList';
 
 function generateHandlerId({ name = '' } = {}) {
   return `${name}-${Math.random().toString(36).substr(2, 9)}`;
@@ -35,23 +34,8 @@ export class ErrorHandler {
   }
 
   renderError() {
-    return (
-      <ul className="ErrorHandler-list">
-        {this.capturedError.messages.map(
-          (msg) => {
-            let msgString = msg;
-            if (typeof msgString === 'object') {
-              // This is an unlikely scenario where an API response
-              // contains nested objects within objects. If this
-              // happens in real life let's make it prettier.
-              // Until then, let's just prevent a stack trace.
-              msgString = JSON.stringify(msg);
-            }
-            return <li className="ErrorHandler-list-item">{msgString}</li>;
-          }
-        )}
-      </ul>
-    );
+    const { code, messages } = this.capturedError;
+    return <ErrorList messages={messages} code={code} />;
   }
 
   handle(error) {

src/core/errorHandler.js

@@ -1,6 +1,5 @@
-import { CLEAR_ERROR, SET_ERROR } from 'core/constants';
+import { CLEAR_ERROR, ERROR_UNKNOWN, SET_ERROR } from 'core/constants';
 import log from 'core/logger';
-import { gettext } from 'core/utils';
 
 /*
  * This inspects an error object and returns an array of messages from it.
@@ -12,41 +11,45 @@ import { gettext } from 'core/utils';
  * http://addons-server.readthedocs.io/en/latest/topics/api/overview.html#responses
  */
 function getMessagesFromError(error) {
-  let messages = [gettext('An unexpected error occurred')];
+  let errorData = {
+    code: ERROR_UNKNOWN,
+    messages: [],
+  };
   log.info('Extracting messages from error object:', error);
 
   if (error && error.response && error.response.data) {
-    const apiMessages = [];
-
     Object.keys(error.response.data).forEach((key) => {
       const val = error.response.data[key];
+      if (key === 'code') {
+        errorData = { ...errorData, code: val };
+        return;
+      }
       if (Array.isArray(val)) {
         // Most API reponse errors will consist of a key (which could be a
         // form field) and an array of localized messages.
         // More info: http://addons-server.readthedocs.io/en/latest/topics/api/overview.html#bad-requests
         val.forEach((msg) => {
           if (key === 'non_field_errors') {
             // Add a generic error not related to a specific field.
-            apiMessages.push(msg);
+            errorData.messages.push(msg);
           } else {
             // Add field specific error message.
             // The field is not localized but we need to show it as a hint.
-            apiMessages.push(`${key}: ${msg}`);
+            errorData.messages.push(`${key}: ${msg}`);
           }
         });
       } else {
         // This is most likely not a form field error so just show the message.
-        apiMessages.push(val);
+        errorData.messages.push(val);
       }
     });
+  }
 
-    if (apiMessages.length) {
-      messages = apiMessages;
-    } else {
-      log.warn('API error response did not contain any messages', error);
-    }
+  if (!errorData.messages.length) {
+    log.warn('Error object did not contain any messages', error);
   }
-  return messages;
+
+  return errorData;
 }
 
 export const initialState = {};
@@ -58,13 +61,14 @@ export default function errors(state = initialState, action) {
         ...state,
         [action.payload.id]: null,
       };
-    case SET_ERROR:
+    case SET_ERROR: {
+      const { code, messages } =
+        getMessagesFromError(action.payload.error);
       return {
         ...state,
-        [action.payload.id]: {
-          messages: getMessagesFromError(action.payload.error),
-        },
+        [action.payload.id]: { code, messages },
       };
+    }
     default:
       return state;
   }

src/core/reducers/errors.js

@@ -0,0 +1,72 @@
+/* global window */
+import classNames from 'classnames';
+import React, { PropTypes } from 'react';
+import { compose } from 'redux';
+
+import { API_ERROR_SIGNATURE_EXPIRED } from 'core/constants';
+import log from 'core/logger';
+import translate from 'core/i18n/translate';
+import Button from 'ui/components/Button';
+
+import './styles.scss';
+
+
+class ErrorList extends React.Component {
+  static propTypes = {
+    _window: PropTypes.object,
+    code: PropTypes.string,
+    className: PropTypes.string,
+    i18n: PropTypes.object.isRequired,
+    messages: PropTypes.array.isRequired,
+  }
+
+  static defaultProps = {
+    _window: typeof window !== 'undefined' ? window : {},
+  };
+
+  render() {
+    const { _window, code, className, i18n, messages } = this.props;
+    const items = [];
+
+    messages.forEach((messageItem) => {
+      let message = messageItem;
+      if (typeof message === 'object') {
+        // This handles an unlikely scenario where an API error response
+        // contains nested objects within objects. If this happens in real
+        // life let's fix it or make the display prettier.
+        // Until then, let's just prevent it from triggering an exception.
+        message = JSON.stringify(message);
+      }
+      if (code === API_ERROR_SIGNATURE_EXPIRED) {
+        // This API error describes exactly what happened but that isn't
+        // very helpful for AMO users. Let's help them figure it out.
+        log.debug(`Detected ${code}, replacing API translation: ${message}`);
+        message = i18n.gettext('Your session has expired');
+      }
+      items.push(message);
+    });
+
+    if (!items.length) {
+      log.debug(`No messages were passed to ErrorList, code: ${code}`);
+      items.push(i18n.gettext('An unexpected error occurred'));
+    }
+
+    if (code === API_ERROR_SIGNATURE_EXPIRED) {
+      items.push(
+        <Button onClick={() => _window.location.reload()}>
+          {i18n.gettext('Reload To Continue')}
+        </Button>
+      );
+    }
+
+    return (
+      <ul className={classNames('ErrorList', className)}>
+        {items.map((item) => <li className="ErrorList-item">{item}</li>)}
+      </ul>
+    );
+  }
+}
+
+export default compose(
+  translate({ withRef: true }),
+)(ErrorList);

src/ui/components/ErrorList/index.js

@@ -0,0 +1,27 @@
+@import "~core/css/inc/vars";
+
+.ErrorList {
+  text-align: center;
+  border-radius: $border-radius-default;
+  background-color: $error-background-color;
+  color: $error-text-color;
+  padding: 10px;
+  margin: 0;
+  margin-bottom: 10px;
+}
+
+.ErrorList-item {
+  list-style: none;
+  margin-bottom: 8px;
+
+  .Button {
+    color: $error-button-text-color;
+    background-color: $error-button-background-color;
+    border-radius: $border-radius-s;
+    font-size: $font-size-s;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}

src/ui/components/ErrorList/styles.scss

@@ -1,5 +1,6 @@
 import { createApiError } from 'core/api/index';
 import { clearError, setError } from 'core/actions/errors';
+import { API_ERROR_SIGNATURE_EXPIRED, ERROR_UNKNOWN } from 'core/constants';
 import errors, { initialState } from 'core/reducers/errors';
 
 export function createFakeApiError({ fieldErrors = {}, nonFieldErrors } = {}) {
@@ -23,15 +24,6 @@ describe('errors reducer', () => {
     assert.deepEqual(errors(undefined, { type: 'UNRELATED' }), initialState);
   });
 
-  it('stores a simple error', () => {
-    const error = new Error('some message');
-    const action = setError({ id: 'some-id', error });
-    const state = errors(undefined, action);
-    assert.deepEqual(state[action.payload.id], {
-      messages: ['An unexpected error occurred'],
-    });
-  });
-
   it('handles API object responses', () => {
     const message = 'Authentication credentials were not provided.';
     const error = createApiError({
@@ -41,7 +33,10 @@ describe('errors reducer', () => {
     });
     const action = setError({ id: 'some-id', error });
     const state = errors(undefined, action);
-    assert.deepEqual(state[action.payload.id], { messages: [message] });
+    assert.deepEqual(state[action.payload.id], {
+      code: ERROR_UNKNOWN,
+      messages: [message],
+    });
   });
 
   it('preserves existing errors', () => {
@@ -85,11 +80,13 @@ describe('errors reducer', () => {
     assert.equal(state.action2.messages[0], 'action2');
   });
 
-  it('creates a default error message', () => {
+  it('stores a generic error', () => {
     const action = setError({ id: 'action1', error: new Error('any message') });
     const state = errors(undefined, action);
-    assert.deepEqual(state[action.payload.id].messages,
-                     ['An unexpected error occurred']);
+    assert.deepEqual(state[action.payload.id], {
+      code: ERROR_UNKNOWN,
+      messages: [],
+    });
   });
 
   it('gets non_field_errors from API error response', () => {
@@ -123,12 +120,41 @@ describe('errors reducer', () => {
     assert.include(messages, 'password: sorry, it cannot be 1234');
   });
 
-  it('handles API responses without any messages', () => {
+  it('stores API responses when they do not have messages', () => {
     // This API error has no messages (hopefully this won't ever happen).
     const action = setError({ id: 'some-id', error: createFakeApiError() });
     const state = errors(undefined, action);
     assert.deepEqual(state[action.payload.id], {
-      messages: ['An unexpected error occurred'],
+      code: ERROR_UNKNOWN,
+      messages: [],
+    });
+  });
+
+  it('adds an error code', () => {
+    const error = createApiError({
+      response: { status: 401 },
+      apiURL: 'https://some/api/endpoint',
+      jsonResponse: {
+        code: API_ERROR_SIGNATURE_EXPIRED,
+        detail: 'Any message about an expired signature.',
+      },
     });
+    const action = setError({ id: 'some-id', error });
+    const state = errors(undefined, action);
+    assert.equal(state[action.payload.id].code, API_ERROR_SIGNATURE_EXPIRED);
+  });
+
+  it('does not turn an error code into a message', () => {
+    const error = createApiError({
+      response: { status: 401 },
+      apiURL: 'https://some/api/endpoint',
+      jsonResponse: {
+        code: API_ERROR_SIGNATURE_EXPIRED,
+        detail: 'Some message.',
+      },
+    });
+    const action = setError({ id: 'some-id', error });
+    const state = errors(undefined, action);
+    assert.deepEqual(state[action.payload.id].messages, ['Some message.']);
   });
 });