422 error: Query too long - 21/20 tokens

[adesurirey]

Some of my users are experiencing 422 errors in production.

Here is an example of log received through Sentry.io :

{
  "body": {
    "message": "Query too long - 21/20 tokens"
  },
  "type": "HttpError",
  "message": "Query too long - 21/20 tokens",
  "request": {
    "body": null,
    "origin": "https://api.mapbox.com",
    "file": null,
    "_options": {
      "path": "/geocoding/v5/:mode/:query.json",
      "params": "[Object]",
      "method": "GET",
      "query": "[Object]"
    },
    "response": null,
    "id": 15,
    "headers": {},
    "client": {
      "origin": "https://api.mapbox.com",
      "accessToken": "[FILTERED]"
    },
    "params": {
      "query": "jade & Spa, Calle 55 Supermanzana II, Manzana 4 Lote I-0I, Puerto Morelos Benito Juárez, Puerto Morelos, Quintana Roo 77580, Mexic",
      "mode": "mapbox.places"
    },
    "aborted": false,
    "error": "[Circular ~]",
    "path": "/geocoding/v5/:mode/:query.json",
    "method": "GET",
    "query": {
      "country": "[undefined]",
      "proximity": "[Array]",
      "limit": 5,
      "language": "[Array]"
    },
    "emitter": {
      "_events": "[Object]",
      "_eventsCount": 0
    },
    "sent": true
  },
  "statusCode": 422
}

As seen in Mapbox documentation, we may have to filter words in query so it never sends more than 20 words: https://docs.mapbox.com/api/search/#geocoding-api-errors

Let me know if you have the same issue and if I can do anything.

Thanks

[SamSamskies]

Hi @adesurirey, I've never come across this issue before. I think it would help to understand how your users are using the geocoder. Why is the query so long? Are the users copying and pasting it? Queries that long don't work with Mapbox's geocoder. I just tried it here https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/. If it's that long because they are editing a result they previously picked (they could hit the clear icon instead of doing this), you could use a combination of the inputValue and onResult props to truncate the value in the input field. Here's an example: https://codesandbox.io/s/react-map-gl-geocoder-shorten-query-result-example-k0jmq.

The normal workflow is typing a few characters and selecting one of the options. Typically the queries usually don't have more than a few tokens. I think most of my own queries are only one or two tokens.

My gut feeling is that your users probably don't even notice this error. I personally would ignore these Sentry errors unless you verify that it is a problem.

[adesurirey]

Hi @SamSamskies, can't know exactly but I think you're right about copy and pasting long address. I'll go with your solution. Thanks !