Cookies When Previewing Unpublished Documents

Developing with Prismic
1

Greetings Prismic team.

I took the time to develop a slice for a client today (used the Shadcn accordion component - love it).
I built a page and used the slice. Naturally, I didn't publish the page. I got the production preview link from the preview toolbar and sent it to my client. They sent back a screenshot of the 500 error they see when visiting the link.

This is not the result I nor Prismic want to provide. So I set out to try to figure out what is happening (at least as best as I can). I've noted the following:

When visiting the preview link of an unpublished document in a guest window (no existing preview cookies), the preview fails. I've seen 500 or 404 errors depending on the project. When I check the developer tools and inspect the application tab and look for cookies, there are NONE.

If I then generate a preview link for a published page in the same Prismic repo and visit it in the same guest window, the preview works and successfully sets the preview cookies. The cookies come from two places:

1.  [myclientsdomain].com
  - __prerender_bypass
  - io.prismic.preview
2. [clientprismicreponame].prismic.io
  - io.prismic.previewSession

When I visit the unpublished page in a Guest window, only the __prerender_bypass and the io.prismic.preview cookies are set. The io.prismic.previewSesssion is not set.

Can/will anyone else attempt to confirm if they are experiencing this behavior? In case you're wondering, here's my package.json dependencies:

    "@headlessui/react": "latest",
    "@prismicio/client": "latest",
    "@prismicio/next": "latest",
    "@prismicio/react": "latest",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@tailwindcss/forms": "latest",
    "@types/node": "latest",
    "@types/react": "latest",
    "@types/react-dom": "latest",
    "axios": "latest",
    "class-variance-authority": "^0.7.0",
    "eslint": "latest",
    "eslint-config-next": "latest",
    "framer-motion": "latest",
    "googleapis": "latest",
    "lucide-react": "^0.321.0",
    "next": "latest",
    "react": "latest",
    "react-dom": "latest",
    "react-hook-form": "latest",
    "react-icons": "latest",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "latest",
    "zod": "latest"
  },
  "devDependencies": {
    "@slicemachine/adapter-next": "latest",
    "@tailwindcss/aspect-ratio": "latest",
    "@tailwindcss/typography": "latest",
    "autoprefixer": "latest",
    "clsx": "^2.1.0",
    "concurrently": "latest",
    "postcss": "latest",
    "prettier": "latest",
    "prettier-plugin-tailwindcss": "latest",
    "schema-dts": "latest",
    "slice-machine-ui": "latest",
    "tailwind-merge": "^2.2.1",
    "tailwindcss": "3.3.3"
  }
3

Hi @nf_mastroianni ,

It sounds like the 404 page is rendering without the application layout. When an unpublished preview is shared the Next.js app has to first hit the 404 page and if the application layout isn't used there it can't trigger the /api route to load the preview system.

Does that sound possible?

4

I’m not sure what this issue was because I changed nothing and it seems to be working now.

1 Like