Check If URL produces a 404 error

[AccoladeRetool]

Hi,

I have a use case where I have a URL in a text component that takes the user to an outside webpage, however sometimes this URL gives a 404 error. I am wondering if there is a way inside Retool to be able to output a true if the webpage exists or a false if the 404 error is produced? The purpose of this is that if a 404 error exists on the outside webpage, then the user see's a red checkmark or some attribute so they know what they are look for doesn't exist. I have tried using the below with my URL as the variable but Retool outputs a null value whether it exists or not. Is what I am describing possible in Retool? Thanks
var url = window.location.href;
function UrlExists(url) {
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
if (http.status != 404)
return true;
else
return false;
}

[ScottR]

You can add the JS under the ... menu
and then call the function in a JS query BUT it seems that there may be a limitation in Retool in doing so.... I do get an error but haven't been able to dig into it . Perhaps someone else has done this before....I have done this in other apps but not in Retool.....a long long time ago

[AccoladeRetool]

Yes I couldn't get this working either. @Kabirdas Do you have any ideas or guidance here?

[Tess]

Hi there! Hmm, I believe lines 2-4 will be blocked in Retool since JS is run in a sandbox I'm not sure of any workarounds, but I can do some testing

[AccoladeRetool]

@Tess That would be great if you could do some additional testing or discover a workaround. Thanks.

[Tess]

I haven't found any good JS solutions

Could you trigger a get RestQuery for each url and then check for errors in the query response?

[AccoladeRetool]

@Tess Unfortunately not as this is a non api based web url.

[Tess]

Hi @AccoladeRetool

Do you have an example url?

I did some more testing and this code is working for me, but I imagine this might not work for your non api url?

const getData = (resource) => {
  return new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
     request.open("GET", resource);
     request.onreadystatechange = () => {
     if (request.readyState === XMLHttpRequest.DONE) {
     let status = request.status;
    if (status === 0 || (status >= 200 && status < 400)) {
      // The request has been completed successfully
       resolve('success');
    } else {
      reject('error')
    }
  } 
};
    request.send();
  })
                     }
return getData("https://www.httpbin.org/400")
  .then((data) => {
    return data;
  })
  .catch((err) => {
    return err;
  });

[AccoladeRetool]

Hi @Tess Thank you for your prompt response. I am using a git hub url https://github.com/konciergeMD/pegasus_config/blob/develop/acp_extra/partner_conf/aaa_elig_aaa.cfg but I suspect you won't be able to use this because it requires authentication. How about a generic web address like www.accolade.com?

[AccoladeRetool]

@Tess The code you provided does work for the link I provided as I get a success response, although i get success despite getting a 404 page error in github. ideally the goal is if the user clicks the link and the page produces a 404- page not found like in the screenshot, they get an error else success. Maybe this is a github thing?

[Tess]

Hi @AccoladeRetool,

If it helps, the REST API approach works for both of these urls:

-https://github.com/konciergeMD/pegasus_config/blob/develop/acp_extra/partner_conf/aaa_elig_aaa.cfg

-https://www.accolade.com/

You can see the response status on the bottom right of this screenshot:

[Tess]

Crossing my fingers you're mainly using this for Github urls that can work with the rest approach

[Tess]

These are the two main approaches that come to mind as far as how to implement this in Retool, but I think there's possibly some urls that wouldn't be compatible with either approach (for example, maybe if there's some redirect behavior to account for?)

[AccoladeRetool]

@Tess I couldn't get this to work with either approach for this use case. Appreciate the help.

[Tess]

Hi @AccoladeRetool Happy to take a look at some screenshots if you'd like!

[Tess]

Were there other urls that didn't work?