Merge remote-tracking branch 'origin/main' into v0.3.0-prerelease

Author: alexgallardo

CHANGELOG.md

@@ -7,9 +7,29 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- New optional prop for `MetricsLogger` called `logger` to set a different logger.
+
+  Usage:
+
+  ```tsx
+  const metricsLogger = useMemo(
+    () =>
+      ({ metricName, value, tags }) => {
+        console.debug('Custom log for prom-react!', metricName, value, tags);
+      },
+    [],
+  );
+
+  return <MetricsLogger logger={metricsLogger} />;
+  ```
+
 ## [0.2.1] - 2022-06-09
 
-- Fixed `peerDependencies` for `react` and `react` DOM to allow versions up from `16.9`.
+### Fixed
+
+- `peerDependencies` for `react` and `react` DOM to allow versions up from `16.9`.
 
 ## [0.2.0] - 2022-04-21
 
@@ -19,11 +39,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Update some inner dependencies
+- Update some inner dependencies.
 
 ## [0.1.0] - 2021-11-05
 
 ### Added
 
-- Initial version of the library. It includes both `MetricsProvider` and
-  `useMetrics`. See [README](./README.md) for more details
+- Initial version of the library. It includes both `MetricsProvider` and `useMetrics`. See [README](./README.md) for more details.

README.md

@@ -198,6 +198,10 @@ to your package dependencies. You can have a look at its
 React component that will log into console all metric observations. It won't render anything in the screen.
 You should not add this in production.
 
+Props:
+
+- `logger?: ObserveCallback`: If set, it will replace the original logger. Ensure the reference of this value doesn't change between renders by memoizing the logger function or defining it outside the component to avoid performance issues.
+
 #### MetricsDebugOverlay
 
 React component to show metrics debug info. Must be placed under `MetricsProvider`. It shows a not-so-fancy
@@ -268,6 +272,25 @@ This will produce log entries like this:
 
 `[prom_react] prom_react_navigation_duration_seconds 1.2456 {app_name: 'my_app', path: '/app', navigation_type: 'full_page' }`
 
+You can customize the output for `MetricsLogger` by replacing the original loader:
+
+```tsx
+const metricsLogger = ({ metricName, value, tags }) => {
+  console.debug('Custom log for prom-react!', metricName, value, tags);
+};
+const AppRoot = () => (
+  <MetricsProvider
+    appName="my-app-name"
+    owner="my-team"
+    getNormalizedPath={normalizePath}
+    metricsAggregatorUrl="https://some-metrics-aggregator.com/push-metrics"
+  >
+    <MetricsLogger logger={metricsLogger} />
+    <MyApp />
+  </MetricsProvider>
+);
+```
+
 Moreover, you can also add a widget that will show last navigation event being triggered. This is particularly useful to check
 if all your pages are properly instrumented (you should navigate across your app and the widget should show the right path after
 every section change).

package.json

@@ -41,7 +41,7 @@
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.3.0",
     "@testing-library/user-event": "14.4.3",
-    "@types/jest": "28.1.7",
+    "@types/jest": "29.0.0",
     "@types/react": "18.0.17",
     "@types/react-beforeunload": "2.1.1",
     "@types/react-dom": "18.0.6",
@@ -50,7 +50,7 @@
     "eslint": "8.22.0",
     "eslint-import-resolver-typescript": "3.5.0",
     "isomorphic-unfetch": "3.1.0",
-    "jest": "28.1.3",
+    "jest": "29.0.2",
     "jest-environment-jsdom": "28.1.3",
     "msw": "0.45.0",
     "prettier": "2.7.1",

src/MetricsLogger.tsx

@@ -1,21 +1,28 @@
-import { FC, useEffect } from 'react';
+import { useEffect } from 'react';
 
 import { ObserveCallback, useMetrics } from './MetricsContext';
 
-const handleObserve: ObserveCallback = ({ metricName, value, tags }) => {
+const defaultLogger: ObserveCallback = ({ metricName, value, tags }) => {
   // eslint-disable-next-line no-console
   console.log('[prom_react]', metricName, value, tags);
 };
 
-const MetricsLogger: FC = () => {
+interface MetricsLoggerProps {
+  /**
+   * If set, it will replace the original logger. Ensure the reference of this value doesn't change between renders by memoizing the logger function or defining it outside the component to avoid performance issues.
+   */
+  logger?: ObserveCallback;
+}
+
+const MetricsLogger = ({ logger = defaultLogger }: MetricsLoggerProps) => {
   const { addObserveListener, removeObserveListener } = useMetrics();
 
   useEffect(() => {
-    addObserveListener(handleObserve);
+    addObserveListener(logger);
     return () => {
-      removeObserveListener(handleObserve);
+      removeObserveListener(logger);
     };
-  }, [addObserveListener, removeObserveListener]);
+  }, [addObserveListener, logger, removeObserveListener]);
 
   return null;
 };

src/MetricsProvider.tsx

@@ -89,6 +89,7 @@ export interface MetricsProviderProps {
 }
 
 const defaultBuckets = [0.01, 0.1, 1, 2, 3, 4, 5, 7, 10, 15];
+const defaultCustomMetrics: MetricDefinition[] = [];
 
 const MetricsProvider = ({
   appName,
@@ -97,7 +98,7 @@ const MetricsProvider = ({
   getNormalizedPath,
   owner = '',
   histogramBuckets = defaultBuckets,
-  customMetrics = [],
+  customMetrics = defaultCustomMetrics,
   fetchOptions,
 }: PropsWithChildren<MetricsProviderProps>) => {
   const [isReady, setIsReady] = useState(false);