SOLVED: Wix Backend 504 Timeout Errors

#wix #wixwebsite #wixtutorial #website #webdesign #webdev
Timeline:
00:00: Introduction to revisiting 504 errors issue.
00:14: Initial encounter with the problem and the previous solution.
00:44: Overview of the issue and the need for a new solution.
01:00: Explanation of the backend file structure and function.
02:07: Implementation of backend function mimicking long server actions.
03:00: Demonstration of encountering 504 error on the live site.
03:29: Discussion on timeout between backend and frontend.
04:09: Previous solution using Wix real-time messaging.
05:21: Introduction to the new polling-based solution.
06:02: Core of the polling system: cache implementation.
07:11: Modification of the backend function to handle caching.
08:10: Handling response and status in the backend function.
10:15: Implementation of another backend function for retrieving data.
13:13: Setup of cache expiration function.
14:49: Calling the expiration function in the main backend function.
16:11: Discussion on expiration handling in backend functions.
16:25: Transition to adapting frontend for new polling system.
17:48: Implementation of event handler for starting tasks.
19:46: Handling errors and starting polling process in event handler.
20:53: Handling different response statuses in the polling process.
22:18: Wrapping up the frontend implementation.
New to Velo? Try my new Velo for Beginners course now on Udemy!
www.udemy.com/...
Have an idea for a video? suggest it here:
www.thewixwiz....
Have questions? Join the discussion:
www.thewixwiz....
Want to have joint coding session? Book one now:
www.thewixwiz....
Have questions? Need some magic done on your website ASAP?
www.thewixwiz....
Follow along on Twitter @thewixwiz
Facebook page: / thewixwiz
Facebook community: / thewixwiz

[@chrmolgu9333]

very nice idea sir , keep uploading wix wizery :D

[@richardschut]

thanks, really helpful 🍀

[@kyleh1623]

thanks so much for making this video🙌, spent hours trying to figure out how to solve this problem. man you really saved my day...

[@thewixwiz]

Glad it helped!

[@ryandoyle]

@kyleh1623 did you manage to get the polling to retrieve the late response?

[@ryandoyle]

I’m struggling to follow, do I replace the “this is working” with the other OpenAI-jaw? Or the json response? I can’t get mine to work😢 is there a template of this polling technique I can use?

[@thewixwiz]

You can replace it with any promise resolution. There is no template but I'd be glad to walk you through it if you want to book a call.

[@ryandoyle]

@@thewixwiz yes plz, what’s the best way to arrange this?

[@thewixwiz]

@@ryandoyle you can book here: www.thewixwiz.com/book-online

[@robw1927]

It appears you set multiple processing responses to delay the timeout. Is my understanding correct?

[@thewixwiz]

Hmm not exactly, the timeout only occurs when the frontend doesn't get a response from the backend within 15 seconds. The backend function still continues to run after the timeout. That's the principle behind this technique.

[@fung5239]

thanks for the video! I replicated your example on my side.
However, it doesn't work as you show, it still shows "Error: Request failed with status code 504" after 15 sec.
And a response showing status: "expired".
Would you mind have a look on what may cause the error? Thank you!!
Here's my backend code:
import { Permissions, webMethod } from 'wix-web-module';
let cache = {};
export const startTask = webMethod(
Permissions.Anyone,
async (requestId) => {
cache[requestId] = 'processing';
expire(60000);
await delay(30000);
let data = "This is working";
if (cache[requestId]) cache[requestId] = data;
return {
status: 'complete',
data,
}
}
);
export const getData = webMethod(
Permissions.Anyone,
async(requestId) => {
if (!cache[requestId]) return {status: 'expired'};
if (cache[requestId] === 'processing') return {status: 'processing'};
return {
status: 'complete',
data: cache[requestId],
}
}
)
async function expire(time, requestId) {
setTimeout(() => {
delete cache[requestId];
}, time);
}
const delay = (time) => new Promise((resolve) => setTimeout(() => {
resolve();
}, time))
Frontend:
import { getData, startTask} from 'backend/myBackendFile.web';//myListFilesFunction
import {v4 as uuidv4} from 'uuid';
async function startEventHandler() {
const requestId = uuidv4();
try{
const response = await startTask(requestId);
console.log("response",response)
} catch (error) {
console.log(error);
}
let poll;
poll = setInterval(async() => {
const response = await getData(requestId);
console.log("response", response);
if(response.status === 'complete'){
//handle the data;
console.log("data", response.data);
clearInterval(poll);
}else if(response.status === 'expired'){
//handle expiration
clearInterval(poll);
}
}, 3000);
}
$w.onReady(function () {
$w("#startButton").onClick(startEventHandler);
});

[@fung5239]

I tried to find where's the error.
Before 15 sec (Error: Request failed with status code 504), the cache stores the requestId and its value. However, after 15 sec, the cache is empty, so it returns 'expired'. Any thoughts? Thanks!

[@thewixwiz]

Hi, please post any code questions to the Wix Wiz forum.

[@adamflynn2673]

I am not sure why, but when I try this, my backend cache object gets cleared between frontend function calls. It is not persistent. The cache data is present and gets returned correctly from the startEvent function, but the first time that the getData function calls the cache data, it returns undefined. Is there something special you did to make the cache object persistent between frontend calls?

[@thewixwiz]

Hmm, the cache should persist without anything special. You may want to check that you are sending the correct requestId and that the cache entry hasn't expired. If you want to post your code on the Wix Wiz forum I can take a look.

[@bleneak]

Hello. The cache was cleared (seemingly) randomly for me as well. I checked by adding a backend getCache function and logging its contents on the frontend via a button. I couldn’t figure out the exact cause of a reset, but switched to using wixData (CMS) to be safe. In memory cache is also tough to analyze/debug in a multiuser live setting, as compared to a CMS based cache.

[@ryandoyle]

@@bleneakdid you manage to get the polling working?

[@karanlala]

I can confirm, my cache gets cleared as well. It's works immediately after the first call but subsequent calls show that no data with the same id exists in the cache. This is in preview mode btw

[@thewixwiz]

@@karanlala I would double check the if statement: if(cache[requestId]) cache[requestId] = data. This may be causing issues if the promise resolution of your data fetching function isn't being handled correctly. Also, you are welcome to share your code on the forum for feedback from the community.

[@jackyyang4557]

sorry I dont understand the last part. If it's expired and after 1 processing after you change it to 20s, data is deleted and you never have "complete" so how can you retreieve it in the front end code

[@thewixwiz]

That was just an example to demonstrate how the expiring works. In a real life scenario you will want to set the expiration time well above the time you expect the data retrieval to take.

[@ryandoyle]

Did you get it working?

[@alanchen7984]

Can you please pin the link to the previous video (related to OpenAi) on how the delay function works? I have a backend code which takes over 1 minute ro run, so in need of this method. I tried replicating the code with the Promise, setTimeout, resolve combination, but was unfruitful. Thank you!

[@thewixwiz]

This is the previous video:
ua-cam.com/video/VN77Rvzk3Fw/v-deo.html
But the delay function is just a placeholder for any asynchronous action you are waiting for...

[@ryandoyle]

Did you manage to get it to work?

[@felippemendonca9664]

First, thanks for the video!
I tried your code, but when i run it, i get the error "TypeError: (0 , t.startTask) is not a function". Any idea of what i might have done wrong?

[@felippemendonca9664]

found out.... this can only be saved in a '.web.js' file...

[@thewixwiz]

Thanks for watching! Happy to hear you figured it out :)

[@ryandoyle]

I’m stuck here too, how can I fix this? I’m crying over the amount of tokens I’ve wasted

[@benzinhogamer6289]

@@ryandoylehave you saved the code as a ‘.web.js’ file?

[@ryandoyle]

@@benzinhogamer6289 no I did jsw, do you know the solution. Have you managed to do this polling technique?

[@jackyyang4557]

thanks for the video!
which function in your example here can be replaced by the external api function call that can take a while?

[@thewixwiz]

Thanks for watching! The delay function (not the expiration) simulates an external API call.

[@jackyyang4557]

sorry to follow up, I'm getting "expired" right after 1 "processing" but never "complete". what could be the reasons?
@@thewixwiz thanks!

[@thewixwiz]

@@jackyyang4557 hi, do you mind posting your question and code to the forum? It will be easier to answer there. thewixwiz.com/forum

[@jackyyang4557]

Sure thing just did!@@thewixwiz

[@jackyyang4557]

hi did you have a chance to look at my question and code in the forum? thanks@@thewixwiz