How to display technical errors in a fiori template

If you are using the Fiori templates to create your application, then you may have received an error dialog.

For example:

You can improve the usability of when the Show Details link is chosen by displaying meaningful errors from a backend message class. For example:

From:

To:

To do so, add a new function _extractError  and modify the _showServiceError function found in the ErrorHandler JavaScript file found the controller package.

/**
* Extract errors from a backend message class.
* @param {object} sDetails a technical error
* @return a either messages from the backend message class or return the initial error object
* @function
* @private
*/
 
_extractError: function(sDetails) {
    if (sDetails.responseText) {
        var parsedJSError = null;
           try {
               parsedJSError = jQuery.sap.parseJS(sDetails.responseText);
            } catch (err) {
              return sDetails;
            }
               
            if (parsedJSError && parsedJSError.error && parsedJSError.error.code) {
              var strError = "";
               //check if the error is from our backend error class
               if (parsedJSError.error.code.split("/")[0] === "MY_MSG_CLASS") {
                   var array = parsedJSError.error.innererror.errordetails;
                       for (var i = 0; i < array.length; i++) {
                          strError += String.fromCharCode("8226") + " " + array[i].message + "\n";
                       }
                  } else {
                    //if there is no message class found
                       return sDetails;
                  }
                 return strError;
             }
      }
    return sDetails;
},

Add a call to this._extractError(sDetails)  to the _ showServiceError function for the details property,

_showServiceError: function(sDetails) {
	if (this._bMessageOpen) {
		return;
	}
	this._bMessageOpen = true;
	MessageBox.error(
		this._sErrorText, {
			id: "serviceErrorMessageBox",
			details: this._extractError(sDetails),
			styleClass: this._oComponent.getContentDensityClass(),
			actions: [MessageBox.Action.CLOSE],
			onClose: function() {
				this._bMessageOpen = false;
			}.bind(this)
		}
	);
}

Meaningful errors from a backend message class will now be displayed.