Usage in react-native

[Koxx3]

Hello,
i'd really like to use this library !
But currently, when trying to use the example in react-native with Valhalla, it gives me :

LOG handleValhallaError [AxiosError: Request failed with status code 404]

Using the same request with curl gives a perfect answer.

Regards,
F.

[chrstnbwnkl]

Can you provide some more context? E.g. the arguments you're instantiating the class with, the args you're calling the method(s) with, as well as the routingjs version you're using :)

[Koxx3]

sure !

node test :

import { Valhalla } from "@routingjs/valhalla"

const v = new Valhalla() // URL defaults to http://valhalla1.openstreetmap.de
v.directions(
   [
       [47.380742, 8.512516], // pass as [lat, lon]
       [47.359467, 8.557835],
   ],
   "auto"
).then((d) => {
   // do stuff with the directions response
   d.directions.forEach((direction) => {
       console.log(direction.feature) // get the route as GeoJSON feature
       console.log(direction.feature.properties.distance) // get the route distance
       console.log(direction.feature.properties.duration) // get the route duration
   })
})

==> works perfectly

react-native test with some code instrumentation :

yarn add @routingjs/valhalla

import { Valhalla } from '@routingjs/valhalla';

...

        const v = new Valhalla() // URL defaults to http://valhalla1.openstreetmap.de
        v.directions(
            [
        [47.380742, 8.512516], // pass as [lat, lon]
        [47.359467, 8.557835],
            ],
            "auto"
        ).then((d) => {
            console.log(d)
            // do stuff with the directions response
            d.directions.forEach((direction) => {
                console.log(direction.feature)
            })
        })

===> fail

 LOG   this.client {"additionalAxiosOpts": undefined, "axiosInstance": [Function wrap], "axiosOptions": {"headers": {"Content-Type": "application/json", "User-Agent": "routing-js-"}, "timeout": 30000}, "baseURL": "https://valhalla1.openstreetmap.de", "headers": {"Content-Type": "application/json", "User-Agent": "routing-js-"}, "maxRetries": 5, "proxy": undefined, "retryOverQueryLimit": false, "timeout": 30000, "userAgent": "routing-js-"}
 LOG   this.client 2 {"additionalAxiosOpts": undefined, "axiosInstance": [Function wrap], "axiosOptions": {"headers": {"Content-Type": "application/json", "User-Agent": "routing-js-"}, "timeout": 30000}, "baseURL": "https://valhalla1.openstreetmap.de", "headers": {"Content-Type": "application/json", "User-Agent": "routing-js-"}, "maxRetries": 5, "proxy": undefined, "retryOverQueryLimit": false, "timeout": 30000, "userAgent": "routing-js-"}
 LOG   this.client params {"costing": "auto", "locations": [{"lat": 8.512516, "lon": 47.380742}, {"lat": 8.557835, "lon": 47.359467}], "narrative": false}
 LOG  err [Function error]
 LOG  handleValhallaError [AxiosError: Request failed with status code 404]

[chrstnbwnkl]

Can you pass the @routingjs version as well? We just added improved error handling today (v0.1.0), so maybe that would at least help pinpointing the cause. But the fact that you're getting a 404 is a bit strange. Could you also post the stringified AxiosError object?

[Koxx3]

It was updated already ;)

 LOG  client {
  "baseURL": "https://valhalla1.openstreetmap.de",
  "userAgent": "routing-js-",
  "timeout": 30000,
  "retryOverQueryLimit": false,
  "headers": {
    "Content-Type": "application/json",
    "User-Agent": "routing-js-"
  },
  "maxRetries": 5,
  "axiosOptions": {
    "headers": {
      "Content-Type": "application/json",
      "User-Agent": "routing-js-"
    },
    "timeout": 30000
  }
}

 LOG  params {
  "locations": [
    {
      "lon": 8.512516,
      "lat": 47.380742
    },
    {
      "lon": 8.557835,
      "lat": 47.359467
    }
  ],
  "costing": "auto",
  "narrative": false
}

 LOG  error {
  "message": "Request failed with status code 404",
  "name": "AxiosError",
  "stack": "AxiosError: Request failed with status code 404\n    at settle (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.smartdisplay&modulesOnly=false&runModule=true:370116:37)\n    at onloadend (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.smartdisplay&modulesOnly=false&runModule=true:369996:29)\n    at call (native)\n    at dispatchEvent (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.smartdisplay&modulesOnly=false&runModule=true:29720:31)\n    at setReadyState (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.smartdisplay&modulesOnly=false&runModule=true:28265:29)\n    at __didCompleteResponse (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.smartdisplay&modulesOnly=false&runModule=true:28058:29)\n    at apply (native)\n    at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.smartdisplay&modulesOnly=false&runModule=true:28190:52)\n    at apply (native)\n    at emit (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.smartdisplay&modulesOnly=false&runModule=true:1881:40)\n    at apply (native)\n    at __callFunction (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.smartdisplay&modulesOnly=false&runModule=true:20885:36)\n    at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.smartdisplay&modulesOnly=false&runModule=true:20635:31)\n    at __guard (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.smartdisplay&modulesOnly=false&runModule=true:20833:15)\n    at callFunctionReturnFlushedQueue (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.smartdisplay&modulesOnly=false&runModule=true:20634:21)",
  "config": {
    "transitional": {
      "silentJSONParsing": true,
      "forcedJSONParsing": true,
      "clarifyTimeoutError": false
    },
    "adapter": [
      "xhr",
      "http"
    ],
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "timeout": 30000,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "maxBodyLength": -1,
    "env": {},
    "headers": {
      "Accept": "application/json, text/plain, */*",
      "Content-Type": "application/json",
      "User-Agent": "routing-js-"
    },
    "method": "post",
    "url": "https://valhalla1.openstreetmap.de/route/",
    "data": "{\"locations\":[{\"lon\":8.512516,\"lat\":47.380742},{\"lon\":8.557835,\"lat\":47.359467}],\"costing\":\"auto\",\"narrative\":false}",
    "axios-retry": {
      "retryCount": 0,
      "lastRequestTime": 1682063509991
    }
  },
  "code": "ERR_BAD_REQUEST",
  "status": 404
}

[Koxx3]

the client url should not have the last "/" no ?

"url": "https://valhalla1.openstreetmap.de/route/",

[chrstnbwnkl]

Trailing slash should not be the issue here, but you can try manually using axios.post(...) without our neat wrapper and see what happens if you remove the trailing slash. You could also try it with/without the User-Agent request header that routingjs sends, maybe it's got something to do with #25

[Ananya2001-an]

Since u are making request to the default url shouldn't there be an api key supplied to the constructor?

[chrstnbwnkl]

The public Valhalla instance on OSM is open for anyone to use @Ananya2001-an , no key required

[Ananya2001-an]

Oh okay

[Koxx3]

yes, no problem the the API Key.

Valhalla really doesn't like the last "/" at the end of the API.

in the Client.js, I replaced this :

const urlObj = new URL(`${this.baseURL}${endpoint}`);

by this :

const urlObj = `${this.baseURL}${endpoint}`;

and it works fine !

[chrstnbwnkl]

Okay then we've found it 😄 I can actually reproduce it locally using an Insomnia playground. @Ananya2001-an do you want to quickly draft a PR?

[nilsnolde]

Hm that’s an issue with the server as well right? A missing trailing slash shouldn’t cause a 404

[chrstnbwnkl]

Can confirm for locally running container using our Valhalla image as well though

curl --request POST \
  --url http://localhost:8002/route/ \
  --header 'Content-Type: application/json' \
  --header 'User-Agent: routingjs' \
  --data '{"locations":[{"lon":1.51886,"lat":42.5063},{"lon":1.53789,"lat":42.51007}],"costing":"pedestrian","narrative":false}'

gives me:

{
	"error_code": 106,
	"error": "Try any of: '\/locate' '\/route' '\/height' '\/sources_to_targets' '\/optimized_route' '\/isochrone' '\/trace_route' '\/trace_attributes' '\/transit_available' '\/expansion' '\/centroid' '\/status' ",
	"status_code": 404,
	"status": "Not Found"
}

[Ananya2001-an]

Okay then we've found it 😄 I can actually reproduce it locally using an Insomnia playground. @Ananya2001-an do you want to quickly draft a PR?

Yup I can do it. Just give me some time

[Ananya2001-an]

When I am testing locally and against the default URL there is no trailing slash being added to the url at the end so how come this const urlObj = new URL(${this.baseURL}${endpoint}); was doing so for @Koxx3 ?

[chrstnbwnkl]

This probably just has to do with differing behavior of the URL API across browsers/platforms. As mentioned above, if you use a tool like Postman or Insomnia, you should be able to reproduce that behavior as well :-)

[Ananya2001-an]

Okay... so then we can just replace it with a string

[chrstnbwnkl]

There's a reason we use URL though 😅 It's practical for encoding search params, so I would like to stick with it.

Actually, when I try it in my browser console, it doesn't add a trailing slash to a route that deviates from the base URL, so maybe this is specific to the platform @Koxx3 is using in this case?

[Ananya2001-an]

No issues we can do this :

const urlObj = new URL(`${this.baseURL}${endpoint}`)
urlObj.href = `${this.baseURL}${endpoint}`

So even if a trailing slash is added we still can rewrite the href prop to update it to the correct path before making the request.

[nilsnolde]

Aren’t we patching another software’s issue? Ideally a server would be robust to this IMHO. Even more ideally, client software shouldn’t just randomly add smth that alters the URL (it’s not the same URL, eg caching will behave differently). If it’s not the public server’s apache, then it’s prime_server or Valhalla (though for the public server it seems it’s a combination of both Apache and prime_server/valhalla?).

Very strange that this never caused an issue before though.. Trailing slashes seem to be very controversial haha

[chrstnbwnkl]

It seems that the reason this is suddenly an issue pertains to the platform that @Koxx3 is developing for (I'm not really familiar with React Native but I suppose you're using some kind of polyfill to be able to use the URL API? ), because in the browser it doesn't seem to be an issue.

[nilsnolde]

Yeah that's really weird behavior for a client lib (obviously not @Koxx3 fault). Still, a trailing slash can be added by people randomly (on purpose, by accident, out of habit), and I think we should fix this in prime_server. I'll ask Kevin, maybe he's open for that.

[nilsnolde]

Seems to be an old (and still active) bug in react native as Kevin made me aware of: facebook/react-native#24428.

The example there with a PNG is really weird😄 There seem to be a few workarounds in there too.

[nilsnolde]

Also the consensus was that 404 is fine there, the URL is wrong with a trailing slash. I’ll still add a redirect on the public server. Won’t affect other people’s setups of course.

[Ananya2001-an]

Seems to be an old (and still active) bug in react native as Kevin made me aware of: facebook/react-native#24428.

You did a good search 👍🏼 😆

[nilsnolde]

closing due to not being our issue:)

[Koxx3]

hello !
I migrate from react native 0.70 to 0.74 and from routing 0.0.1 to 0.2.1 and the issue rise again ...

I had to do this to fix it :
// const urlObj = new URL(${this.baseURL}${endpoint});
const urlObj = ${this.baseURL}${endpoint};