Home

Welcome to the react-dynamics wiki!

Welcome to Dynamics, A simple way for capturing Component level usage metrics and errors for a React application. The implementation is inspired by AppDynamics agent which does something similar for java applications.

How to install it

Install the agent library

npm i react-dynamics-agent

How to use it

1. Use included HOC to wrap the components for which you would like to collect metrics.

const Sample1 =  () => {
    return (
      ...
    )
}

export default withDynamics(Sample1, 'sample1');

2. Alternatively use the hook provided which brings the metric collection functionality with it

const Sample1 =  () => {

    const ref = useDynamics('sample1');
    ...
    return (
        <div ref={ref}>
        ...
        </div>
    )
}

export default Sample1;

3. Include Service Worker into your application's public folder. The worker is responsible for dispatching the telemetry to your back end.

public/dynamicsWorker.js

4. Configure the application to use ReactDynamics by calling below method in application's index file.

configureAnalytics({
    applicationName: 'SampleApplication1',
    captureEvents: [DynamicEvents.MOUNT, DynamicEvents.ERROR],
    captureAnonymizedId: true,
    apiUrl: 'https://google/com',
    devConsole: true
});

Key Terminologies

Dynamics HOC - As the name suggests the higher order component is one of the key pieces in the capture of telemetry from components. It wraps around your component and hooks into the lifecycle methods as well as event handlers to capture various events into the Dynamics system.

Configuration Service - This service setups all the metadata of the application alongside configs which are required for collating the telemetries of all components into a single place.

Local Storage - It is a key value store built into Chrome itself which stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Indexed DB - It is a JavaScript-based object-oriented database built into Chrome itself which can store large amounts of structured data. IndexedDB lets you store and retrieve objects that are indexed with a key. We use a wrapper built around it to interact with it called localForage.

Service Worker - A service worker is a script that runs independently in the browser background. On the user side, it can intercept its network requests and decide what to load. We use the service worker to dispatch the telemetry stored in Chrome to your choice of destination.