Error 504: The timeout issue occurred during an ajax call

Question

Error 504: The timeout issue occurred during an ajax call

When I make an ajax call to process a large amount of data and then reload the page upon success, I encounter a 504 Gateway Timeout error. The ajax call is initiated with the following parameters:

$.ajax({
    type:'POST',
    cache:false,
    async:false,
    url: 'URL',
    data: "",
    timeout:0,
    beforeSend:function(msgg){   
        $('#loading').show();
    },
    success: function(data){
        if(data == "success")
        {
            setTimeout(function(){
                $('#loading').hide();
                window.location.reload();
            },5000);
        }
    }
});

Despite my efforts, the ajax call never reaches the success stage and results in the 504 Gateway Timeout error. As a workaround, I am manually refreshing the page.

javascript ajax

Answer 1

Answer №1

504 GATEWAY_TIMEOUT errors may occur when the URL of your API Gateway is unresponsive, often due to an internal Gateway error.

Follow these troubleshooting steps:

Utilize a proxy tool such as Postman to replicate the request and check the response
Verify that the path is accurate
If other requests are being made to the same gateway URL, test them manually or through your code to ensure the gateway functions properly
If feasible, restart the Gateway (particularly possible in Microservices architecture with Dockerisation)

Answer 2

504 GATEWAY_TIMEOUT errors may occur when the URL of your API Gateway is unresponsive, often due to an internal Gateway error.

Follow these troubleshooting steps:

Utilize a proxy tool such as Postman to replicate the request and check the response
Verify that the path is accurate
If other requests are being made to the same gateway URL, test them manually or through your code to ensure the gateway functions properly
If feasible, restart the Gateway (particularly possible in Microservices architecture with Dockerisation)

Answer 3

Answer №2

To improve performance, it is recommended to make shorter calls to check status or retrieve data.

If the above recommendation is not feasible, consider the following alternative:

Note: This solution is not suitable for production environments or high traffic situations. It is advisable to perform this action on a dedicated server.

For users of Apache Web Server 2.4, the default TimeOut directive is set to 60 seconds.

For more information, refer to this resource.

The web server will maintain the connection open for only 60 seconds irrespective of the max_execution_time

While the php.ini setting max_execution_time controls PHP execution time, the Apache TimeOut directive determines the maximum connection duration.

For instance:

If the php max_execution_time is 120 sec, but the TimeOut is set to 30 sec, a 504 error may occur
If the php max_execution_time is 120 sec, but the TimeOut is extended to 300 sec, the script will run for a maximum of 120 seconds while the connection remains active for 300 seconds

In the absence of a specified response code from PHP, a successful operation returns a 200 status code, while an error results in a 500 status code.

Unexpected HTTP Response codes should prompt monitoring of the web server as well.

Answer 4

To improve performance, it is recommended to make shorter calls to check status or retrieve data.

If the above recommendation is not feasible, consider the following alternative:

Note: This solution is not suitable for production environments or high traffic situations. It is advisable to perform this action on a dedicated server.

For users of Apache Web Server 2.4, the default TimeOut directive is set to 60 seconds.

For more information, refer to this resource.

The web server will maintain the connection open for only 60 seconds irrespective of the max_execution_time

While the php.ini setting max_execution_time controls PHP execution time, the Apache TimeOut directive determines the maximum connection duration.

For instance:

If the php max_execution_time is 120 sec, but the TimeOut is set to 30 sec, a 504 error may occur
If the php max_execution_time is 120 sec, but the TimeOut is extended to 300 sec, the script will run for a maximum of 120 seconds while the connection remains active for 300 seconds

In the absence of a specified response code from PHP, a successful operation returns a 200 status code, while an error results in a 500 status code.

Unexpected HTTP Response codes should prompt monitoring of the web server as well.

Answer 5

Answer №3

When faced with the issue of a browser not being able to handle long ajax calls, I decided to utilize ajax recall and process the data in smaller parts. This approach effectively resolved the problem.

Answer 6

When faced with the issue of a browser not being able to handle long ajax calls, I decided to utilize ajax recall and process the data in smaller parts. This approach effectively resolved the problem.

Answer 7

Answer №4

Encountered a functional solution shared by #david-hoerster

According to his explanation, if your error event handler accepts the three parameters (XMLHttpRequest, textstatus, and message) and a timeout occurs, the status argument will be 'timeout'

$.ajax({
    url: "/ajax_json_echo/",
    type: "GET",
    dataType: "json",
    timeout: 1000,
    success: function(response) { alert(response); },
    error: function(xmlhttprequest, textstatus, message) {
        if(textstatus==="timeout") {
            alert("got timeout");
        } else {
            alert(textstatus);
        }
    }
});

Using jsFiddle, you have the ability to test ajax calls -- it will wait 2 seconds before responding. I set the timeout at 1 second, so it should trigger an error and return a textstatus of 'timeout' to the error handler.

Answer 8

Encountered a functional solution shared by #david-hoerster

According to his explanation, if your error event handler accepts the three parameters (XMLHttpRequest, textstatus, and message) and a timeout occurs, the status argument will be 'timeout'

$.ajax({
    url: "/ajax_json_echo/",
    type: "GET",
    dataType: "json",
    timeout: 1000,
    success: function(response) { alert(response); },
    error: function(xmlhttprequest, textstatus, message) {
        if(textstatus==="timeout") {
            alert("got timeout");
        } else {
            alert(textstatus);
        }
    }
});

Using jsFiddle, you have the ability to test ajax calls -- it will wait 2 seconds before responding. I set the timeout at 1 second, so it should trigger an error and return a textstatus of 'timeout' to the error handler.

Error 504: The timeout issue occurred during an ajax call

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Load nodes for jsTree based on the results of a query when requested by the user

Having trouble with the full-screen feature not functioning properly?

Upon mounting, componentDidMount method will likely return an undefined object when using axios

Error: The 'price' property is undefined and cannot be read at path C:NODEJS-COMPLETE-GUIDEcontrollersshop.js on line 45, character 37

What methods are available for implementing hover effects within attributes using a JavaScript object?

Tips on sending an array to material-ui dataSource props

Tips for identifying modifications in an input text field and activating the save button

The values obtained from the previous parameter object of the React setState hook can vary and are not always

What is the importance of setting up an HTTP server?

Tips for uploading information and posting it on a different page with mongoDB and Node.js

A guide to retrieving information from PHP using jQuery AJAX

Deciphering the evolution of APIs and managing internal API systems

The HTML object is experiencing difficulties with the Ajax page loader feature not functioning as

Cart cannot function as a constructor

Determine whether AngularJS directive method binding automatically defaults to angular.noop

Is it possible to await the response of a request in Socket.io with socket.on('answerToRequest')?

Showing HTML element when the model count is zero - ASP.NET MVC View

What sets apart the use of `function(){}.bind(this)` and `angular.bind(this, function() {})`

ReactJS encounters errors even when the backend is returning a 200 OK status code

Struggling to display filtered content in React using State