2

This is the logout logic, here the key logoutoverlay, is set in the local storage.

   <div className="logout">
              <NavLink href={propsData.userDataTopNavLinkList.logout} onClick={() => {
                localStorage.removeItem("manage");
                localStorage.removeItem("token");
                localStorage.removeItem("auth");
                localStorage.removeItem("AccountInfo");
                localStorage.removeItem("successfullySet");
                localStorage.removeItem("userImpression");
                localStorage.removeItem("cartCnt");
                localStorage.removeItem("callDuration");
                localStorage.removeItem("customGeoIPInfo");
                localStorage.removeItem("geoipInfo");
                localStorage.setItem("logoutoverlay","form overlay")
              }}>  {dictionary.t("Logout", "LOGOUT")}</NavLink>
            </div>

Here inside Main.js the local localStorage is checked for the key logoutoverlay

    if(localStorage.getItem("logoutoverlay"))
   {
    logoutDataLayer(localStorage.getItem("logoutoverlay"));
    localStorage.removeItem("logoutoverlay");
   }

and inside dataLayerAnalytics.js the item is being pushed to the data layer

 export const logoutDataLayer = (logoutplace) => {

  let logoutDatalayer = {
    "event": "loyaltyLogout",
    "logoutContext": logoutplace
  }
  window.dataLayer.push(logoutDatalayer);
}

All of this is working fine on my local machine. But after I deployed it to the production environment the localStorage.removeItem("logoutPlace") inside the Main.js is not getting executed and the code can't reach localStorage.removeItem("logoutPlace") as well. That's why the item "logoutoverlay" doesn't get removed from the local storage.

And since I am unable to replicate this issue on my local system, I can't even debug the code.

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
Abhiek
  • 21
  • 1

1 Answers1

0

Introduction

Your problem statement is that

localStorage.removeItem("logoutoverlay");

is not executed on prod, but it is successfully executed on your dev env. Since we do not have your source-code we cannot tell you for sure what the problem is, but we can tell you how you can find out what the problem is. This answer focuses on the method of finding out what the issue is.

How to debug the client-side of prod

If your source-code is available on prod, then you can debug your client-side code, written in Javascript via the Sources tab of your browser's dev tools. You can reach it via:

right-click anywhere on the page -> click on inspect/inspect element (the text varies accross browsers) -> dev tools appear, usually with the Elements tab being shown by default -> click on Sources -> find Main.js and click on that

Now, in your Main.js you can click on the left-most edge of the source-code's lines to put in breakpoints and from there on you can debug.

If the client-side code is minified on prod, then you have several options to proceed. You could download the minified script into your dev env and temporarily use that to debug. Or, you can implement a testing mode on prod, which would allow you to load and use the original, not minified js code, which would allow you to debug your prod's client-side code in the browser.

Make sure you compare apples with apples

It is certainly possible that your server has a different version of your client-side code, which behaves differently. Make sure that you have equivalent source-code on the server as in your dev env, since, if these are different, then it is unsurprising that they behave differently. To do so, you need to:

  • clear your browser cache or open the page in incognito mode in order to avoid being misled by old file versions being loaded into your browser either on server or client-side
  • clear your server cache if you have one, since that prevents new code from being used for a while
  • download Main.js from the server and study it, possibly comparing it to the Main.js you have on the dev environment
  • if you don't use a version controller, then it is high time you start using one. If you have a version controller, then, using it look at the commit hash of the latest commit and the branch being in use at both, maybe pulling/pushing in order to ensure that the versions are the same

Check user state on client-side and server-side

This is the problematic section of your code:

if(localStorage.getItem("logoutoverlay"))
{
    logoutDataLayer(localStorage.getItem("logoutoverlay"));
    localStorage.removeItem("logoutoverlay");
}

Maybe on your server's localStorage you do not have logoutoverlay. Maybe you have logged in to your server before that value was tracked and never logged in since. If it's just a matter of user state, then basically the problem is just coping with differences of versions.

Be careful about user states when you deploy session logic changes

You implement some logout logic which assumes some values inside localStorage. What if that value is not inside localStorage, because the user logged in before the change that creates it was deployed. The last thing you want is to have some broken user sessions, so make sure that your work covers the case when users logged in before your deploy and their session still exists. If during deployment all sessions are destroyed, then this is not an actual concern.

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175