window.dataLayer.push 在本地机器上工作，但不在生产环境中

问题描述

这是注销逻辑，这里的关键logoutoverlay，设置在本地存储中。

   <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>
               

在 Main.js 中，检查本地 localStorage 的键 logoutoverlay

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

在 dataLayerAnalytics.js 中，项目被推送到数据层

 export const logoutDataLayer = (logoutplace) => {

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

所有这些在我的本地机器上运行良好。但是在我将它部署到生产环境之后，Main.js 中的 localStorage.removeItem("logoutPlace") 没有被执行，代码也无法到达 localStorage.removeItem("logoutPlace")。这就是“logoutoverlay”项不会从本地存储中删除的原因。

而且由于我无法在本地系统上复制此问题，因此我什至无法调试代码。

解决方法

简介

你的问题陈述是

localStorage.removeItem("logoutoverlay");

不在 prod 上执行，但在您的 dev env 上成功执行。由于我们没有您的源代码，我们无法确定问题是什么，但我们可以告诉您如何找出问题所在。这个答案侧重于找出问题所在的方法。

如何调试prod客户端

如果您的源代码在 prod 上可用，那么您可以通过浏览器开发工具的“源”选项卡调试用 Javascript 编写的客户端代码。您可以通过以下方式访问它：

右键单击页面上的任意位置-> 单击检查/检查元素（文本因浏览器而异）-> 开发工具出现，通常默认显示元素选项卡-> 单击源-> 查找主要内容。 js 并点击它

现在，在 Main.js 中，您可以单击源代码行的最左侧边缘以放置断点，然后您可以从那里进行调试。

如果客户端代码在 prod 上被缩小，那么您有几个选项可以继续。您可以将缩小的脚本下载到您的开发环境中，并暂时使用它进行调试。或者，您可以在 prod 上实现一种测试模式，这将允许您加载和使用原始的而非缩小的 js 代码，这将允许您在浏览器中调试 prod 的客户端代码。

确保将苹果与苹果进行比较

很可能您的服务器有不同版本的客户端代码，它们的行为不同。确保服务器上的源代码与开发环境中的源代码相同，因为如果它们不同，那么它们的行为不同也就不足为奇了。为此，您需要：

• 清除浏览器缓存或以隐身模式打开页面，以避免被服务器端或客户端加载到浏览器中的旧文件版本误导
• 清除服务器缓存（如果有），因为这样可以防止新代码在一段时间内被使用
• 从服务器下载 Main.js 并研究它，可能会将其与开发环境中的 Main.js 进行比较
• 如果您不使用版本控制器，那么是时候开始使用版本控制器了。如果您有版本控制器，则使用它查看最新提交的提交哈希和两者都使用的分支，可能会拉/推以确保版本相同

在客户端和服务器端检查用户状态

这是您的代码有问题的部分：

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

也许在您服务器的 localStorage 上没有logoutoverlay。也许您在跟踪该值之前已登录到您的服务器，此后从未登录过。如果只是用户状态的问题，那么基本上就是版本不同的问题。

在部署会话逻辑更改时要注意用户状态

您实现了一些注销逻辑，该逻辑假定 localStorage 中的某些值。如果该值不在 localStorage 内怎么办，因为用户在创建它的更改部署之前登录。您最不希望出现一些损坏的用户会话，因此请确保您的工作涵盖用户在部署之前登录并且他们的会话仍然存在的情况。如果在部署期间所有会话都被破坏，那么这不是一个真正的问题。