Troubleshooting: Previews

Prismic Administrative Support FAQs
1

This article is designed to help you troubleshoot Prismic Previews.

NextJS

If you're using Next.js make sure you have covered all the following setup steps.

Other frameworks

Have you added the Prismic preview toolbar script to your site?

Check in the <head> or <body> of your pages to make sure the script is present on all pages, including the 404 page. It looks like this:

<script async defer src="https://static.cdn.prismic.io/prismic.js?new=true&repo=your-repo-name"></script>

Note that some kits and plugins, e.g. @prismicio/next, gatsby-plugin-prismic-previews have the script built in. So you don't need to add it manually

Can you see the preview cookie in the browser?

Click the preview button to take you to your website, right-click inspect, and go to the application tab. Look for your website's URL in the cookies tab on the left, and you will see a field with the name: io.prismic.previewSession

Test with the Rest API browser:

Take the ref from the preview cookie and run it on your API browser

https://your-repo-name.prismic.io/api/v2/documents/search?ref=the-api-ref-in-your-cookie

Open the page. If it works, then the problem is in the code.

Test in the Graphql browser:

Download ModHeader. Open your GraphQL explorer and run a test query:

https://my-repo-name.prismic.io/graphql.

Open ModHeader and add a field called Prismic-ref with the value of the preview cookie. Then run the query again. If you see the correct info then the problem is in the code.

Are you using a kit?

The preview should work without any additional work if you're using Prismic JS in a client-side app. Kits pass the req automatically to get the right content.

With server-side technologies, like Nuxt.js / Next.js / Gatsby, ensure you're getting and passing the req when doing your queries.

I'm landing on the wrong page / I'm landing on the homepage all the time

Ensure that the Link Resolver in your repo Settings > Previews is set up to redirect to the correct page.

image
image2000×726 82.6 KB

Did you configure a route to handle redirection, and is this route using a resolver?

In the preview route or page you have created for your project, ensure you are correctly passing the preview token through the link resolver so that your project redirects to the correct page. Here's an example in node.js of how this should look:

app.get('/preview', (req, res) => {
  const token = req.query.token
  if (token) {
    req.prismic.api
      .previewSession(token, PrismicConfig.linkResolver, '/')
      .then((url) => {
        res.redirect(302, url)
      })
      .catch((err) => {
        res.status(500).send(`Error 500 in preview: ${err.message}`)
      })
  } else {
    res.send(400, 'Missing token from querystring')
  }
})

Notice the token is passed with the link resolver PrismicConfig.linkResolver .

I'm using link resolver but it's still not working

Refer to your favorite technology's documentation to learn more about what the link resolver is and what it does you can read our full documentation. Below is an example of what a working link resolver might look like:

exports.linkResolver = (doc) => {
  if (doc.isBroken) {
    return '/not-found'
  }
  if (doc.type === 'homepage') {
    return '/'
  }
  if (doc.type === 'page') {
    return `/${doc.uid}`
  }

  return '/'
}

Are you trying to preview an unpublished document?

If the document you are trying to preview is from a Custom Type with no published documents, then you will need to ensure that the Prismic preview toolbar script is included in your 404 page.

Has your Prismic preview token expired?

The preview token expires once the saved information has been archived or published. The preview token generated is only valid for the information being previewed at that time.

Are your previews not working in Chrome?

Remember to allow cookies on your Prismic websites by accessing your browser settings at chrome://settings/cookies

Previews not working in Safari?

If your previews are working everywhere, but not in Safari, then the issue is an easy fix. Safari released an update that blocks cross-site cookies. Our preview system uses these cross-site cookies to build the previews on top of your web app, so you will need to access your Safari Preferences > Privacy and deselect Prevent cross-site tracking.

2

Threads close after a period of inactivity. Flag this thread to re-open it and continue the conversation.