Error handling

For error handling in Slidewiki-Platform, error handler actions, error store and error components are defined. If you want to handler error in your action for incorrect parameters or service related errors, import the appropriate error handler from actions/error and call executeAction with the imported error handler as the first parameter. This will set the ErrorStore defined in stores/ErrorStore.js .

Example:

import serviceUnavailable from ../error/serviceUnavailable
...
context.service.read(..., (err, res) => {
    if (err) {
        context.executeAction(serviceUnavailable, payload, done);
        return;
    } 
    else {
           context.dispatch(...);
    }
...
}

Error component

It is defined in components/Error/Error.js. Generally, one should not use this component. The reason is, each error page is standalone, i.e., when an error page is shown, the other components from the platform are not used at all. Therefore, Error component is used in Application.js (at the top level) and it is called automatically. This ensures that the developer need not remember to use Error component inside one of his other components. This Error component will be called automatically whenever the error property object in ErrorStore is set. Another thing to note about this component is that this component selects appropriate child error component (e.g., BadRequest, ServiceUnavailable etc.) based on the statusCode parameter set in error property object. This component is using select statement for finding the correct child component. Child component finally renders to show the error page. If you want to change the layout or css of the error page, child component is the place for that.

Child error components

Multiple child error components are defined. One can find them in components/Error/ . For example, BadRequest.js, NotFound.js etc. One can use these individual child error components directly inside other components by calling them, for example:

<BadRequest error={...} />

but this will not stop other components rendering which are called in parallel. The effect that you may see is, error page displaying at the place where child error component is placed, but on rest of the page other components are rendered. Ideally, you would like to set ErrorStore and let Error component render in Application.js . If you want to change the layout or css of the error page, child component is the place for that.

Structure of error object in ErrorStore

In ErrorStore, if you want to set error object, following should be the syntax of that object: 

{statusCode: ..., statusText: ..., type: ..., description: ..., actionRequired: ...}

Predefined error objects and extending

You can find and extend the predefined error object in components/Error/util/ErrorDescriptionUtil.js . If you are extending, please remember to extend ErrorStore as well. Have a look at ErrorStore.js .