Challenges Monitoring ReactJS Applications

reactjs

ReactJS combines the speed of JavaScript with unique rendering capabilities to make applications that are highly dynamic, performance oriented, and responsive to user input. State of JS report 2018 cites performance as the major reason ReactJS has gained so much popularity in such a short time. When it comes to options for building single-page applications (SPAs), React delivers performance advantages over Angular and other JavaScript frameworks and libraries. Since React maintains a virtual DOM in JavaScript, it can quickly determine the minimal changes needed to bring the document to the desired state. Since the state of a React component’s is saved in JavaScript, you can evade accessing the DOM.

For small applications, performance optimizations that ReactJS deliver out-of-the-box are more than sufficient. However, as your applications evolve to include more complex views, maintaining and paralleling virtual DOMs can become a costly affair.  A large application is huge, branched and complicated render tree. Whenever you update the props to a node, React must reconfigure the render tree from the node all the way down the branches and, finally, the leaf, where virtual DOM comparisons take place.

Nevertheless, as the user base grows, an application tends to grow in complexities, carry more dependencies, and incorporate more third-party plugins. Its likelihood to hitting performance bottlenecks only expands. Multiply that with an ever-growing number of applications on millions web-enabled devices of various sizes and types and you can’t evade a potential performance nightmare down the line.

For example, users expect 60 frames per second when interacting with a web application in the browser, which gives you only 16.7ms to render each frame. When your app is slow, it’s often taking too long to respond to user events, taking too long to process the data or to re-render the new data. In a majority of cases, you’re not doing complex data processing on Clock — you’re wasting time re-rendering.

No doubt, even the most flawlessly designed and optimized React app calls for a performance monitoring tool.

 

Monitoring Component Mounts with Profiler

The number of times components re-render, along with the amount of resources and time taken, can say lot about the performance of your React application in production. The Profiler component is a built-in React component that measures “mount” or “update” time of a component subtree. whenever a component is updated or mounted, Profiler’s onRender function is time stamped. Profiler provides an approachable way to view problems in React apps.

 

import { unstable_Profiler as Profiler } from "react"

<Profiler id="Counter" onRender={callback}>

    <Counter />

</Profiler>

 

The id prop identifies the reporting, while the onRender function is associated with arguments when the Counter component is mounted or revised.

 

function callback(id, phase, actualTime, baseTime, startTime, commitTime) {

log("id: " + id, "phase:" + phase, "actualTime:" + actualTime,   "baseTime: " + baseTime, "startTime: " + startTime, "commitTime: " +  commitTime)

}

 

The function’s arguments are collected time stamps of when the Counter component was rendered. We will take a look at each of the parameters.

 

id.  The unique ID associated with Profiler component.

phase.  This detects the phase whether in “mount” phase or “update” phase.

actualTime.  The time taken by Profiler to render committed updates.

baseTime.  The time taken by one of the components in the Profiler tree to mount or update.

startTime.  Logs the time stamp Profiler begins measuring the mount/render time for its descendants.

commitTime.  The time React took to commit an update.

 

Monitoring Components that are Re-rendered Using React Developer Tools

During development, if you learn which component is being re-rendered, it can save your application in production from various performance bottlenecks. React Developer Tools make that simple for developer by coloring the component boundaries, whenever they are re-rendering.  If your main components re-render, the edges that capture the Counter and Count components will be briefly highlighted.

The type of color that appears depends on how often/frequent a component is re-rendered, giving you the ability to easily identify which component updates the most frequently so you can optimize it appropriately.

 

|    green – low frequency update

|    blue – average frequency update

v    red – denotes a very frequent update

 

Identifying Perf Issues with React.addons.Perf

To start Perf, you must call Perf.start() from the console, record the action, and call Perf.stop() to stop Perf. Then, you can call any of the following methods to view sets of useful measurements.

Perf.printWasted()

Perf.printWasted() is the most useful method you call on React.addons.Perf.  Perf.printWasted()tells you amount of time lost contracting render tree and comparing virtual DOMs with each other. These components are mentioned above are prime candidates to improve the performance of your React application.

 

Perf.printInclusive() / Perf.printExclusive()

Perf.printInclusive() and Perf.printExclusive() return amount of time it appropriated to render your components. Most developers won’t find this method very useful, as the performance issues triggered by rendering are normally solved by not rendering using the above method: Perf.printWasted().

However, the method can help you identify components that are performing heavy computations in lifecycle methods. You will learn that after fixing printWasted issues, it is your un-optimized application code that is hogging those precious resources. Alternatively, you can bring the standard Chrome DevTool’s JavaScript Profiler and take a look at the most heavy function calls directly.

 

Perf.printDOM()

Perf.printDOM() shows all DOM operations triggered during the rendering of React trees. If you been playing with ReactJS for quite some time, then you know this is perhaps the most cumbersome part. To browse an endless list of rows and column if your app is pretty complex, can take eternity to detect what exactly went wrong.

Once your first set of components are rendered, you expect that future re-renders would reuse existing DOM nodes and not create fresh nodes–an optimization afforded by React’s virtual DOM and taken granted by every React developer.

Perf.printDOM() comes handy to find peculiar, expensive browser oddities or monitor major, unpredictable DOM modifications.

 

Synthetic Monitoring for ReactJS Web Applications

While the above-mentioned methods are integral to monitoring performance of a React application, they fail to mimic the actions a typical user performs while using the application. A synthetic monitoring platform, combined with a script recorder, can run and replay pre-recorded scripts, simulating user transactions and typical user actions in a real browser.  For example, basic navigation, form submissions, shopping-cart transactions, online gaming, scroll speed, animations, etc.

While Perf is an excellent tool to monitor amount of time lost in rendering tree and comparing virtual DOM with actual DOM, it doesn’t translate to what users may experience while using the application. Synthetic web application monitoring solutions, like the ones offered by Dotcom-Monitor, consist of an easy to use scripting tool to write your various monitoring test scripts. Those scripts can run in private test environment and checks your web application for various parameters at regular intervals.  Using a synthetic monitoring tool that uses real browsers allows you to get most accurate performance results.

Additionally, synthetic monitoring can be executed using different devices, browsers, and geographic locations. With single-page applications, the initial page load speed is not as important as end user’s experience. Not only is it vital to ensure your applications are up and running, but functionality must be monitored as well. For example, can users perform the necessary actions, and what, if any, third-party services or APIs are causing delays or issues.

The objective of web application monitoring is automate the process for identifying issues before they affect a larger number of users. With synthetic monitoring, you can set up alerts based on the requirements for your specific React application, and get notified immediately when something goes wrong.  Unlike the other tools discussed above, synthetic monitoring takes a proactive approach, freeing you from the time consuming process of you and your team having to run manual tests.

 

Monitoring ReactJS Applications: Conclusion

While those tools are useful for monitoring your React applications in development environments, monitoring performance in production is a challenge of another magnitude, and carries more weight. Giving in to “works on my machine” mentality is a cautionary tale when the performance of your application in production is at stake. Synthetic monitoring tools, on the other hand, give you performance reports from an end-user’s perspective, not from some cliché test cases imagined by developers. Nevertheless, if you’re looking to level-up your ReactJS performance monitoring, get a free 30-day trial of Dotcom-Monitor today.

 

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email
Share on print
Print