Gatsby站点react-cookie-consent Cookie横幅不弹出问题求助

问题背景 #

近期用Gatsbyjs框架搭建上线了第一个站点，因团队需要接入数据分析与Cookie合规提示，选用react-cookie-consent依赖包实现Cookie同意横幅功能。
初次部署上线时组件运行完全正常，上线一周后横幅突然消失。经初步测试，该组件在本地构建环境中渲染、交互均正常，最新构建预览版本也能正常显示横幅。

现有依赖配置 #

项目package.json中相关依赖配置如下：

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "ansi-html": "^0.0.9",
    "gatsby": "^4.18.0",
    "gatsby-plugin-csp": "^1.1.3",
    "gatsby-plugin-gatsby-cloud": "^4.18.0",
    "gatsby-plugin-google-gtag": "^4.18.0",
    "gatsby-plugin-image": "^2.18.0",
    "gatsby-plugin-manifest": "^4.18.0",
    "gatsby-plugin-offline": "^5.18.0",
    "gatsby-plugin-react-helmet": "^5.18.0",
    "gatsby-plugin-robots-txt": "^1.7.1",
    "gatsby-plugin-sharp": "^4.18.0",
    "gatsby-plugin-sitemap": "^5.18.0",
    "gatsby-source-filesystem": "^4.18.0",
    "gatsby-transformer-sharp": "^4.18.0",
    "jpeg-js": "^0.4.4",
    "node-fetch": "^2.6.7",
    "nth-check": "^2.1.1",
    "parse-path": "^5.0.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-cookie-consent": "^7.5.0",
    "react-dom": "^18.2.0",
    "react-helmet": "^6.1.0"
  },
  "devDependencies": {
    "gh-pages": "^4.0.0",
    "prettier": "^2.7.1"

组件实现代码 #

全局布局组件Layout Component中引入并使用该组件的代码如下：

import * as React from "react"
import NavBar from "../navigation/navbar"
import "../../styles/global.css"
import * as styles from "./layout.module.css"
import Footer from "../footer/footer"
import CookieConsent from "react-cookie-consent"
import { Link } from "gatsby"

const Layout = ({ children }) => {
  return (
    <>
      <div className={styles.flex}>
        <NavBar />
        <main>{children}</main>
      </div>
      <CookieConsent
        buttonStyle={{
          background: "#78c0a8",
          cursor: "pointer",
          color: "white",
        }}
        declineButtonClasses={{
          background: "#f07818",
          cursor: "pointer",
          color: "white",
        }}
        location="bottom"
        buttonText="Accepteer de koekjes"
        enableDeclineButton
        declineButtonText="ik wil geen koekjes"
        cookieName="gatsby-gdpr-google-analytics"
        onAccept={() => {
          alert("je hebt de koekjes geaccepteerd!")
        }}
        onDecline={() => alert("je weigerde de koekjes")}
        overlay={true}
        flipButtons={true}
      >
        Omnom Omnom! Wij gebruiken koekjes om jouw ervaring beter te maken. Wil
        je meer weten welke gegevens we verzamelen? Klik{" "}
        <Link to="/privacy">hier.</Link>
      </CookieConsent>
      <Footer />
    </>
  )
}

export default Layout

排查思路与解决方案 #

按以下优先级逐一排查即可定位问题：

• 修复属性传参错误：代码中拒绝按钮的配置属性写错了，declineButtonClasses仅支持传入字符串格式的CSS类名，当前传入的是内联样式对象，会触发JS类型错误。生产环境构建压缩时的异常捕获逻辑会直接阻断出错组件的渲染，把该属性改为declineButtonStyle即可解决这个问题。
• 验证Cookie默认逻辑：react-cookie-consent的默认逻辑是，只要浏览器本地存了对应cookieName的Cookie（不管值是接受还是拒绝），就不会再弹出横幅。上线一周后所有访问过站点的用户浏览器都已经写入了该Cookie，自然看不到横幅。直接开浏览器无痕模式访问，或者手动删除站点下名为gatsby-gdpr-google-analytics的Cookie再刷新，如果横幅正常弹出就属于组件正常逻辑，不需要额外调整。
• 检查CSP插件拦截规则：项目启用了gatsby-plugin-csp内容安全策略插件，默认配置会拦截所有未授权的内联样式、内联脚本。react-cookie-consent默认靠内联样式控制显隐、定位和按钮样式，被CSP拦截后组件会直接处于隐藏状态。临时停用CSP插件后刷新页面，如果横幅恢复显示，就在CSP配置的style-src规则中添加'unsafe-inline'白名单，或者给组件写自定义CSS类覆盖默认内联样式即可。
• 排查离线插件缓存异常：项目启用了gatsby-plugin-offline插件，该插件会在用户首次访问时缓存全站资源，版本迭代时如果缓存更新逻辑有问题，用户会加载到新旧版本混杂的异常资源，导致组件渲染失败。部署新版本时给静态资源添加内容hash，配置离线插件的激活逻辑，检测到新版本时自动清理旧缓存、提示用户刷新页面即可。

内容的提问来源于stack exchange，提问作者Kwinten