Javascript errors on prismic.io domain when attempting a preview

Developing with Prismic
1

Describe your question/issue in detail

When attempting to preview, I just get a new tab with about:blank and errors in the console on the prismic.io side. It seems there is an issue generating the link to my preview itself, not an issue with my website.

Video of Issue

image
image898×1014 176 KB

I see something is attempting to embed our website in an iframe, this is not allowed by our CSP, is this the slice previews perhaps?

I also get a 429 from sentry though I doubt this is related.

Impacted feature

Preview

What steps have you taken to resolve this issue already?

Cleared all application data and logged back in

Restarted dev server

Errors

Refused to display '' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
...
frame-modern.1da45d24.js:1 [Intercom] Launcher is disabled in settings or current page does not match display conditions
fetch.js:41

POST https://o146123.ingest.sentry.io/api/4505250989408256/envelope/?sentry_key=&sentry_version=7&sentry_client=sentry.javascript.browser%2F7.53.0 429 (Too Many Requests)
i @ fetch.js:41
d @ base.js:52
i @ promisebuffer.js:41
o @ base.js:68
_sendEnvelope @ baseclient.js:587
sendEvent @ baseclient.js:284
sendEvent @ client.js:87
(anonymous) @ baseclient.js:543
(anonymous) @ syncpromise.js:74
(anonymous) @ syncpromise.js:178
_executeHandlers @ syncpromise.js:171
(anonymous) @ syncpromise.js:92
ol @ syncpromise.js:53
then @ syncpromise.js:64
_processEvent @ baseclient.js:520
_captureEvent @ baseclient.js:444
(anonymous) @ baseclient.js:100
(anonymous) @ syncpromise.js:74
(anonymous) @ syncpromise.js:178
_executeHandlers @ syncpromise.js:171
(anonymous) @ syncpromise.js:92
ol @ syncpromise.js:53
then @ syncpromise.js:64
captureException @ baseclient.js:100
(anonymous) @ hub.js:125
_withClient @ hub.js:410
captureException @ hub.js:124
Pd @ exports.js:20
(anonymous) @ SlicePreview.tsx:128
Promise.catch
S @ SlicePreview.tsx:123
CL @ react-dom.production.min.js:244
h4 @ react-dom.production.min.js:286
ppt @ react-dom.production.min.js:283
Z1 @ react-dom.production.min.js:281
kme @ react-dom.production.min.js:273
bg @ react-dom.production.min.js:127
ppt @ react-dom.production.min.js:283
Z1 @ react-dom.production.min.js:281
Hxe @ react-dom.production.min.js:269
S @ scheduler.production.min.js:12
D @ scheduler.production.min.js:12

Your Role

Software Engineer

Hosting provider

Netlify

Package.json file

Can share if needed

Steps to reproduce

Attempt to use the preview feature

2

To clarify, I cant replicate all the js errors in the console from the video now, after clicking preview there is a delay and then a 429 from sentry.

Perhaps sentry is set up in a way such that if the request fails it does not continue to generate my preview url?

3

Hey @garrett1, welcome to the community and thanks for the detailed video!

Out of curiosity, have you setup a preview route in the repos. settings? If so, what your preview route look like in your codebase?

4

Hi @garrett1 ,

The iframe is needed to 1. load the preview tool bar and edit button on the screen and 2. load the preview data into your page using third party cookies.

If the iframe is blocked you won't be able to use the preview feature.

The sentry 429 seems a knock on within your system.

Thanks.