• Introduction
• Core Libraries
• React
• Webpack
• Redux
• React Router
• Data Structure
• Overview
• Models
• Collections
• UI Patterns
• Filtering
• Pagination
• Infinite Scrolling
• WebSockets
• Visual Cues
• Optimistic Updates
• Dialogs
• Wizards
• Error Handling
• 404 Pages

Error Handling

Useful for informing the user when things don't go as planned and providing them with the ability to correct the error and try again.

Visualization

This video demonstrates what error handling looks like. Screenshots are from the Simply Social prototype that Invision provides you when you sign up for an account.

Usage

As described in Data Structure and Visual Cues the default actions in Lore include payload states for ERROR_FETCHING, ERROR_CREATING, ERROR_UPDATING andERROR_DELETING. There is also an error field included in every model and collection that defaults to an empty object;

model = {
  id: undefined,
  cid: 'c1',
  state: 'CREATING',
  data: {
    title: 'Cornbread is Yummy'
  },
  error: {}
}

collection = {
  state: 'FETCHING',
  data: [],
  query: {
    where: { authorId: '123' }
  },
  meta: {},
  error: {}
}

If an action makes a network request to create a model, that request might look like this:

POST https://api.myapp.com/posts

{
  title: 'Cornbread is Yummy'
}

If that title already exists, and the API has some business rule that won't allow multiple posts with the same title, it may send back a network request with a 409 status code to indicate there was a conflict, and (hopefully) include a helpful message about what the specific issue is. Let's say the body of the response looks like this:

{
  statusCode: 409,
  message: 'Post already exists with that title'
}

The default behavior of Lore's built-in actions is to take any error response (400/500 level status codes) and embed the body of the response in the error field of the payload. So if you tried to create a post like above, and the server returned the error like above, the model would be transformed to look like this:

model = {
  id: undefined,
  cid: 'c1',
  state: 'ERROR_CREATING',
  data: {
    title: 'Cornbread is Yummy'
  },
  error: {
    statusCode: 409,
    message: 'Post already exists with that title'
  }
}

And you can access the error from within your components by looking at the model.error field like this:

createReactClass({

  propTypes: {
    post: React.PropTypes.object.isRequired
  },

  render: function() {
    var post = this.props.post;

    if (posts.state === PayloadStates.ERROR_CREATING) {
      return (
        <div className="error">
          <div>
            An error occurred while creating the post:
          </div>
          <div>
            {post.data.error.message}
          </div>
        </div>
      );
    }

    // todo: render RESOLVED state
  }
});