How I Fix Flagsmith's Frontend Issue #7649

Flagsmith is a web app that helps to flag features and config remote-service. It's important for companies that want to use A/B testing for its users, and control features in production. It's using Django as backend and React as frontend.

I encounter this error #7537 made by a Sentry-bot.

Analyzing the root cause.

Upon reading the error message, I dive into Flagsmith' codebase. The n.input is undefined when executing the method focusTimeout.

It's a problem that happens inside useEffect hook. This hook is used to help the page to focus the screen on a certain HTML element using useRef hook, which is assigned to inputRef.

We can see that the n.input is undefined when it's trying to execute method focus, so the inputRef has not been set. To prevent this from happening, I propose an explicit check to verify that:

1. inputRef.current exists and isn't null

2. inputRef.current.focus is actually a function before attempting to call it

My Pull Request #7649 is merged around 7 weeks after I created it. Appreaciate the maintainers for super speed response!