Rate limit issues with Instagram (VPN/SSR/Dev)

[arbiasgjoshi]

The repo has been throwing these errors in the past couple of days:

[jamesmoriarty]

@arbiasgjoshi is this the link you are using?

https://www.jamesmoriarty.xyz/react-instagram-authless-feed/

[bilaltirmizi123]

@arbiasgjoshi It was not even working for me at first but then I turned off my VPN and its working fine now.

[arbiasgjoshi]

@jamesmoriarty - What type of details do you need? My setup was pretty simple to be honest, simply added this tag:

import Feed from "react-instagram-authless-feed";

<Feed
    userName="-user-name-here-"
    className="image-wrapper"
    classNameLoading="Loading"
/>

Also, my screenshot above, is from your own hosted domain, even there I'm getting that error!

EDIT: I also tried with different VPN to see if the issue is due to Geolocation, but the same error kept happening for me!

[arbiasgjoshi]

Not sure if this will work, but this is also what I'm getting as the network response:

Is the HTTP 302 response work as intended here?

[jamesmoriarty]

I'll add some error handing around this and an error boundary to the example. Looks like you are triggering a rate limit on the instagram side and its trying to force you to auth your session.

Appears to be a frequent issue when on VPN with shared source/origin IPs.

[jamesmoriarty]

@arbiasgjoshi I've added some more error handling in this PR: #13

I've redeployed https://www.jamesmoriarty.xyz/react-instagram-authless-feed/ with an error boundary.

[arbiasgjoshi]

I have only one question with this new error handling you added! Are you assuming I'm using VPN?

The issue happened without VPN. I tested with VPN only due to the comment above implying that it works!

[MichaelZaporozhets]

I'm hitting this issue as well. Can we look at a more graceful degradation model? currently crashes the page.

[jamesmoriarty]

Hey @MichaelZaporozhets, because the rate limit is enforced on Instagram's side its hard to predict. I've changed the functionality to bubble up an exception so it can be handled with an error boundary. The point being the component isn't opinionated in how you should handle this failure.

See https://github.com/jamesmoriarty/react-instagram-authless-feed/blob/master/src/index.js#L37 and https://reactjs.org/docs/error-boundaries.html

[hvma411]

Hi, does anybody know what is the rate limit of IG? I mean this requests to get IG posts with this Feed component. @jamesmoriarty error boundary works perfect - thanks for that!

[mastir]

Same here, works in test env but after a day in production it fails.

[jamesmoriarty]

@mastir are you rendering serverside or anything obliviously different from the examples?

[mastir]

@jamesmoriarty Oh, thanks. No, we do not use server side rendering. You should write in BOLD CAPS about it, its like <5% of React widgets are targeted for server side usage, i`m sure most of people here simple did import your widget into front end projects and will see rate limits problem soon.

p.s. same trouble with demo

[jamesmoriarty]

@mastir appreciate the feedback. I had never seen the rate limit kick in until it was reported here.

I've managed to reproduce it but refreshing the feed maybe x100/ hour from an Australian public IP range and it appears to redirect to the auth/login page for ~24-48 hours.

I'll think about how to better communicate:

cc/ @hvma411

[jamesmoriarty]

Just an FYI for anyone watching this thread: upgrade to v2.0.0 because instagram.com introduced CORs breaking most/all unofficial feed libraries and requires an additional workaround.

[jamesmoriarty]

This change fixes this and introduces a new challenge: #19