React Storefront
|

Firebase Performance Monitoring

The react-storefront-extensions commercial library makes it easy to implement RUM with Firebase Performance Monitoring, a free service provided by Google.

Create a Firebase Account

To set up Firebase Performance Monitoring on your site, first you need to set up an account with Firebase. Then, create a new project, select Add App, and select Web for the platform. You'll see a JavaScript snippet to add to the bottom of your body tag. Your not going to do that, but rather copy the value of the firebaseConfig variable and pass it to the config prop for the FirebasePerformanceMonitoring component in react-storefront-extensions.

Install Dependencies

To get started, install the first-input-delay polyfill and, if you haven't already, react-storefront-extensions.

npm i --save-dev first-input-delay react-storefront-extensions@^7.2.0

Add the FirebasePerformanceMonitoring Component to Your App

Next, add the following lines to the top of your App.js:

import fid from '!raw-loader!first-input-delay' // eslint-disable-line import/no-webpack-loader-syntax
import FirebasePerformanceMonitoring from 'react-storefront-extensions/FirebasePerformanceMonitoring'

Then add the FirebasePerformanceMonitoring component to your render method:

render() {
  return (
    <AnalyticsProvider targets={targets}>
      <TrackPageViews>
        <Fragment>
          <FirebasePerformanceMonitoring
            config={/* The value of the firebaseConfig object goes here */}
            firstInputDelayPolyfill={fid}
          />

          {/* The rest of your app goes here... */}

        </Fragment>
      </TrackPageViews>
    </AnalyticsProvider>
  )
}

Deploy and Wait

Finally, simply deploy to production and wait up to 12 hours for appear in the Firebase console.

You can view the performance data by clicking on Performance in the menu on the left side of the Firebase console.

Firebase will automatically gather the following metrics:

  • First paint
  • First contentful paint
  • First input delay
  • domContentLoadedEventEnd
  • domInteractive
  • loadEventEnd

React Storefront also adds a custom trace called client-side-navigation that captures the time it takes a user to navigate from one page to another on the client-side. Timing begins when the user clicks a link and ends when all data has been fetched from the server and the app has rendered the new page.

To view this metric, click View traces under First contentful paint by page in the performance dashboard.