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 + "  "; } } 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.