README.md

next-rum

The next-rum component extracts RUM data when Next.js router based navigation
is taking place in your application. This ensures that all previews and load
times are correctly tracked when the /pages are used dynamically loaded by
next instead of a full server refresh / reload.

Installation

npm install --save next-rum

Usage

The library is designed as React component. The reason for this is because
we know that if we get rendered by the Next client that all the required
globals that we need to hook into are available in the global scope.

The component will not produce any output, and will return the children
during render so you can use it as either a wrapper around your application
or as standalone component that you just include in the bottom of your
application:

navigated

The component is written to be library agnostic as possible, so we expose a
completion callback for when the page is navigated that will receive all
relevant timing information. You can use this callback to transfer RUM
information to the backend / service of your choosing.

clearResourceTimings

This will clear all the resource timing information that the browser has stored
right before we are about to navigate to a new page. This ensures that there's
enough room in the resource buffer, as well as makes it easier to find the start
and end resources that your page might have loaded.

This is on by default, but you can turn it off if needed, it not, no touchy.

<RUM navigated={ navigated } clearResourceTimings={ false } />

setResourceTimingBufferSize

Allows you to bump the resource limit of the performance browser API through
the component. In most, if not all cases you do not need to bump this value
as it default to ~150 resources, which is more than enough for most applications.

<RUM navigated={ navigated } setResourceTimingBufferSize={ 200 } />

delay

The next-rum component leverages the ResourceTiming API to more accurately
generate the correct loading times of your component so it can include images
and other assets that are loaded when the component is rendered. Unfortunately
the ResourceTiming API only contains item that are fully loaded. As this component
has no idea what you will be loading in the component, we will wait an x amount
of milliseconds before we gather the data, and call the navigated callback.
This gives assets some time to complete loading, so they can be included in the
metrics.