Preview Toolbar errors out when I'm using a repo with accessToken

Developing with Prismic
1

Hello,

My preview work, but my toolbar errors out and I can't find what's the error. Just the other day I integrated a Preview for another client (who doesn't have accessToken) and it worked great. Now I'm integrating the Preview for existing Prismic website (but migrating to another framework) and they have an accessToken, but I get the following error when trying to implement it. From what I can see, the only difference between the two is that the latter has an accessToken

Failed to load resource: the server responded with a status of 404 ()
iframe.html:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

My preview toolbar script is in _document.tsx as described in the documentation

        <Head>
          <script
            async
            defer
            src={`//static.cdn.prismic.io/prismic.js?repo=${prismicRepoName}&new=true`}
          />
        </Head>

Any other ideas how I could debug this?

Thanks,
Kris

2

Hello @kris, thanks for reaching out!

It seems like something in your application is broken.

  • Which framework are you using in your project?
  • How is your preview configuration setup?
  • Have you loaded the preview script on all pages of your application?

Also, here's a troubleshooting guide that you might find helpful

4

Hi @Pau - thanks for the reply

  • I'm using NextJS with @prismicio/client 4.0.0 & Slice Machine, typescript.
  • It's identical to Previews with Next.js - Prismic
  • Yes, as per docs - I have loaded it in _document.js

The troubleshooting article was not helpful unfortunately. Any advise to how to get this going will be much appreciated!

I've tried opening a preview link in Chrome, Opera & Safari but the error message was the same.

The interesting thing is that I worked on another client's project with a similar setup, and it worked flawlessly. The main differences with this project is

  • already existing project
  • has accessToken

Let me just saw again that the preview function is working - the problem is that the toolbar errors out

5

Hi @Pau - any updates on this? My preview iframe still errors out and I can't quite figure it out. Repo name is kontist-demo - it works for the existing website (built in svelte) but it errors out in the nextjs website we are building

6

Hey, have you tried deleting the cache from your browser and tried again? Sometimes the preview session cookies interfere with the new sessions.

Can you show me a screenshot of the error appearing in the toolbar?

7

@Pau I tried deleting the cache, but that's not the problem. I also tried in Safari and my colleague also tried, but the error remains the same.

Here is a screenshot of my console.

Screenshot 2021-05-19 at 22.59.07
Screenshot 2021-05-19 at 22.59.072870×492 53.6 KB

In my DOM, my script is outputted as the following:

<script async="" defer="" src="https://static.cdn.prismic.io/prismic.js?new=true&amp;repo=kontist-demo"></script>
8

Hi Kris,

This should work for you now, it seems this repo was on the old toolbar.

Thanks.

9

That's amazing, thanks a lot for the help!

12

Hey,

Unfortunately the problem appeared all of the sudden once again.

This is what happens once I preview unpublished documents or documents which have new changes (but not yet published).

As before, the preview works and I can see the unpublished changes in my browser. However the toolbar doesn't show up and I get these errors in the console.

Screenshot 2021-06-17 at 11.08.56
Screenshot 2021-06-17 at 11.08.562878×230 62.1 KB

A note worth noting is that if I preview a document with no changes (so identical to production), there are no errors and I see the toolbar successfully.

Something weird is going on, but I can't figure it out. Any help will be greatly appreciated

14

@Phil @Pau Apologies for pinging you again, but do you have any updates regarding this issue? This is a blocker for my client as they are looking to launching soon but Preview is quite important feature for them

15

Hey Kris,

My bad on this, I assigned it and got distracted, sorry.

Can you send me a zip of your project or a Github link so I can check this out. I'm really not sure what could be causing this 500 error.

Thanks.

16

Thanks Phil. DM-ed you a zip file

1 Like
17

Thanks, I'll check this out ASAP.

18

OK, I looked it to it a little further and what's strange is that it worked with no errors the first time I tried the pricing taxes Custom Type:

Screenshot 2021-06-23 at 17.11.32
Screenshot 2021-06-23 at 17.11.321420×843 150 KB

Once I tried from the settings type I started to see the 500 error and the toolbar failed to load, although the toolbar loaded the second time around. The 500 error then began appearing on the pricing taxes Custom Type.

The big thing that also stood out to me was the cross-origin error which could be causing all of this as the cookie and toolbar are coming from Prismic and the project might be blocking them.

Screenshot 2021-06-23 at 17.21.11
Screenshot 2021-06-23 at 17.21.112806×1490 604 KB

I wonder if we fix that will the issue go away. I'll bring this up with the team.

Thanks.

19

Hi Phil,

Thanks a lot looking into this. I didn't notice the cross-origin frame error (how do I recreate it?). Hopefully the internal team will be able to investigate and get to the bottom of it.

Thanks,
Kris

20

It just appeared as soon as I ran the project. Are you testing this on localhost?

21

Yes, local as well as staging. Note that I get the following behaviour:

  1. If I preview a document which doesn't have any changes, I see the toolbar and there are no errors
  2. If I preview a document with saved unpublished changes, I see the preview changes but the toolbar errors out.

Behaviour is pretty weird

24

OK, thanks for the extra info. I found some errors related to this in the logs and passed the issue to the dev team. Hopefully they'll have some time to look in to this soon.

Thanks.