fix(webapp): catch possibe errors on request geolocation (#8640)

* catch possibe errors on request geolocation

* proper toast error

* remove deprecated request package, use node fetch instead, set timeout

---------

Co-authored-by: Max <maxharz@gmail.com>
Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>

backend/package.json

@@ -83,7 +83,6 @@
     "nodemailer-html-to-text": "^3.2.0",
     "preview-email": "^3.1.0",
     "pug": "^3.0.3",
-    "request": "~2.88.2",
     "sanitize-html": "~2.17.0",
     "slug": "~9.1.0",
     "trunc-html": "~1.1.2",

backend/src/graphql/resolvers/users/location.ts

@@ -6,27 +6,15 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable promise/avoid-new */
+/* eslint-disable n/no-unsupported-features/node-builtins */
-/* eslint-disable promise/prefer-await-to-callbacks */
 import { UserInputError } from 'apollo-server'
-import request from 'request'
 
 import CONFIG from '@config/index'
 
-const fetch = (url) => {
-  return new Promise((resolve, reject) => {
-    request(url, function (error, response, body) {
-      if (error) {
-        reject(error)
-      } else {
-        resolve(JSON.parse(body))
-      }
-    })
-  })
-}
-
 const locales = ['en', 'de', 'fr', 'nl', 'it', 'es', 'pt', 'pl', 'ru']
 
+const REQUEST_TIMEOUT = 3000
+
 const createLocation = async (session, mapboxData) => {
   const data = {
     id: mapboxData.id + (mapboxData.address ? `-${mapboxData.address}` : ''),
@@ -78,15 +66,21 @@ export const createOrUpdateLocations = async (nodeLabel, nodeId, locationName, s
 
   let locationId
 
+  try {
     if (locationName !== null) {
-    const res: any = await fetch(
+      const response: any = await fetch(
         `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(
           locationName,
         )}.json?access_token=${
           CONFIG.MAPBOX_TOKEN
         }&types=region,place,country,address&language=${locales.join(',')}`,
+        {
+          signal: AbortSignal.timeout(REQUEST_TIMEOUT),
+        },
       )
 
+      const res = await response.json()
+
       if (!res?.features?.[0]) {
         throw new UserInputError('locationName is invalid')
       }
@@ -157,15 +151,26 @@ export const createOrUpdateLocations = async (nodeLabel, nodeId, locationName, s
         { nodeId, locationId },
       )
     })
+  } catch (error) {
+    throw new Error(error)
+  }
 }
 
 export const queryLocations = async ({ place, lang }) => {
+  try {
     const res: any = await fetch(
       `https://api.mapbox.com/geocoding/v5/mapbox.places/${place}.json?access_token=${CONFIG.MAPBOX_TOKEN}&types=region,place,country&language=${lang}`,
+      {
+        signal: AbortSignal.timeout(REQUEST_TIMEOUT),
+      },
     )
+    const response = await res.json()
     // Return empty array if no location found or error occurred
-  if (!res?.features) {
+    if (!response?.features) {
       return []
     }
-  return res.features
+    return response.features
+  } catch (error) {
+    throw new Error(error)
+  }
 }

webapp/components/Select/LocationSelect.vue

@@ -107,6 +107,8 @@ export default {
         this.cities = []
         return
       }
+
+      try {
         this.loadingGeo = true
 
         const place = encodeURIComponent(value)
@@ -120,6 +122,11 @@ export default {
         this.loadingGeo = false
 
         return this.cities.find((city) => city.value === value)
+      } catch (error) {
+        this.$toast.error(error.message)
+      } finally {
+        this.loadingGeo = false
+      }
     },
     clearLocationName(event) {
       event.target.value = ''