Need to catch ajax crossdomain script load error

Question

I've dealing with this issue for the past month, I've read almost all the posts here at stackoverflow, but no way... my best approach was:

$.ajax({
    url: "https://connect1.facebook.net/" + ('BR' == $('#country').val() ? 'pt_BR' : 'es_LA') + "/sdk.js",
    dataType: "script",
    cache: false,
    xhr: function () {

        var xhr = new window.XMLHttpRequest();

        //Not working...                           
        xhr.onerror = function(e) {
            alert("Error Status: " + e.target.status);
        };
        //Frustration ends here...

        return xhr;

    }
})
.done(function(data) {
    console.log("Ajax success");
    init();
    callback();                
});

The "connect1" makes the request to fail, but I cant get a way to catch the error because of the famous issue with crossdomain requests. My best bet was to implement my own xhr object, but the onerror event is not being triggered.

I wrote this post because any new or fresh idea will help me a lot.

UPDATE: This is the url that you can use to replicate the request, that is intended to fail: https://connect1.facebook.net/es_LA/sdk.js?_=1445285186108

Thanks so much in advance.

Guillermo

I may be way off, but in the past when working with FB and youtube API's in jquery, I have had to add callback=? to the url to get any sort of response. — Wobbles, Oct 19 '15 at 19:44
Also, to double check, what is a sample URL you expect as https://connect1.facebook.net/pt_BR/sdk.js looks invalid — Wobbles, Oct 19 '15 at 19:46
Possible duplicate of [Error handling cross domain jquery ajax call](http://stackoverflow.com/questions/22830998/error-handling-cross-domain-jquery-ajax-call) — Raúl Martín, Oct 19 '15 at 19:47
@mplungjan thanks so much, but that's not the way it works. For instance, if facebook server is not responding your page won´t load at all, and there are other reasons too... — Guillermo, Oct 19 '15 at 19:49
@Wobbles yes, the url is invalid, I want to get the error. This is the one that works: connect.facebook.net/pt_BR/sdk.js — Guillermo, Oct 19 '15 at 19:50
So you mean you want to catch the response type if its an invalid URL? Add a statusCode callback to check for 404 and such — Wobbles, Oct 19 '15 at 19:52
@Wobbles, not so easy, this is a crossdomain request and as such, it won't fail in the same way that a same domain request. — Guillermo, Oct 19 '15 at 19:53
@Guillermo it's not entirely that it is cross domain, it is a script request is more critical issue. Cross domain CORS enabled requests will return all normal errors — charlietfl, Oct 19 '15 at 19:54
Yea, cross domain requests will always return a response header such as 404 for missing or 200 for Ok, thats not an issue — Wobbles, Oct 19 '15 at 19:56
What are you actually trying to achieve here? What’s the purpose of that request, what kind of data and/or functionality are you looking for? — CBroe, Oct 19 '15 at 20:00
of course it failed, its a bad domain. Now you just need to handle the 404 response as you see fit. — Wobbles, Oct 19 '15 at 20:03
@RaúlMartín, Thanks, but this is not a duplicate, due that we're talking about a script load through ajax here, and the other post is about a jsonp request. — Guillermo, Oct 19 '15 at 20:20
Possible duplicate of [JSONP request error handling](http://stackoverflow.com/questions/19035557/jsonp-request-error-handling) — Max Leske, Oct 19 '15 at 21:34

Wobbles · Answer 1 · 2015-10-19T20:22:02.677

0

To check for response codes, which is different than script errors, add a statusCode callback to your ajax.

$.ajax({
    url: "https://connect1.facebook.net/" + ('BR' == $('#country').val() ? 'pt_BR' : 'es_LA') + "/sdk.js",
    dataType: "script",
    cache: false,
    statusCode: {
        404: function() {
            alert( "page not found" );
        }
    },
    xhr: function () {

        var xhr = new window.XMLHttpRequest();

        //Not working...                           
        xhr.onerror = function(e) {
            alert("Error Status: " + e.target.status);
        };
        //Frustration ends here...

        return xhr;

    }
})
.done(function(data) {
    console.log("Ajax success");
    init();
    callback();                
});

Also, since the URL appears to be JS, and you arnt against using JQuery, why not make use of jQuery.getScript()?

$.getScript( "https://connect1.facebook.net/" + ('BR' == $('#country').val() ? 'pt_BR' : 'es_LA') + "/sdk.js");

edited Oct 19 '15 at 20:22

answered Oct 19 '15 at 20:01

Wobbles

3,033
1
25
51

thanks so much, but not working, I took a look to the console to check the statusCode, but can´t get one, it just only says (failed). You can try to replicate the failed request with the following url: https://connect1.facebook.net/es_LA/sdk.js?_=1445285186108 – Guillermo Oct 19 '15 at 20:07
1

Hmm after further tests I see what you mean, perhaps this can help https://stackoverflow.com/questions/19035557/jsonp-request-error-handling – Wobbles Oct 19 '15 at 20:20
1

I still recommend the getScript method to clean up code a little easier regardless. – Wobbles Oct 19 '15 at 20:22
We we're using it, but due that is a shorthand, I moved to the regular ajax method to have more options to work with. Thanks for all your support! – Guillermo Oct 19 '15 at 20:30

score -1 · Accepted Answer · edited May 23 '17 at 12:14

Finally, thanks to @Wobbles who helped me a lot, we found the answer here:

https://stackoverflow.com/a/19101142/943082

The solution consists on adding a timeout to the ajax request.

After that timeout has expired, then the onerror event will be triggered, and from there, you can respond to the error with your code.

        $.ajax({
            url: "https://connect.facebook.net/" + ('BR' == $('#country').val() ? 'pt_BR' : 'es_LA') + "/sdk.js",
            dataType: "script",
            cache: false,
            timeout: 5000, // Wait 5 secs to get the sucess
            error: function(jqXHR, textStatus, errorThrown) {
                if(textStatus === "timeout") {
                    //We waited 5 secs and the request hasnt succeed.
                    //Code to manage the error.


                }
            }
        })

Regards,

Guillermo

Need to catch ajax crossdomain script load error

2 Answers2