Merge pull request #471 from chrismayer/add-timeout-geocoding

Add HTTP timeout to geocoder

Author: chrismayer

docs/module-configuration.md

@@ -55,6 +55,7 @@ Module identifier: `wgu-geocoder`
 | persistentHint     | Forces hint to always be visible.  | `"persistentHint": true` |
 | minChars           | Minimum number of characters which has to be entered so the query is triggered  | `"minChars": 2` |
 | queryDelay         | Delay in MS before a query is triggered | `"queryDelay": 200` |
+| httpTimeout        | Timeout in MS for underlying HTTP request. Defaults to `15000`  | `"httpTimeout": 10000` |
 | debug              | Boolean value to enable debug logs | `"debug": false` |
 | provider           | Key defining which geocoder provider should be used. Could be `osm`, `photon` or `opencage` | `"provider": "osm"` |
 | providerOptions    | Optional options which are passed to the geocoder provider | `"providerOptions": {"lang": "en-US", "countrycodes": "", "limit": 6}` |

src/components/geocoder/Geocoder.vue

@@ -59,6 +59,7 @@ export default {
     debug: { type: Boolean, required: false, default: false },
     minChars: { type: Number, required: false, default: 3 },
     queryDelay: { type: Number, required: false, default: 300 },
+    httpTimeout: { type: Number, required: false, default: 15000 },
     provider: { type: String, required: false, default: 'osm' },
     providerOptions: { type: Object, required: false, default: function () { return {}; } }
   },
@@ -76,7 +77,7 @@ export default {
       selecting: false,
       selected: null,
       hideSearch: true,
-      timeout: null
+      debounceTimeout: null
     }
   },
   computed: {
@@ -98,12 +99,12 @@ export default {
   },
   mounted () {
     // Setup GeocoderController to which we delegate Provider and query-handling
-    this.geocoderController = new GeocoderController(this.provider, this.providerOptions);
+    this.geocoderController = new GeocoderController(this.provider, this.providerOptions, this.httpTimeout);
   },
   unmounted () {
-    if (this.timeout) {
-      clearTimeout(this.timeout);
-      this.timeout = null;
+    if (this.debounceTimeout) {
+      clearTimeout(this.debounceTimeout);
+      this.debounceTimeout = null;
     }
 
     this.geocoderController.destroy();
@@ -118,10 +119,10 @@ export default {
     },
     // Query by string - should return list of selection items (adresses) for ComboBox
     querySelections (queryStr) {
-      if (this.timeout) {
-        clearTimeout(this.timeout);
+      if (this.debounceTimeout) {
+        clearTimeout(this.debounceTimeout);
       }
-      this.timeout = setTimeout(() => {
+      this.debounceTimeout = setTimeout(() => {
         // Let Geocoder Provider do the query
         // items (item.title fields) will be shown in combobox dropdown suggestions
         this.trace(`geocoderController.query: ${queryStr}`);
@@ -132,7 +133,7 @@ export default {
               this.onQueryError(err);
             }
           });
-        this.timeout = null;
+        this.debounceTimeout = null;
       }, this.queryDelay);
     },
     onQueryResults (results) {

src/components/geocoder/GeocoderController.js

@@ -41,9 +41,11 @@ export class GeocoderController {
    * @constructor
    * @param {String} providerName name of Provider.
    * @param {Object} options config options for Provider
+   * @param {Number} timeout Timeout in MS for HTTP request
    */
-  constructor (providerName, options) {
+  constructor (providerName, options, timeout) {
     this.options = options;
+    this.timeout = timeout;
     this.abortController = null;
 
     // Must have Provider class defined for name
@@ -80,7 +82,8 @@ export class GeocoderController {
       method: 'GET',
       url: parameters.url,
       params: parameters.params,
-      signal: this.abortController?.signal
+      signal: this.abortController?.signal,
+      timeout: this.timeout
     };
 
     const response = await axios(request);

tests/unit/specs/components/geocoder/Geocoder.spec.js

@@ -62,6 +62,7 @@ describe('geocoder/Geocoder.vue', () => {
       expect(vm.debug).to.be.false;
       expect(vm.minChars).to.equal(3);
       expect(vm.queryDelay).to.equal(300);
+      expect(vm.httpTimeout).to.equal(15000);
       expect(vm.provider).to.equal('osm');
       expect(vm.providerOptions).to.be.an('object');
     });
@@ -84,7 +85,7 @@ describe('geocoder/Geocoder.vue', () => {
       expect(vm.selecting).to.be.false;
       expect(vm.selected).to.be.null;
       expect(vm.hideSearch).to.be.true;
-      expect(vm.timeout).to.be.null;
+      expect(vm.debounceTimeout).to.be.null;
       expect(vm.geocoderController).to.not.be.undefined;
       expect(vm.geocoderController.provider instanceof OpenStreetMap).to.be.true;
     });
@@ -100,6 +101,7 @@ describe('geocoder/Geocoder.vue', () => {
         target: 'toolbar',
         minChars: 5,
         queryDelay: 200,
+        httpTimeout: 10000,
         debug: false,
         provider: 'photon'
       };
@@ -112,6 +114,7 @@ describe('geocoder/Geocoder.vue', () => {
       expect(vm.hideSearch).to.be.true;
       expect(vm.minChars).to.equal(5);
       expect(vm.queryDelay).to.equal(200);
+      expect(vm.httpTimeout).to.equal(10000);
       expect(vm.geocoderController).to.not.be.undefined;
       expect(vm.geocoderController.provider instanceof Photon).to.be.true;
     });
@@ -127,6 +130,7 @@ describe('geocoder/Geocoder.vue', () => {
         target: 'toolbar',
         minChars: 6,
         queryDelay: 200,
+        httpTimeout: 10000,
         debug: false,
         provider: 'opencage'
       };
@@ -139,6 +143,7 @@ describe('geocoder/Geocoder.vue', () => {
       expect(vm.hideSearch).to.be.true;
       expect(vm.minChars).to.equal(6);
       expect(vm.queryDelay).to.equal(200);
+      expect(vm.httpTimeout).to.equal(10000);
       expect(vm.geocoderController).to.not.be.undefined;
       expect(vm.geocoderController.provider instanceof OpenCage).to.be.true;
     });