Images fail to load on Mapillary JS - Request limit?

Imagery, data, and integrations
1

I’ve got a frustrating recurring problem with image loading on Mapillary JS. I run a small non-profit using Mapillary to identify road hazards. We have integrated Mapillary JS with our own Vue app (https://map.safe7y.com/) to quickly review images of the road and compare them to the road safety devices we inventory.

After about 20 minutes of use - maybe 2,000 or so Mapillary images viewed, we find that all mapillary images cease loading and we get the following error messages:

Access to XMLHttpRequest at 'https://graph.mapillary.com/images?image_ids=568070274306488&fields=id,comp…erge_cc,mesh,quality_score,sfm_cluster,thumb_1024_url,thumb_2048_url,width' from origin 'https://map.safe7y.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

mapillary.module.js:85439 Failed to cache image (568070274306488). MapillaryError: Failed to fetch data
    at chunk-vendors.843f91ed.js:38
(anonymous)	@	mapillary.module.js:85439

graph.mapillary.com/…mb_2048_url,width:1 Failed to load resource: net::ERR_FAILED

mapillary.module.js:82228 Uncaught (in promise) MapillaryError: Failed to fetch data
    at chunk-vendors.843f91ed.js:38

This is what it looks like from within our app.

mapillary_loading_issue

I am taking over this code from the original developer, and I am Vue novice but it seems to be a verily vanilla implementation of the Mapillary JS viewer v4. All our code for this project is open source and I believe the majority of the API interface occurs here:

What is frustrating about this particular error is that it seems to be time based. 30 minutes later the same, user, without refreshing, can load the images that threw errors before. Refreshing the page does not fix the issue, nor does clearing cookies, switching browsers, switching IP addresses or switching computers.

Once the user is able to review images the following error are thrown, which may be related:

Unchecked runtime.lastError: The message port closed before a response was received.
mapillary.module.js:48502 

Uncaught (in promise) CancelMapillaryError: Request aborted by a subsequent request to id 223465049110163.
    at QO._abortRequest (mapillary.module.js:86675)
    at QO.moveTo$ (mapillary.module.js:86588)
    at rR.moveTo (mapillary.module.js:87714)
    at Imagery.vue:158
    at u (runtime.js:63)
    at Generator._invoke (runtime.js:293)
    at Generator.next (runtime.js:118)
    at n (asyncToGenerator.js:3)
    at s (asyncToGenerator.js:25)
    at asyncToGenerator.js:32

My guess is that Mapillary is imposing a request limit, but I can’t find any documentation on this.

Any ideas?

1 Like
2

It looks like this is indeed a rate limit, but you should not normally be hittign the limit. The message “abort request” is suggesting you are not just requesting each image a few times, but it might be sending requests on blast. It should be something like 50k/min for rate limit of requests, so it’s worth checking if there might be a loop going on that’s calling something in the viewer library like moveToKey over and over way too much.

I do not see anything initially in the code that looks like a problem. Could it be that when the mouse hovers it repeatedly requests an image rather than only on click?

1 Like
3

Checking the app, I can see it makes about 100 requests each time the user clicks the map to load Mapillary images. Tons of calls to /images endpoint. It makes me think something is making a function run multiple times on click, where it should just run once.

1 Like
4

Thank you Chris. I’ll get on this ASAP after Thanksgiving