ReactJS - Freeze/Hangs in safari on mac and iOS only

user_6818426 0
Viewed 1765

We have a reactJs application which works fine on all other browsers except safari on macOS and ios. The app works perfectly on Chrome on macOs or windows and ios as well.

Also, once the app freezes, we cannot open dev console in safari and if it is open, most of the things don't work like pausing script execution. And we can say from activity monitor that it goes in some infinite loop as the cpu usage of that page goes to 100% but i am unable to figure out as there are no errors at all and it works on other browsers.

It just freezes on loading and becomes totally unresponsive (No scroll or clicks etc). It looks like there is some infinite loop or dependency issue. The webapp is kind of LMS and has many dependencies but to give you an idea here is the stack -

  • GraphQL
  • React Router Dom
  • React Hooks
  • Sentry for Logging
  • Socket etc

If you have any questions feel free to ask. Here is the site - https://i3.stage.cudy.co/

Thanks

reactjs mobile-safari safari google-chrome debugging
2 Answers

I went into trying to see what's going on and I noticed three things:

  1. First couple of times I tried to open your site it froze as you say. Could not even open dev tools.

  2. After previous tries, I suddenly saw the icons for your menu options (browse tutors, assignments, feeds, etc) appear and everything worked "fine" and no more freezes.

However, I did noticed a bunch of errors in dev tools. Most of them are related to urls not allowed to access and some others due a /profiles trying to access an API of some sort.

  1. You have a lot of unhandled promise rejections errors in your *.js so that may also be something to look at.

I would suggest tackling down the cross domain origin policies first and then add logic to handle the promise rejections that you're missing since sometimes those unhandled scenarios leave the app at the dark without knowing what to do and may interrupt your logic process thus rendering frozen sites because of that.

Last but not less important, this is a good way of tracing down the issue.

user_27630620

There are way too many factors involved for us to help you without looking at the code.

I'd recommend the following:

  • Going through the code history and testing it on each major version change so you can rule out any culprits or suspicions.
  • I'd disconnect any packages 1 by 1.
  • Disconnect the API so see if it's a server issue where you're requesting API calls infinitely or something silly like that.
  • If disconnecting the API works then you know where to look at.

Cheers

user_121868040
Related