topic Re: Developer console code is not working under JavaScript of browser monitor in Open Q&A

Developer console code is not working under JavaScript of browser monitor

AK — Mon, 16 Jan 2023 19:55:27 GMT

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,

Re: Developer console code is not working under JavaScript of browser monitor

Julius_Loman — Tue, 17 Jan 2023 08:29:17 GMT

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'); });

Re: Developer console code is not working under JavaScript of browser monitor

AK — Sat, 21 Jan 2023 21:09:55 GMT

@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.

Re: Developer console code is not working under JavaScript of browser monitor

Julius_Loman — Sat, 21 Jan 2023 21:58:09 GMT

@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 ).

Re: Developer console code is not working under JavaScript of browser monitor

AK — Sun, 22 Jan 2023 11:30:00 GMT

@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.

Re: Developer console code is not working under JavaScript of browser monitor

Julius_Loman — Sun, 22 Jan 2023 19:35:24 GMT

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"); });

Re: Developer console code is not working under JavaScript of browser monitor

AK — Sun, 22 Jan 2023 19:43:21 GMT

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