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.
Thanks for the code, very useful.
Something I don't understand is that in the backend, when you develop the service, you can use technical exception and business exception. I think that this popup is ok for technical exception (like a bug for example), but for business exception ("customer not allowed", "start date must be lower than end date" for example) I would expect a popup something different than a "technical error" popup.
In this example, it doesn't make sense to say "try again later" because the user wrote an invalid value...
I don't think there is a way to handle differently technical error and business error.
Hi Louis-Arnaud,
Thank you for the great feedback. I agree with you. One way would be to display either an error dialog if it’s a technical error, but a warning dialog if it’s a business error. To differentiate between the two, we could parse the response’s error code. If the message originates from the application’s ABAP message class, then it’s a business exception. Otherwise, it is a technical one.
A better solution in my opinion would be handle as many of the business exceptions through client-side validation, if possible. Then for the exception that need backend validation I would set the control’s ValueState property to ‘Error’ and set its ValueStateText property to backend message.
Hi Nicola,
You are right, the best option is to handle errors through client-side validation. It can be very time consuming because you have to code every controls 2 times, server-side and client side… ?