react-hook-observability includes multiple libraries that provide Observability as React Hooks in React.
| Library Name | Description | README | NPM |
|---|---|---|---|
| @react-hook-observability/hooks | Provides Observability as React Hooks in React. | README |  |
| @react-hook-observability/nextjs-hooks | Provides Observability as React Hooks in React and this is specific to Next.js. | README |  |
| @react-hook-observability/nextjs-server-actions | Provides ServerActions for Next.js. | README |  |
Install the library.
npm install @react-hook-observability/hooksyarn add @react-hook-observability/hookspnpm add @react-hook-observability/hooksbun add @react-hook-observability/hooksexport 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>
);
}see CONTRIBUTING.md