Violation - event handler took <N> ms slows app significantly - reactjs

https://imgur.com/a/NtVWlcj
I get tons of such errors in a (pretty big) react app scaffolded with cra, when scrolling, when loading the page initially, when receiveing payloads from web sockets, some are blocking the app for as much as 15000ms, what could be causing this?
I just don't have any clue how to debug this, the chrome profiler seems like a start, but I would like any insight that could ease my suffering, cause right now I am about 15 hours deep into debugging.

Related

React App becomes slow after long usage in safari

I'm running a learning app written in react. The average session duration is 15 Minutes. Recently some Safari users (mobile and desktop) reported that the apps feels laggy after a fair bit of use (answering questions).
I monitored memory used in safari and answered some questions in the app. After a while, there is a spike in page memory usage (a ridiculous amount). A minute later page memory goes up again and stays there. From there on the app feels quite laggy.
The vast majority of javascript events are Animation Frame Requested and Animation Frame Fired events. That's why I thought that animations may be the culprit. I'm using react-spring and found this open issue.
I can only run safari in a docker container on my Linux machine, as I don't have an apple device (https://github.com/sickcodes/Docker-OSX). Maybe that is the reason for the weirdly high amount of page memory usage (I wish I had that amount of RAM).
I'm kind of stuck and don't know how to proceed. Did anyone experience similar issues with react, react-spring and safari?

Running Google Insights test generates image 404s

Noticed something strange by chance when running a Google Insights speed test on my site. For some reason, it slows down my site almost to a halt and maxes out my server resources. Talking to the host, they noticed that the test generates loads of 404s that are all images. This is very strange since the images are clearly there. They only appear as 404s when running the speed test.
I have done some testing, deactivating every plugin on all of my three sites and it happens on all of them. The only thing they have in common really is that they use the same theme and, of course, that they are running on the same server. The host says it's not on their side though.
I have reached out to the support for the theme, but still want to check with you guys too if this is something you have ever come across and if someone has any experience with this?
I suspect there is something in the code causing this to happen, but I really have no clue. It only seems to happen with Google Insights too, not when I run a test with GTMetrix for example.

React app slows to a crawl only in developer mode

We have a React app. Lately we are experiencing an issue which only appears in "developer" mode. Two of the modules causes the app to become unresponsive for several seconds. The cpu works hard and memory usage spikes. If I change the settings in Webpack to "production" it works smoothly.
I have tried doing performance recordings in devtools, but I am unable to interpret anything useful from it.
I have tried making the Webpack configuration as simple as possible without any signs of improvement.
I am not posting any code since I don't really know where the issue(s) might be. But maybe someone can give some ideas about where to look or how we can pinpoint the issue.
Thanks to #noitse for pinpointing the problem. I removed "redux-immutable-state-invariant" and that fixed the problem.

React Native production app remote diagnostics / user assistance

I have published an app built with React Native. Currently it's iOS only, but eventually may be released for Android as well. I'd like a cross-platform solution to remotely assist customers that run into bugs, crashes or any unexpected behavior. While the app could continuously log everything to a server, I've found that that's not very helpful since customers usually have very specific points in time that they need help with. Sifting through continuous logs is time consuming and generally a waste of resources.
My hope is to give the user the ability to press a button to send the stack trace, the last N minutes worth of logs, etc directly to me. This wouldn't work in the case of a hard crash of course. The vast majority of the time the app is functional when there's something they need help with.
A pie-in-the-sky idea would be to let the user share their screen with me.
Found this related question but it doesn't fully encompass what I'm trying to accomplish:
Release mode diagnostics in React Native
BugSnag looks promising. It's a paid service.
https://www.bugsnag.com/platforms/react-native-error-reporting
I tried BugSnag and a few other services. In the end, Sentry has the most reliable and simplest RN library. It's also free for the Developer plan (5k errors per month is plenty enough for us, and supports multiple apps).
https://sentry.io/pricing/

App Engine log console severely lagging behind

For a few days now, my App Engine logging console has been behind for a steady 2-5 hours. That is, any logging messages appear in the console over 2 hours after they've been generated.
Sadly, there are parts of the application I can not test locally (OAuth-style callbacks, etc). All apps are written in Python.
Has anyone ever had this kind of problem? Any solutions, workarounds?
This turned out to be an issue with the timezone setting, reported by many.

Resources