Need help solving unknown XMLHttpRequest Error

Hey All,

I am sporadically getting an error thrown from an async backend function. The error is not really giving me any indication of what is happening (no error message or status number). I have attached a screenshot from the console of what I am seeing. There seems to be no consistency to when this error happens. Sometimes it is the first time I make a request, sometimes after a few attempts.

I have also attached the code block for context. The function that throws the error is called “getDataTreeCounts”. Each iteration takes about 2 seconds to complete, and there is always a max of 4 iterations based on the setup here. The backend function being called is only a middleman to call a 3rd party API (that I created). Looking at the API logs, there is no request for the iteration that fails and throws the error.

If you need any more info please let me know! I am new to the forum.

You are calling getDataTreeCounts with an await, but you also are trying to handle the returned Promise using .then() . My head hurts just thinking about it. Hold on, I’ll be right back after an aspirin and a beer…

OK, It’s like this, await handles the waiting for the async function ( getDataTreeCounts) to finish. So, there is no need for the .then() . I suspect that the code in the .then() function doesn’t even run.

Hi Yisrael. Thank you for the reply! The then block did run. The code block I was showing actually runs fine about 95% of the time. However, I have updated the code to only use await and then return the promise to a variable instead of passing it to a then handler. Please see attached. I tested the new version, and the error still happens. Thoughts? If you can solve, the next beer is on me…

It’s really tough knowing what exactly is going on - especially since I don’t know what’s happening in your 3rd party API. Is the API on a Wix site, or somewhere else? Perhaps something isn’t working right in the API. Timing, invalid parameters being sent, etc.

I would suggest using a copious supply of console.log() statements to see what’s going on, both in the code that you’ve shared in your post, and in the API.

Also, please post your code using code blocks instead of screenshots (which are very hard to read).

I understand. I appreciate the help nonetheless. The API is a lambda function hosted on AWS. I have checked the logs on that, and no requests are being received on the attempts that fail. I put console.logs all through the Wix backend, but the error never happens in Preview mode, only live (so I can’t see the backend logs). I tried throwing custom Errors with try/catch blocks to maybe extract some info, nothing changed.

Something of note. When I checked the network tab, Wix backend threw a 500 error.

Below is the post function as well, if that helps at all…

async function post(url, body){
 let api_key = await getSecret(API_KEY_ID);
 var headers = { 
 'Content-Type':'application/json', 
 'Content-Length': JSON.stringify(body).length.toString(),
 'x-api-key': api_key
  };
 let response = await fetch(url, 
        {
            method: "post", 
            headers: headers,
            body: JSON.stringify(body)
        })

 return response.json()
}


-Ryan

For debugging backend code, see Debugging with Site Monitoring .

It’s strange that no requests being made on the attempts that fail. It’s almost as if the fetch attempt is invalid. You might want to check the validity of the fetch request and make sure that valid parameters are being passed, that the URL is valid, and well, all the usual stuff.

Does the failed attempt always happen sort of at the same place in the loop? Or does it happen randomly at the beginning/middle/end?

I must be missing something but I don’t see whare the post() function is being called in your code.

It’s interesting that the error only happens in Live. Are you using data from a collection?

Site Monitoring! Awesome. I added logging to the fetch method. It hits the catch block, but just still says “Error” in the site monitoring. No message, no error code.

async function post(url, body){
 let api_key = await getSecret(API_KEY_ID);
 var headers = { 
    'Content-Type':'application/json', 
    'Content-Length': JSON.stringify(body).length.toString(),
    'x-api-key': api_key
 };
 return fetch(url, 
        {
            method: "post", 
            headers: headers,
            body: JSON.stringify(body)
        }).then(response => {
 if (response.ok){
     return response.json()
 }
 else{
         Promise.reject("Error during post")
      }
 })
  .catch(error => {
       console.log(error.message)
       Promise.reject("Exception during post")
  })
}    

I checked the usual suspects. Url, API key, request body, all seemingly in check. The failed attempt is always random. So like I mentioned, the loop will only run a max of 4 times. Sometimes it’s the first attempt, sometimes the last. And sometimes I can’t get it to happen for 100 tries and then I can’t get it to stop happening after that.

Apologies, here is the rest of the code execution path. First backend module simply creates the body, and then passes along to the api module.

export async function getDataTreeCounts(buckets, data_tree_filters, user_id){
     const body = {"user_id": user_id, "buckets": buckets,      "data_tree_filters": data_tree_filters}
     return await data_tree_counts("/getCounts", body)
}

export function data_tree_counts(endpoint, body){
 const url = base_data_tree_count_url + endpoint
 return post(url, body)
}

No collection data. All of the data is coming from the external API. Most of the site’s core is outside of Wix. This code is just supposed to pull in some meta data in a loop (in order to get around the 14 second backend timeout limit).

Sorry for the long post. Thank you again for your time and interest in this. Super fascinating bug eh?!

-Ryan

Quick update. After watching the logs on the Wix backend, I am realizing that the backend function isn’t even being exectuted. The 500 error being thrown is from the frontend to the backend, not the backend to the API.

export async function getDataTreeCounts(buckets, data_tree_filters, user_id){
console.log( “This is not being called” )
const body = { “user_id” : user_id, “buckets” : buckets, “data_tree_filters” : data_tree_filters}
return await data_tree_counts( “/getCounts” , body)
}

I am now searching for reasons why the Wix backend server would throw a 500 error. The first console.log is not printing in site monitoring on the failed attempt.

@admin31048 What’s your frontend code? The problem must be there.

Did you see the article Corvid Web Modules: Calling Server-Side Code from the Front-End ?

@yisrael-wix I went ahead an attached the frontend function as a .js file (I hope that is alright).

I wrote a workaround for now by having a private function that recursively calls the backend with an “attempts” countdown. Seems to be working for now, although it doesn’t really solve the problem. Every time the 500 is thrown, the next request has no problem firing.

I read the article you linked. Nothing sticks out as something I am doing egregiously wrong. Parameters match up and are non null. Backend function is exported and imported correctly. What is frustrating is the error message. It just says “Error”. Whether I do a try/catch or a then/catch, no difference.

@yisrael-wix Another piece of the puzzle. A more informative error code! This time it was thrown from the ‘wix-secrets-backend’ . Server threw a 503 error when calling the getSecret function. Below is the calling function.

let api_key = await getSecret(API_KEY_ID);

@admin31048 Is the call to getSecret being executed in a loop? Is it called once?