Home App Docs Blog Github

IsBrowser doesn't seem to work when page is published

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link

Detailed steps to reproduce the bug
I have tried to add a basic log line to the Builder.IsBrowser block in the JS editor as a debugging step for understanding why my custom fetch request wasn’t working. I was surprised to learn that even this console.log doesn’t work once the page has been published.

Works when in preview console.

Code stack you are integrating Builder with
React only

Reproducible code example

/*

  * Global objects available:

  *

  * state - builder state object - learn about state https://www.builder.io/c/docs/guides/state-and-actions

  * context - builder context object - learn about state https://github.com/BuilderIO/builder/tree/main/packages/react#passing-data-and-functions-down

  * fetch - Fetch API - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API'

  * Builder - Builder object - useful values include: Builder.isServer, Builder.isBrowser, Builder.isPreviewing, Builder.isEditing

  *

  * visit https://www.builder.io/c/docs/guides/custom-code

  * for more information on writing custom code

  */

 async function main () {

  if (Builder.isServer) {

    // Place any code here you want to only run on the server. Any  

    // data fetched on the server will be available to re-hydrate on the client

    // if added to the state object

  }

  if (Builder.isBrowser) {

    // Place code that you only want to run in the browser (client side only) here

    // For example, anything that uses document/window access or DOM manipulation

    console.log('is browser4');

  }

}

export default main();

Hi there, I was wondering if anyone has any suggestions as to why this isn’t working? Many thanks in advance

Hi @tomMisson, I can’t access your page (Error 1020: Access Denied) making this difficult to debug. Could you share your fetch request or perhaps DM me with access? Thanks

Hi there @ ancheetah yeah, sorry, the site we are developing on is a held behind the company vpn hence why I gave the code example…

The fetch statement we are trying to get to work is:

async function main() {
        if (Builder.isBrowser){

        state.blogposts.foreach(blogpost, index){
            
        const author = async () => {
            const raw = await fetch("https://www.masterofmalt.com/blog/wp-json/wp/v2/users/"+blogpost.author)
            let refined = await raw.json();
            return refined.name;
        }

        author().then(res => {state.blogposts[index].author = res});
        }
    }
}

It must be noted thought that even the console.log() when put in the Builder.isBrowser also doesn’t work.

1 Like

Here we are! I have pulled the same builder page in to our public workspace and pointed it at our public api.

https://www.masterofmalt.com/4476-f-749-7-b-5-b-4-fc-3-82-f-1-80-dc-850-c-93-fa/

The console in the builder interface shows the log lines absolutely fine but the live page doesn’t show the log lines and also doesn’t attempt the fetch (can be seen in the network tab)

Hi @tomMisson thanks so much for sharing the public version. I do see that the console.log() message is not appearing on your live page but I’m unable to reproduce this behavior independently in my own test space with your fetch. (Here’s a fiddle where I use your fetch call [Fiddle], and here’s the live page where it logs ok in the console [Live]). Could there be something in your code for that page template suppressing console logs?

Hi @ancheetah, hmmm very odd indeed, we don’t have anything that would strip them out/supress them…

I have updated the fiddle to accurately reflect what we are trying to do as console logging was not really a concern of ours, more that the results of the fetch aren’t loading… Fiddle

When the fiddle is updated to map data in to components, it works in the preview but not the published page.

@tomMisson I’ll bring this bug up with our engineering team and update you here when we have a solution. In the meantime, a workaround could be to fetch from both your endpoints in the Content API Data section in the Data tab then use custom JS to map the authors from one dataset to the other. Hope this helps!

https://builder.io/fiddle/83316a8c065f43b7a12678ad67a52705

@ancheetah Amazing! Cheers, will give it a go