Anyone have data on impact on UX of shipping profiling build in production to users?

Question

I understand that using the React Profiler in production should have a small or negligible impact on user experience at least for profiling 20-50 (guess) components on a page.

I would like to know if anyone can share any known data/estimates on the performance impact on the user experience when shipping the production build of react including the profiler?

I was hoping for some numbers, if possible.

But if not then it would be great if you could list out where the highest performance impact might be - I am trying to decide if it would be worth the effort (complex build) to ship two different builds to users to minimise the performance hit on user experience or is the impact negligible and I can just ship one build including the profiler but somehow toggle the profiling on/off on client side, perhaps using headers/cookies etc.

I see that Create React App build with profiler adds ~2kb to the bundle size - this is perfectly acceptable to me.

Context

I want to profile some components and not all in production, aggregate and send that data to a monitoring endpoint.

I see two options:

Shipping production build with profiler to x% of traffic sufficient to get a good sample size

IMO this is the 'better' solution but because it will require resolving some build complexities and take longer, I want to defer this until after I have proven it's value.

Shipping production build with profiler to all customers but toggling profiling on/off using headers and logic in the client side

This is the preferred option. The toggle is intended to turn off usage of User Timings API and null any performance hits that might have on the user experience. It might look like this in the client bundle:

if(headers["x-profiler"]) {
    return (
        <Profiler id="TodoList", onRender={postPerformanceDataToAPI}>
            <TodoList />
        </Profiler>
    );
} else {
    return <TodoList />;
}

Answer 1

First and foremost, before you deliver anything with telemetry (and performance monitoring uses telemetry) to send the results to your servers, check with your legal team.

• Many countries have very strict data collection laws
• Your privacy policy needs to be clear that you are taking data, and for what purposes that data is being used

Outside of that, I personally don't have data because the industry I work in is very sensitive to telemetry data being taken.

That said, there are lots of approaches to this problem. One of them being the Open Tracing standards which a number of commercial sites use to follow a request from the front end all the way through each microservice--including going through asynchronous communications. It provides a more complete impact and is anonymous.

As to the choice between your approaches, either can work. I understand if you are concerned about data volume, etc. But unless that profiling is very costly and noticeable, you might just want to deploy it to everyone for relatively short periods of time. In other words, you roll out the change for a few hours, and then roll it back to the normal baseline after you've collected your data. It's easier to manage and introduces fewer things in your code that can break.