react-telemetry-collector

A generic React telemetry collector

Usage no npm install needed!

<script type="module">
  import reactTelemetryCollector from 'https://cdn.skypack.dev/react-telemetry-collector';
</script>

README

A generic Telemetry collector that can be configured to handle most User actions and doesn't require any UI instrumentation.

By default everything is logged to console...

Example usage (default create-react-app application):

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import TelemetryCollector from "./lib/components/TelemetryCollector";

function App() {
  const onClick = () => {};

  return (
    <TelemetryCollector
      user="Olaf"
      appName="Test"
      config={{
        events: ["click", "mouseover"],
        target: {
          attributes: ["data-telemetry", "data-testid"],
        },
        keepAliveDuration: 5000,
        api: {
          url: "http://localhost:3005",
          analytics: "/analytics",
          alive: "/alive",
          route: "/route",
        },
      }}
    >
      <div data-testid="top-div" className="App">
        <header data-testid="app-header" className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
          <button data-testid="clickme-button">Click Me</button>
          <button
            data-telemetry={{
              content: "Click Me",
              type: "button",
              feature: "new stuff",
            }}
            onClick={onClick}
          >
            Click Me no test ID
          </button>
        </header>
      </div>
    </TelemetryCollector>
  );
}

export default App;

Note: There are still bugs and some things don't just qork quite right yet...

Config attributes

Attribute Description Value
events target DOM events array
target.attributes attributes to be used for logging array
keepAliveDuration how long before a user is considered to be idle millisecs
api.url url for sendBeacon http calls uri
api.analytics path for sendBeacon analytics http calls string
api.route path for sendBeacon route http calls string
api.alive path for sendBeacon alivehttp calls string

Events

Events to listen to can be specified (This is in flux as this may not be necessary)

Target Attributes

These are attributes that will be extracted and passed back through the API to the backend (if there is one)

backend API

  • url => the backend url i.e. http://my.backend.com this has to be a http backend as we are using BEACON API for sending events.

  • analytics => path of the analytics endpoint route

    • mouse event
    • keyboard event
  • route => path of the route endpoint route

    • route change event
  • alive => path of the keepalive endpoint route

    • idle event
    • busy event

Backend Server

Not my problem :-)

... that being said a simple express server should do

const express = require("express");
const bodyParser = require("body-parser");
const app = express();

// the server port
const port = 3005;

// body parser -> probably deprecated
app.use(bodyParser.text());

app.post("/analytics", (req, res) => {
  console.log("analytics", JSON.parse(req.body));
  res.sendStatus(204);
});

app.post("/alive", (req, res) => {
  console.log("alive", JSON.parse(req.body));
  res.sendStatus(204);
});

app.post("/route", (req, res) => {
  console.log("route", JSON.parse(req.body));
  res.sendStatus(204);
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});