Preview: builder.get() inconsistent return; sometimes Errors

Hello,

First time joining the forum and reading through some bug posts, I wasn’t able to find a related issue or solution and want to check if this is a known bug.

I created a few fields for a Page Modal. In preview and running locally, when fetching:

const content = await builder
      .get(LANDING_PAGE, {
        url: pageUrl,
        cachebust: true,
        preview,
      })
      .promise();

there is sometimes an Error and other times successfully returns content. Refreshing the preview url gives inconsistent results.

Screenshot 2023-09-12 at 12.11.29

If it is not a known issue, I am happy to provide further information to work towards resolution.

Hi @jdsmith022 , Welcome to the forum community!

Could you share a request sample for Success and Failure case? We can further examine this issue.

Thank you for reaching out here!

Hello jdsmith022,

Just wanted to follow up. If you are able to share a Success and Failure case, we would be better able to assist.

Hello,

Apologies for the late reply. The request for both when the content is returned and an error occurs response with a 200 and I can see the correct data present in the response in the network tab. However, the UI is not updated consistently and when logging the content I receive the following error message.

It makes it difficult for our non-tech team members to edit pages if the data is not be updated properly in the preview.

Here is the curl for success:

curl 'https://cdn.builder.io/api/v3/query/e63aabfdb0a345afbc93cb9bcfa3a47b/onboarding-landing-page?omit=meta.componentsUsed&apiKey=e63aabfdb0a345afbc93cb9bcfa3a47b&userAttributes.urlPath=%2Fo%2Flike-jessica&userAttributes.host=registrieren.cliq.de&userAttributes.device=desktop&cachebust=true&isEditing=true&noCache=true&overrides.onboarding-landing-page=4fff4d232b3b4f26a0f09252a39d2938&overrides.4fff4d232b3b4f26a0f09252a39d2938=4fff4d232b3b4f26a0f09252a39d2938&overrides.onboarding-landing-page%3A%2Fpreview%2F=4fff4d232b3b4f26a0f09252a39d2938&options.onboarding-landing-page.preview=true&options.onboarding-landing-page.model=%22onboarding-landing-page%22&preview=true' --compressed -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/117.0' -H 'Accept: */*' -H 'Accept-Language: en-US,en;q=0.5' -H 'Accept-Encoding: gzip, deflate, br' -H 'Referer: https://registrieren.cliq.de/' -H 'Origin: https://registrieren.cliq.de' -H 'Connection: keep-alive' -H 'Sec-Fetch-Dest: empty' -H 'Sec-Fetch-Mode: cors' -H 'Sec-Fetch-Site: cross-site' -H 'Pragma: no-cache' -H 'Cache-Control: no-cache' -H 'TE: trailers'

and failure:

curl 'https://cdn.builder.io/api/v3/query/e63aabfdb0a345afbc93cb9bcfa3a47b/onboarding-landing-page?omit=meta.componentsUsed&apiKey=e63aabfdb0a345afbc93cb9bcfa3a47b&userAttributes.urlPath=%2Fpreview%2F&userAttributes.host=registrieren.cliq.de&userAttributes.device=desktop&cachebust=true&isEditing=true&noCache=true&overrides.onboarding-landing-page=4fff4d232b3b4f26a0f09252a39d2938&overrides.4fff4d232b3b4f26a0f09252a39d2938=4fff4d232b3b4f26a0f09252a39d2938&overrides.onboarding-landing-page%3A%2Fpreview%2F=4fff4d232b3b4f26a0f09252a39d2938&options.onboarding-landing-page.model=%22onboarding-landing-page%22&preview=true' --compressed -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/117.0' -H 'Accept: */*' -H 'Accept-Language: en-US,en;q=0.5' -H 'Accept-Encoding: gzip, deflate, br' -H 'Referer: https://registrieren.cliq.de/' -H 'Origin: https://registrieren.cliq.de' -H 'Connection: keep-alive' -H 'Sec-Fetch-Dest: empty' -H 'Sec-Fetch-Mode: cors' -H 'Sec-Fetch-Site: cross-site' -H 'Pragma: no-cache' -H 'Cache-Control: no-cache' -H 'TE: trailers'

Thank you for your assistance.

Hello,

Just checking in if there has been any further investigation on this as the issue still persists.

Thank you again for your help.

Hello @jdsmith022,

We have conducted an initial review of the URLs you provided. However, we were unable to reproduce the reported issue. In order to further investigate and assist you effectively, could you kindly provide us with some additional details? Specifically, we would appreciate it if you could share the Content URL and specify the SDK versions you are utilizing, particularly for the @builder.io/react framework.

Thank you!

Hello,

Thank you for you’re reply.

I can confirm I’m still received inconsistent rendering in the preview. Refreshing the preview url sometimes renders the page correctly reflecting the page’s custom field data, but mostly it does not. (Attached gif illustrates this with the logo in the navigaiton).

I’m unsure exactly what you mean by the Content Url, but is this what you need? content/4fff4d232b3b4f26a0f09252a39d2938

Sdk version:
@builder.io/sdk” “2.0.7”

Thank you again!

refresh

Hi,

Thank you for providing the content URL. I attempted to access it and refreshed the preview URL multiple times, but I couldn’t encounter the issue. Additionally, the content displayed on the page seems to differ from what you shared. Please note that the content URL refers to the browser URL when viewing specific content within the Builder editor.

To further investigate the problem, could you kindly share a video recording of the issue with the browser console open? This will help us identify any potential errors. It appears that the issue may be related to a Custom component called “Content Header,” and examining the console could provide valuable insights.

Thank you for your cooperation.

Hi,

Yes, I changed the image in the header, apologies for the confusion.

The issue is actually visible in the image you shared. The logo should be white based on the toggled Navigation white logo in the right side field props. This prop and the Navigation itself is not part of the ContentHeader custom component. As I displayed in the gif, if you refresh the url, at some point the logo does render white, but does so inconsistently. When the logo does render white correct, the following data is logged in the console:

This is not logged when the logo isn’t rendered correctly.

Here is a video/gif of the issue as requested:

ezgif.com-optimize

Thank you again for your continued help :slight_smile:

Hello,

If I understand correctly, you would like to enable live preview for a custom field. To achieve this, you may need to wrap your custom field, or in this case, the logo, with BuilderContent. I recommend checking out this link, which explains how to use BuilderContent to pass input data from the model to components that exist outside of the rendered content. You can also find more information here.

Please give it a try and feel free to reach out if you have any further questions.

Hi,

Thank you for your help. I am already able to live preview the custom field, however there is not a consistent return for the live preview custom data, hence this bug report. Sometimes the custom field data is available in the live preview, and other times it is not. That is why the navigation logo sometimes renders white (from the custom field data as shown in the above video) and sometimes not (an error occurs, mentioned in previous screenshot and comments, and the the live preview doesn’t receive the custom field data and the logo is rendered red, the default value).

Hello,

Been almost two weeks, so I’m guess there won’t be further help assistance at this time. I still have the issue of the page custom fields when refreshing the preview url in builder. Sometimes the custom field data is being received and rendered correctly in builder preview but mostly do not. I am not sure how else to provide further information to assist but hopefully there will be some solution in the future.

Hi @jdsmith022 ,

I apologize for the delay in getting back to you. Could you please update the “@builder.io/sdk” version to the latest release, which is 2.0.8? If this update doesn’t resolve the issue, could you kindly share the code snippets related to the integration and rendering logic? This will help us pinpoint the root cause of the problem.

Thank you for your patience and understanding.

Hi @jdsmith022 - Wanted to check if @OmPrakash’s suggestions helped progress the resolution of the issue you experience(d)?
Thanks!