Fix general and validation error handling

[asishallab]

Currently errors are not comprehensively displayed, especially if they are validation errors.

First setup a test Cenzontle instance and cause a general error, e.g. a Sequelize error where the required table of a data model does not exist, or something similar. Then create a validation error, e.g. by using GraphiQL and creating a new record of any data model where the argument causes an validation error. You could use some integer maximum in the respective AJV validator.

See AJV documentation for more details on the above example.

These two "experiments" tell you how errors are formatted and returned by our GraphQL-server. Especially you will see the difference between general, e.g. Sequelize errors, and specific validation errors.

(OPTIONALLY) Write a helper error_handler.js module for the single-page-application

This module must be able to parse both types of errors and return for general errors the message, and for specific validation errors the message and which attribute caused the validation to fail.

Possibly implement a function validationError that receives the name of an attribute and returns false, if no validation error is found for that argument attribute, and returns the validation error, if one is found for that argument attribute.

Extend the attribute components to display validation errors

The div or component that enables the user to input the data for a data model attribute should be able to display a validation error (message) in red below the input tag itself. See material-ui's input error display for more details.

In our old Vue.js based approach this was done as follows:

<div id="cultivar-description-div" class="form-group">
      <label>description</label>
      <input type="text" v-model="cultivar.description" class="form-control"/>

      <div id="cultivar-description-err" v-if="validationError('description')" class="alert alert-danger">
        <ul>
          <li v-for="err in validationError('description')">{{err.message}}</li>
        </ul>
      </div>
</div>

Extend behavior of the single-page-application

In case a general error is returned from the GraphQL-server, the SPA should display that in the snack-bar component. If the user has the access right to see error messages of general errors, the message is displayed (e.g. admin). Otherwise the user is just informed with a general message "An error has occurred. Please try again later or contact your administrator."

In case a validation error is returned, the SPA should use the snack-bar component to inform the user that a validation error has been caught, and additionally the respective effected attribute-input-component should display the actual validation error message.

Translate (I18n) AJV validation errors

The GraphQL-server uses AJV to validate records using a schema. AJV returns validation errors in a very specific format. Namely an array called errors. Extract that array from the response received by the SPA and translate those errors using ajv-i18n. Use something like the following code:

var Ajv = require('ajv'); // version >= 2.0.0
var localize = require('ajv-i18n');

// for Spanisch - get the browser language using JS
localize.es(resErrors) // resErrors is the 'errors' array extracted from the response

console.log(ajv.errorsText(resErrors, {separator: "\n"}))