Remove notification messages on refresh

Question

Sometimes the notification messages don't get disappear on page reload or when I navigate to the different page.

Is there some kind of timeout for the notification message or some session cookies?

I followed this link

Magento 2 : Error/Success message won't remove from page after refresh once display

But where should I put this code so that _deleteMessage call every time when the page reloads or user navigates to a different page.

This issue is more prominent in iPhone devices safari browser.

This is my code in messages.js

  this.cookieMessages = _.unique($.cookieStorage.get('mage-messages'), 'text')[_.unique($.cookieStorage.get('mage-messages'), 'text').length-1];
  this.messages = customerData.get('messages').extend({
                disposableCustomerData: 'messages'
            });
  if (!_.isEmpty(this.messages().messages)) {
                customerData.set('messages', {});
            }
  customerData.set('messages', {messages: ""});
  $.cookieStorage.set('mage-messages', '');

On further debugging, My code randomly breaks anywhere due to WebAPI socket error on console js debugging.

So this WebAPI socket error doesn't let this cookie clear. This issue is intermittent.

Thanks in advance

Answer 1

For anyone coming across this problem where notification messages persist across refreshed pages here are some tips that might help you resolve the problem.

• I first noticed this problem with Magento 2.4.1
• I mostly notice it on my development and staging servers
  • These servers are not in production mode

If you look at magento-theme/view/frontend/web/js/view/messages.js you will see where these notification messages are read from the mage-messages cookie and passed to the backend for display.

You will notice that the function cleans up the mage-messages cookie

    $.mage.cookies.set('mage-messages', '', {
        samesite: 'strict',
        domain: ''
    });

If you add a console info log here, you can see that this executes with every page refresh. However, if you monitor the mage-messages cookie in the console you can sometimes see the cookie being set, deleted, and set again. This leads to the cookie persisting to the next page.

Whether this has to do with delays in the backend often seen on slower servers i.e. development / development mode or it's a new 2.4 bug I am not sure.

One way to ensure that the cookie is reset after being processed is to add another cleanup function to the prepareMessageForHtml function. Note this function is only present in 2.4.x

        // Bug hunting cookie cleanup for persistent frontend notification messages
        //
        //
        (function CookieCleanup(i) {
          setTimeout(function() {

              if ($.mage.cookies.get('mage-messages') !=='' )
              {
                  // cleanup
                  $.mage.cookies.set('mage-messages', '', {
                      samesite: 'strict',
                      domain: ''
                  });
                  console.info('Debug Cookie cleanup in progress...');
              }

              // keep on scrubbin'...
              if (--i) CookieCleanup(i);

          }, 3000)
        })(3);

In summary if you are seeing this message during development on 2.4.x try going to production mode with all caches enabled first. Debug further by adding console logs to messages.js.

Answer 2

If anyone still has this issue in magento 2.4, have a look at my solution, which is very similar to one using setInterval above, but using setTimeout, also the js is a bit different in magento 2.4

https://github.com/magento/magento2/issues/5301#issuecomment-1028756896

Answer 3

I resolved it using setInterval,

    return Component.extend({
    defaults: {
        cookieMessages: [],
        messages: []
    },

    /** @inheritdoc */
    initialize: function () {
        this._super();

        $('#validation-login-cust').html('');
        $('#valid-promo-cart').html('');
        try {
            var message = _.unique($.cookieStorage.get('mage-messages'), 'text');
            var textMessage =  JSON.parse(message[0]["text"]);
            if (textMessage['type'] === "inline"){
                $(textMessage["selector"]).text(textMessage["message"]).css('color', 'red');
            }

            this.messages = customerData.get('messages').extend({
                disposableCustomerData: 'messages'
            });

            if (!_.isEmpty(this.messages().messages)) {
                customerData.set('messages', {});
            }

            customerData.set('messages', {messages: ""});
            $.cookieStorage.set('mage-messages', '');

        }catch (e) {

            $('#validation-login-cust').html('');
            $('#valid-promo-cart').html('');
            var messageText = _.unique($.cookieStorage.get('mage-messages'), 'text')[_.unique($.cookieStorage.get('mage-messages'), 'text').length-1];
            if (messageText) {
                if (messageText["text"].trim() == "Invalid Form Key. Please refresh the page.") {
                    this.cookieMessages = 'OOps! Something went wrong, Please try again later or refresh the page.';
                } else {
                    this.cookieMessages = messageText;
                }
            }
            this.messages = customerData.get('messages').extend({
                disposableCustomerData: 'messages'
            });
            if (!_.isEmpty(this.messages().messages)) {
                customerData.set('messages', {});
            }
        }
        var setCookieInterval = setInterval(function()
        {
            $.cookieStorage.set('mage-messages', '');
            YX_UI_UTIL.eraseCookie("mage-messages");

        }, 3000);
        setTimeout(function( ) { clearInterval(setCookieInterval); }, 10000);
    }
});