@react-hook-observability/hooks NPM

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/hooks

yarn

yarn add @react-hook-observability/hooks

pnpm

pnpm add @react-hook-observability/hooks

bun

bun add @react-hook-observability/hooks

Usage

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