How to hide or suppress server error message pop up and show custom message in SAP UI5

In this blog we will see how to replace / hide / suppress the Server Error Message Pop up [Message Box] and show Message Toast instead of it.

Expected Output:

Whenever a  Server Error occurs [e.g. : 500, 400] in  SAP UI5 application, a server error message pop up comes up.

  Fig. MessageBox Pop Up whenever any error occurs

Instead of showing this MessageBox  a  MessageToast  should be shown to user.

~~~~~~~~~~~~~~~~~~~~~SOLUTION ~~~~~~~~~~~~~~~~~~~~~

• By implementing ErrorHandler.js in the app we can acheive this.

ErrorHandler.js

In this we write the code which handles application errors by automatically attaching to the model events and displaying errors when needed.

1.  In Component.js initialize ErrorHandler

init: function(){
   this._oErrorHandler = new ErrorHandler(this);
   /*Your code*/
}

2.  Add this file ErrorHandler.js in Controller folder

sap.ui.define([
	"sap/ui/base/Object",
	"sap/m/MessageBox",
	"sap/m/MessageToast"
], function(UI5Object, MessageBox, MessageToast) {
	"use strict";

	return UI5Object.extend("z.controller.ErrorHandler", {

		/**
		 * Handles application errors by automatically attaching to the model events and displaying errors when needed.
		 * @class
		 * @param {sap.ui.core.UIComponent} oComponent reference to the app's component
		 * @public
		 * @alias z.controller.ErrorHandler
		 */
		constructor: function(oComponent) {
			this._oResourceBundle = oComponent.getModel("i18n").getResourceBundle();
			this._oComponent = oComponent;
			this._oModel = oComponent.getModel();
			this._bMessageOpen = false;
			this._sErrorText = this._oResourceBundle.getText("errorText");

			this._oModel.attachMetadataFailed(function(oEvent) {
				var oParams = oEvent.getParameters();
				this._showServiceError(oParams.response);
			}, this);

			this._oModel.attachRequestFailed(function(oEvent) {
				var oParams = oEvent.getParameters();
				// An entity that was not found in the service is also throwing a 404 error in oData.
				// We already cover this case with a notFound target so we skip it here.
				// A request that cannot be sent to the server is a technical error that we have to handle though
				if (oParams.response.statusCode !== "404" || (oParams.response.statusCode === 404 && oParams.response.responseText.indexOf(
						"Cannot POST") === 0)) {
					this._showServiceError(oParams.response);
				}
			}, this);
		},

		/**
		 * Shows a {@link sap.m.MessageBox} when a service call has failed.
		 * Only the first error message will be display.
		 * @param {string} sDetails a technical error to be displayed on request
		 * @private
		 */
		_showServiceError: function(sDetails) {
			if (this._bMessageOpen) {
				return;
			}
			this._bMessageOpen = true;
             //MessageBox shows us the pop up
			MessageBox.error(
				this._sErrorText,
				{
					id : "serviceErrorMessageBox",
					details : sDetails,
					styleClass : this._oComponent.getContentDensityClass(),
					actions : [MessageBox.Action.CLOSE],
					onClose : function () {
						this._bMessageOpen = false;
					}.bind(this)
				}
			);
			
		}

	});

}); 

3. Replace the _showServiceError method with the given below:

_showServiceError: function(sDetails) {
	if (this._bMessageOpen) {
		return;
	}
	this._bMessageOpen = true;
	var aDetails = JSON.parse(sDetails.responseText);
	MessageToast.show(this._sErrorText + " " + aDetails.error.message.value);
	this._bMessageOpen = false;
}

Here we have removed the MessageBox control and replaced it with MessageToast control.

**Note: If you require any other control you can just add it here.