logger
This package provides a simple integration with your analytics tool(e.g. Google Analytics, Amplitude) designed to handle various types of user events and context management in your React application. It is built with TypeScript, ensuring type safety and ease of integration.
Main Features
- Declarative user event tracking APIs
- Ensures execution order in asynchronous event operations.
- Batching options for efficient and performant data transmission.
- Decouples your React application from analytics tool.
Why logger?
If you're developing a web service with various experiments and iterations, user event tracking and logging is essential. However, logging during frontend development can sometimes be a painful process.
Maybe you have to create a custom hook, integrate your logging logic with your state management logic, and deal with all the hassle, making your code messy and hard to maintain.
logger helps you track events with type-safe declarative APIs, and enhances your logging performance with batching.
Install
Using npm:
$ npm install @loggists/logger
Using yarn:
$ yarn add @loggists/logger
Using pnpm:
$ pnpm add @loggists/logger
Example with react-ga4
logger.ts
import ReactGA from "react-ga4";
import { createLogger } from "@loggists/logger";
import { SendParams, EventParams, GAContext, ImpressionParams, PageViewParams } from "./types";
export const [Log, useLog] = createLogger<GAContext, SendParams, EventParams, ImpressionParams, PageViewParams>({
init: () => {
ReactGA.initialize("(your-ga-id)");
},
DOMEvents: {
onClick: (params, context) => {
ReactGA.event({
...params,
...context,
action: "click",
});
},
},
impression: {
onImpression: (params, context) => {
ReactGA.event({
...params,
...context,
action: "impression",
});
},
},
pageView: {
onView: ({ page }) => {
ReactGA.send({
hitType: "pageview",
page,
});
},
},
});
App.tsx
import { useState } from "react";
import { Log } from "./logger";
function App() {
const [count, setCount] = useState(0);
return (
<Log.Provider
initialContext={{ userId: "USERID", clientId: "CLIENTID" }}
>
<h1>Logger</h1>
<div className="card">
<Log.Click
params={{ category: "button", label: "count", value: count + 1 }}
>
<button onClick={() => setCount((count) => count + 1)} >
count is {count}
</button>
</Log.Click>
</div>
<Log.Impression
params={{ category: "text", label: "Good morning" }}
>
<div>Good morning</div>
</Log.Impression>
<Log.PageView params={{page: "/home"}} />
</Log.Provider>
);
}
Docs
