Detect infinite-loop style situations and error out

[benjackwhite]

Consider the following:

const MyComponent = (): JSX.Element => {
    const [count, setCount] = useState(0)

    useEffect(() => {
        requestAnimationFrame(() => {
            setCount(count + 1)
        })
    }, [count])

    posthog.capture('MyComponent loaded', { leet: 'coding' })

    return (
        <div>
            <p>Hey there</p>
        </div>
    )
}

If someone would forget to wrap the capture call in a useEffect (or similar situation) then they would end up tracking 1000s of events in a short period of time. We can deal with this on the backend but it would be much better if we could simply detect this in the frontend and immediately stop the ingestion, logging a warning about why this has been stopped (and potentially the stack trace) so that a dev could investigate further.

Things to consider:

• [ ] There may be some cases where this is wanted (rapid events in succession) so we should have a somewhat high threshold (100 events maybe) to allow these burst situations to occur
• [ ] We might want to track a special event $client_rate_limited so that this is visible in PostHog to the user otherwise they might just remain confused why they see no events coming in (also good for us to be able to track this happening and pro-actively reach out to the customer)

[ellie]

We also need to consider when people do not correctly specify the useEffect, and have it run way more often than it should

[benjackwhite]

I'm thinking of this more abstractly from React as a simple rate limiter on the underlying capture code. Went for the React example because I figured that is an actual example that is not unreasonable for even a senior engineer to accidentally do 😅

[lharries]

For reference, the way I managed to trigger the problem was as follows:

const MyComponent = (): JSX.Element => {
    const [count, setCount] = useState(0)

    useEffect(() => {
        posthog.capture('send message')
    })

    return (
        <div>
            <p>Hey there</p>
        </div>
    )
}

So without the [] in the useEffect