# react-telemetry-collector

> A generic React telemetry collector

Latest version **0.8.12** (published 2021-08-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-telemetry-collector
pnpm add react-telemetry-collector
yarn add react-telemetry-collector
bun add react-telemetry-collector
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.12 |
| Published | 2021-08-27 |
| First published | 2021-08-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 12 |
| Unpacked size | 14.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Olaf Becker |
| Maintainers | obecker |
| Keywords | telemetry, react |

## Links

- npm: https://www.npmjs.com/package/react-telemetry-collector
- npm.io page: https://npm.io/package/react-telemetry-collector

## Dependencies (12)

- [cors](https://npm.io/package/cors.md) ^2.8.5
- [react](https://npm.io/package/react.md) 16.13.1
- [express](https://npm.io/package/express.md) ^4.17.1
- [react-dom](https://npm.io/package/react-dom.md) 16.13.1
- [web-vitals](https://npm.io/package/web-vitals.md) ^1.0.1
- [body-parser](https://npm.io/package/body-parser.md) ^1.19.0
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.3
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.1.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.4
- [react-telemetry-collector](https://npm.io/package/react-telemetry-collector.md) ^0.2.0
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.1.10

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.8.12 (latest) — 2021-08-27
- 0.8.11 — 2021-08-27
- 0.8.10 — 2021-08-27
- 0.8.8 — 2021-08-27
- 0.8.7 — 2021-08-27
- 0.8.6 — 2021-08-26
- 0.8.5 — 2021-08-26
- 0.8.4 — 2021-08-26
- 0.8.3 — 2021-08-25
- 0.8.2 — 2021-08-25
- 0.8.1 — 2021-08-25
- 0.8.0 — 2021-08-25
- 0.7.14 — 2021-08-25
- 0.7.13 — 2021-08-25
- 0.7.12 — 2021-08-25
- … 40 more at https://npm.io/package/react-telemetry-collector/versions

## 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):

```javascript
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

```javascript
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}`);
});
```

---
_Source: https://npm.io/package/react-telemetry-collector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._