Troubleshooting a CloudFlare Gateway Timeout error 524 in a Flask-vue.js application
The 524 Gateway Timeout error came out when I and Manuel Guzman (MSW R&D director) were testing an ML application that took few minutes to generate results before sending them back to the user.
We found out that the timeout limit in CloudFlare should be increased to remove the error.
According to some answers we found when googling this error that it was impossible to fix it (Check this StackOverflow answer).
After a brainstorming session, we were able to resolve the issue following Manuel's idea.
In this article, I will share with you all the steps we took to tackle the 524 Gateway Timeout Error in Cloudflare.
I will introduce this type of error how to resolve it and more importantly the snippets of code that we used.
What Is the 524 Gateway Timeout Error?
The 524 gateway Timeout Error is a Cloudflare-specific HTTP status code that indicates that the connection to the server has been closed due to a timeout.
Below is the definition in the Cloudflare support website
Error 524 indicates that Cloudflare successfully connected to the origin web server, but the origin did not provide an HTTP response before the default 100 second connection timed out. Enterprise customers can increase the 524 timeout up to 600 seconds.
In an operational case scenario, the browser sends a request to the webserver where the application is hosted, then the answers that include the status code i.e., 200, and the result (the predictions of the ML application) are sent back to the user. In case the connection to the server exceeds 100 seconds without sending back a response, the user receives the status code 524 and empty content.
CloudFlare only offers the customization of the timeout on Enterprise plans.
The solution
The following steps describe the solution
- The browser sends the first request with the parameters to launch the backend process (In our case it was an ML application backend).
2. The application backend generates an ID to this request
3. The application backend launches the process (of prediction) with the given parameters
4. The application backend sends immediately a response back to the browser (without waiting for the prediction process to finish) that includes the request ID and the status 202 which indicates that the process is currently working
5. The browser receives the answer, waits for 10 seconds (it depends on the time your prediction process can take to generate the final results), and then launches another request with the same ID to check if the process of the prediction is finished (status 200)
5. If the prediction process is not finished yet step 4 and 5 are repeated
That‘s it!
Your browser will wait for the prediction results and get the backend answer when it is ready.
Summary
Response time in Machine learning applications is usually long compared to another type of application. This solution can be applied whenever the time of answer exceeds the server connection timeout limits.
If you have a question, feel free to comment below or ask it via email or Linkedin. And I’ll answer it.
