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.
- Install
@prismicio/nextto handle previews - Add the PrismicPreview component to the root of your app
- Configure the preview routes
- Ensure your Prismic repository has the correct preview route
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-previewshave 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.preview
Note: This is not the same as io.prismic.previewSession A full cookie ref should look like a URL:
https://prismic-academy.prismic.io/previews/ZafJyRIAACQAmCLi:Z_zscBEAACAAW_X4?websitePreviewId=ZS6vrxEAACEARkFl%22
So for example to test you pass the full URL as a ref:
https://prismic-academy.prismic.io/api/v2/documents/search?ref=https://prismic-academy.prismic.io/previews/ZafJyRIAACQAmCLi:Z_zscBEAACAAW_X4?websitePreviewId=ZS6vrxEAACEARkFl&src=apibrowser#format=json
Not a small alpha numeric ref like so:
https://prismic-academy.prismic.io/api/v2/documents/search?ref=Z_zrzBEAAJokW_Tu~ZS6vrxEAACEARkFl&src=apibrowser#format=json
Test with the API explorer:
Take the ref from the preview cookie and run it on your API explorer:
https://your-repo-name.prismic.io/builder/explorer
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.
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.
