Troubleshooting: Previews

This article is designed to help you troubleshoot Prismic Previews.

Have you loaded the preview script in your application?

Check in the head of all your pages to make sure the script is present, make sure that the Prismic preview toolbar script is included in your 404 page.

Can you see the preview cookie in the browser?

Click the preview button which should take you to your website, right-click inspect, go to the application tab. Check on the left in the cookies tab for your repo name, you will see a field with the name: io.prismic.preview

This token should look something like this:

https%3A%2F%2Freponame.prismic.io%2Fpreviews%2FXbr_VhAAACMAEdNJ%3AXbr-nBAAACMAEc-_%3FwebsitePreviewId%3DXanozRIAABXZ-ihY&documentId=XbApbxAAACYAP1DJ

Test in the Rest API browser:

Take the value from this field and add it in there

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

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

Test in the Graphql browser:

First, Download ModHeader or a similar extension for your browser. Take the cookie data and when you run the query for the document in your graphql browser:

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

Pass the cookie data as the Prismic-ref field, then run the query again. If you see the correct info then the problem is in the code.

Are you using a kit?

If you're using Prismic JS in a client-side app then it should work without doing any work as it passes the req automatically to get the right content.

With server-side technologies, like Nuxt.js / Next.js / Gatsby make sure 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

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

Did you configure a route to handle redirection, and, Is this route using the link resolver?

In the preview route or page that you have created for your project, make sure 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 that you are trying to preview is from a custom type that has no published documents, then you will need to make sure 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

Are your 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.