How to Setup Performance monitoring in React with Sematext

In this tutorial, we will learn how to track the react app performance and real user monitoring (RUM) with Sematext.

Why is real user monitoring for React?

• Real user monitoring (RUM) helps us to monitor, how the end-user is experiencing the app in their browser.

• It detects any unusual behavior in your react app, such as slow response errors or a broken page.

• Some times a particular page in your app takes a long time to load, due to the large images or JavaScript files with real user monitoring we can collect the resource timing data, such as how much time does it takes to download images, JavaScript, and css files in the user's browser.

• It also has an alert mechanism when a serious issue has occurred.

By using this data you can improve your react app according to the user interaction and decrease the page load times.

Why Performance Matters

Performance plays a major role in the success of any online business because if your app or a blog is really good but it takes a long time to load on pc or smartphone, you can see the gradually dropping of users and search engine rankings.

Performance is about user experiences. When a site ships a lot of code, browsers must use the user's data plan to download the code, If a device has limited CPU and memory it takes more time to parse the code than the higher-end devices that leads to unresponsiveness and poor performance.

Here are some performance insights:

• A one-second delay in mobile load times can impact mobile conversions by 50%.

• 53% of visitors will abandon your website if it takes more than 3 seconds to load.

• Pinterest increased search engine traffic and sign-ups by 15% when they reduced perceived wait times by 40%. (article)

• The BBC found they lost an additional 10% of users for every additional second their site took to load.

• Whose sites loaded within five seconds earned up to twice as much ad revenue than sites loading within 19 seconds. (DoubleClick found publishers)

Test your site performance

Getting started

First, open your browser and navigate to the sematext experience.

Now, click on getting started and create a new account by entering your email and password.

Once you successfully created an account, on the side navigation bar open experience tab, click on the create experience app button.

Now, enter your app name, toggle Website uses Single Page Architecture button.

It will give an installation script like this.

<script type="text/javascript">
  (function(e,t,r,n,a){var c=[];e[a]=function(){c.push(arguments)};
  e[a].queue=c;var s=t.createElement(r);s.async=1;s.src=n;
  var u=t.getElementsByTagName(r)[0];u.parentNode.insertBefore(s,u)})
  (window,document,"script","//cdn.sematext.com/rum.js","strum");
</script>

Adding real user monitoring to React

1) Open your react app and navigate to the public folder and click on the index.html file.

Now add your Sematext installation scripts inside a head tag.

<script type="text/javascript">
    (function (e, t, r, n, a) {
      var c = []; e[a] = function () { c.push(arguments) };
      e[a].queue = c; var s = t.createElement(r); s.async = 1; s.src = n;
      var u = t.getElementsByTagName(r)[0]; u.parentNode.insertBefore(s, u)
    })
      (window, document, "script", "//cdn.sematext.com/rum.js", "strum");
</script>

<script type="text/javascript">
    strum('config', { token: '520cda56-83b8-4d0c-8c62-1c0134cd9614', 'receiverUrl': 'https://rum-receiver.sematext.com' });
</script>

2) We need to add a routeChange event listener to our app so that it keeps track the app when a route change happens because in single-page apps we are dynamically rewriting the same page by changing a url.

Open your routing configuration file and add the following history object to your Router component.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Switch, NavLink } from 'react-router-dom';
import { createBrowserHistory as createHistory } from 'history';
import './index.css';
import Home from './components/Home';
import Contact from './components/Contact';
import NotFound from './components/Notfound';


const history = createHistory();

history.listen((location, action) => {
  if (action !== 'REPLACE') {
    window.strum('routeChange', window.location.href);
  }
})

const Routing = (
  <Router history={history}>
    <div>
      <ul>
        <li>
          <NavLink exact activeClassName="active" to="/">
            Home
          </NavLink>
        </li>
        <li>
          <NavLink activeClassName="active" to="/contact">
            Contact
          </NavLink>
        </li>
      </ul>
      <hr />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/contact" component={Contact} />
        <Route component={NotFound} />
      </Switch>
    </div>
  </Router>
);



ReactDOM.render(
  Routing,
  document.getElementById('root')
);

Once you successfully completed all the above steps, now open your Sematext dashboard and click on the experience tab.

Code repository

Now, your react app is monitoring in real-time.

Let's explore some features on the dashboard.

On the resources tab, you can see the total number of downloaded resources for a particular url.

If you scroll down, you can see how much time it takes to download each resource.

On the Geography tab, you can see the page load times of each country. so that you can easily optimize your site based on your business location.

Conclusion

By using the Sematext Real user monitoring tool, you can find any performance issues and errors in real-time based on the end-user data and improve your react app page loads for every user, on every mobile or desktop device.

It also helps to optimize the layout and design to better serve customers.