Developer console code is not working under JavaScript of browser monitor

[AK]

Hello Folks,

I wanted to use JavaScript event of Browser click path monitor. I developed one code which ultimately returning me a string.

The dilemma is, when I tried to paste that code in JavaScript event space of browser click path it throws lot of syntax error like for example,

var response = await fetch(https://someapi.com/api/);
var data = await response.json();

here it gives Missing ";" before statement

I build a code on developer console of chrome browser. It worked really well there. I generally use it as a terminal to develop and test small JScript and modify (e.g.- console.log will get change to api.info) it according to requirement of HTTP or Browser monitor.

How can I resolve above syntax errors or is it something not at all supported under JavaScript event of Browse click path monitor?

Can someone help here.

Regards,

AK

[Julius_Loman]

Looks like the editor does not know the await keyword at all and . Using your snippet above gives me the following error:

---

Exception was thrown by the JavaScript code: await is only valid in async functions and the top level bodies of modules

---

which probably pretty explains why it is also not working even if you save the JavaScript synthetic event.


If you need to call an external API in your JavaScript event, you can do it this way.

api.startAsyncSyntheticEvent();
fetch('https://randomuser.me/api/').then((resp) => resp.json()).then(function(data) {
    document.getElementById('firstName').value = data.results[0].name.first;
    document.getElementById('lastName').value = data.results[0].name.lastname;
    api.finish();
}).catch(function(error) {
    api.fail('Fetch request to randomuser.me failed');
});

[AK]

@Julius_Loman, Will it allow to iterate through multiple fetch call under one JavaScript event like below,

fetch('https://someapi.com/api/'+numbers+'/values')

I wanted to save each value on each iteration of fetch call and use it for further processing.

[Julius_Loman]

@AK Sure you can do multiple fetch calls in your single JavaScript synthetic event. Just it must finish within a reasonable time ( I think the timeout is 100 seconds for the whole JavaScript event ).

[AK]

@Julius_Loman, yes all my calls could finish in < 1000ms however, my code returns [object Promise] and I'm stuck there. I tried lot of solutions from forums but none them worked.

Have you encountered in such situation and resolve it successfully.

[Julius_Loman]

I'm lame with JS and promises, but I guess you need something like this if I understood your requirements - fetching multiple APIs in parallel and do something with the data in a browser monitor step:

api.startAsyncSyntheticEvent();
api.info("About to fetch some APIs");
urls = ["https://pokeapi.co/api/v2/pokemon/1", "https://pokeapi.co/api/v2/pokemon/2", "https://pokeapi.co/api/v2/pokemon/3"];
Promise.all(urls.map(url =>
    fetch(url).then(response => response.json())
)).then(responses => {
    responses.map(response => api.info(response.name));
    api.finish();
}, responses => {
    api.fail("Failed to fetch responses");
});

[AK · Accepted solution]

@Julius_Loman, I'm able to resolve it. Thank you for your suggestions and taking a time to respond.