Static site duplicate snapshot errors

[LukyVj]

Hello, and thank you for creating this plugin. We need to use it at Algolia, and everything went smoothly until the code reaches CircleCI.

For a reason, I errors like this for every single page:

[percy] serving static site at http://localhost:5339/
[percy] snapshot taken: '/404.html'
[percy] StatusCodeError 400 - {"errors":[{"status":"bad_request"},{"source":{"pointer":"/data/attributes/base"},"detail":"The name of each snapshot must be unique, and this name already exists in the build: '/404.html' -- You can fix this by passing a 'name' param when creating the snapshot. See the docs for more info on identifying snapshots for your specific client: https://percy.io/docs"}]} | Wed Mar 04 2020 14:30:35 GMT+0000 (Coordinated Universal Time)

From my understanding, at our user level, it is impossible to "pass a 'name' param" unless we fork the plugin?

Would you be willing to look into it? Or have you already had such experiences with this error?

Thank you!

[Robdel12]

Hey @LukyVj, thanks for opening an issue! This shouldn't be possible, the name of the snapshot for static sites are the file path + file name. It looks there's a bug in fast-glob (which globby depends on) that causes duplicates to make it in: https://github.com/mrmlnc/fast-glob/issues/190

Looks like we'll have to dedupe the array ourselves to fix this one

[Robdel12]

Hey @LukyVj! Would you be able to share what the config looks like? https://docs.percy.io/docs/sdk-configuration#section-static-snapshots

As I work on this, I'm realizing you probably don't have a local file path in any of your globs, but I want to double check what your config is.

I'm wondering if this isn't an SDK issue and maybe a CI config issue?

and everything went smoothly until the code reaches CircleCI.

This could be a parallel builds issue. If your build is set into parallel mode, you could/would get duplicate snapshot errors with this SDK. There's no way to parallelize this SDK either, so there wouldn't be any need to get into parallel mode.

[LukyVj]

Hey @Robdel12 ! Sorry for the delay, I was somewhat off for a few days.

So, I'm no expert in this whole percy topic, but I believe there is a default value for these globs.

It could indeed be a parallel issue, as I'm not familiar with this, I know I enabled some on Circle, so it could be the issue. I'm going to try to remove it and see if it works.

Anyway, here is our config file: ( due to some potentially sensible information, I'll share the needed subset of config )

Circle config:

defaults: &defaults
  working_directory: ~/AlgoliaWeb_static-react
  parallelism: 3
  docker:
    - image: circleci/node:11.12.0

[...]

  test_visual:
    <<: *defaults
    steps:
      - checkout
      - run: *install_yarn_version
      - restore_cache: *restore_yarn_cache
      - run: *run_yarn_install
      - save_cache: *save_yarn_cache
      - run:
          command: export PERCY_TOKEN=$PERCY_TOKEN
      - run:
          name: Install Headless Chrome dependencies
          command: |
            sudo apt-get install -yq \
            gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
            libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \
            libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 \
            libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates \
            fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
      - run:
          command: yarn build

workflows:
  ci:
    jobs:
      - test_lint
      - test_e2e
      - test_visual

Percy config:

version: 1
snapshot:
  widths: [1280]
  min-height: 1224
  percy-css: |
    iframe,
    .cookies-eu,
    #drift-widget-container,
    foo {
      display: none;
    }
agent:
  asset-discovery:
    network-idle-timeout: 500 # .ms
    page-pool-size-min: 5 # pages
    page-pool-size-max: 20 # pages

As I said, I'm going to try to run it with the parallel disabled and see if it works.

[Robdel12]

Hey @LukyVj! Thanks for that info. Yeah, I'm fairly confident this is a CI config issue now. I saw z commit message mentioning the CircleCI org we provide, which shouldn't be used for static sites (that puts your builds into parallel mode). I also see parallelism: 3 at the top of the file, how are these tests running? Is test_visual run on each one of those nodes? If so, that will cause duplicate snapshot errors. The static site SDK will need to run once serially. You may need to move that out of a parallelized setup and then manually set PERCY_PARALLEL_TOTAL=1

Also, FWIW, you could get rid of all the Chrome deps you're installing and use a CircleCI image with browsers installed: - image: circleci/node:11.12.0-browsers

[LukyVj]

Hey @Robdel12 So, you were right the first time, I completely got rid of all the parallelism mention, and same on the circle side.

I think I got lost between all the resources there is about percy ( percy as gatsby plugin, as circle orb, etc..) and assumed the parallelism was needed!

So it's all good for now! As I said, I'm not really good ad CIs so it was kind of a blurry task for me.

As for your last point, I'm definitely gonna try this. Thanks a lot for the assistance, and I will keep you posted about how things are going! Thanks a bunch.

Lucas.

[Robdel12]

No problem! Feel free to comment back here if anything else comes up. Happy we could get that worked out 😃 🎉 (and again, feel free to ask any questions! 😎 )

[LukyVj]

Hey! Just a quick messageto thank you for the "- image: circleci/node:11.12.0-browsers" it worked like a charm!

[Robdel12]

AHHH that's great to hear! 😃