@react-hook-observability/hooks
v0.1.33
Published
provides Observability as React Hooks in React.
Downloads
5
Maintainers
megumishReadme
About
react-hook-observability is a library that provides Observability as React Hooks in React.
react-hook-observability provides the following React Hooks.
| Hook Name | Description | README |
| :----------------------- | :--------------------------------------- | :------------------------------------------------------------------------------- |
| useBrowserEventSpans | Get spans when web browser event occurs. | useBrowserEventSpans |
| useClientConsoleTracer | Get tracer in web browser console. | useClientConsoleTracer |
Getting Started
Install the library.
npm
npm install @react-hook-observability/hooksyarn
yarn add @react-hook-observability/hookspnpm
pnpm add @react-hook-observability/hooksbun
bun add @react-hook-observability/hooksUsage
useBrowserEventSpans + useClientConsoleExporter
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
// 1. Setup Interactor and return following properties.
// - watchRef: <html> tag ref
// - spans: trace spans
// - resetSpans: reset trace spans
const { watchRef, spans, resetSpans } = useBrowserEventSpans({
eventKinds: ["click"],
batchConfig: {
scheduledDelayMillis: 100,
},
});
// 2. Setup Exporter. In this case, useClientConsoleExporter.
useClientConsoleExporter({ spans, resetSpans, intervalDuration: 100 });
// 3. Rendering html tag with watchRef.
return (
<html lang="en" ref={watchRef}>
<body className={inter.className}>{children}</body>
</html>
);
}Contributing
see CONTRIBUTING.md