How to handle requireJs timeout error?

Question

I'm writing a mobile hybrid app using require.js as my loading framework. I have an issue with loading errors. What I'm trying to do is setup a fallback solution when the device is offline and I can't download the google maps API script that I need to display a map on the screen. All that I get is

Uncaught Error: Load timeout for modules: async!http://maps.googleapis.com/maps/api/js?sensor=true

but I'm not able to catch this error and provide an alternative implementation. Here is my gmaps module definition

define('gmaps', ['async!http://maps.googleapis.com/maps/api/js?sensor=true'],function(){
  return window.google.maps;
});

What can I do?

EDIT

I managed to find a possible solution thanks to your help. I've setup require like this

require.config({
    paths: {        
        gmaps: ['http://maps.googleapis.com/maps/api/js?sensor=true', 'lib/dummymaps']
    }
}

dummymaps is only a simple module:

define({
   dummy: true
});

Then in my "parent" module I do:

define(["gmaps"],function(gmaps){
    ...
    if(typeof gmaps.dummy != 'undefined' && gmaps.dummy == true){
        // use a local image as map
    } else {
        // initialize google maps canvas
    }
});

Do you think that's a good solution?

EDIT 2:

Forgive me, it's not working with this code. It's always falling back to the alternative implementation because gmaps needs to use async plugin to be fully loaded and I'm not able to make it work with the plugin.

Answer 1

You can catch the error by :

requirejs.onError = function (err) {
    if (err.requireType === 'timeout') {
        alert("error: "+err);
    } 
    else {
        throw err;
    }   
};

Hope this helps!

Answer 2

You could try the following:

requirejs.config({
    paths: {
        // define an alias here, first try remote, if it fails it will try your local file
        'gmaps': ['http://maps.googleapis.com/maps/api/js?sensor=true', 'your local file.js']
    }
});

define('gmaps', function(gm) {
    // var gm should now be the google maps plugin
    console.log(gm);
});

Answer 3

I had the same problem and I solved it with this snippet:

require(['async!http://maps.google.com/maps/api/js?sensor=false'], function() {
    //Success processing
}, function (e) {
    //Error processing
});

Answer 4

The RequireJS documentation has a section on errors which will cover your particular case.

It details falling back to a local copy of jQuery should the CDN be unavailable.

Answer 5

I believe your original problem was never solved exactly how you wanted, and we ran in to the same kind of issue here. Basically, we wanted a way to recover gracefully when google maps timed out or was unavailable, as there are times our application will run on a user's machine where they do not have internet access.

I was originally using the async! plugin that everyone else uses, but could not come up with a modification that allow for the error handling I needed.

Therefore, I wrote my own utility class that loads google maps asynchronously outside of the requireJS container, and provides error callback handling. Take a look and see if it solves your issue. For us, it allows us to render a nice warning view to the user when maps.google.com can't be reached, and the rest of the application still loads normally:

https://github.com/mag382/googleMapsLoaderUtil