Merge pull request #5 from axiomhq/arne/implement-debounce

Replace lodash/debounce with custom impl

README.md

@@ -2,13 +2,13 @@
 
 ![](./web-vitals-dashboard.png)
 
-Send Web-Vitals from Vercel to [Axiom](https://axiom.co).
+Send Web-Vitals and logs from Next.js to [Axiom](https://axiom.co).
 
 ## Get started
 
-1. Make sure you have the [Axiom Vercel integration](https://www.axiom.co/vercel) installed
-2. In your Vercel project, run `npm install --save next-axiom`
-3. Wrap your NextJS config in `withAxiom` like this in `next.config.js`:
+1. Make sure you have the [Axiom Vercel integration](https://www.axiom.co/vercel) installed or export `NEXT_PUBLIC_AXIOM_INGEST_ENDPOINT`
+2. In your Next.js project, run `npm install --save next-axiom`
+3. Wrap your Next.js config in `withAxiom` like this in `next.config.js`:
 
 ```js
 const { withAxiom } = require('next-axiom');
@@ -18,7 +18,7 @@ module.exports = withAxiom({
 })
 ```
 
-This will proxy the Axiom ingest call to improve deliverability.
+This will proxy the Axiom ingest call from the frontend to improve deliverability.
 
 ## Reporting WebVitals
 
@@ -30,24 +30,23 @@ export { reportWebVitals } from 'next-axiom';
 ## Sending Logs
 
 1. Import Axiom's logger
-
 ```js
 import { log } from 'next-axiom';
 ```
 
-2. Use the logger to send logs to Axiom, you can attach
-other metadata to your logs by passing them as parameters:
+2. Use the logger to send logs to Axiom, you can attach other metadata to your 
+logs by passing them as parameters:
 ```js
 log.info('hello, world!')
-log.debug('debugging information', {foo: 'bar', x: 'y'})
+log.debug('debugging information', { foo: 'bar', x: 'y' })
 log.warn('be careful!')
-log.error('ops!')
+log.error('oops!')
 ```
 
-Deploy your site and watch data coming into your Axiom dashboard
+Deploy your site and watch data coming into your Axiom dashboard.
 
 The log functions are asynchoronus functions, make sure to wait for them
-when its appropriate. Like when running on serverless/edge functions:
+when its appropriate, like when running on serverless/edge functions:
 
 ```js
 await log.info('function will wait for the log to be sent')

examples/logger/pages/_middleware.js

@@ -0,0 +1,7 @@
+import { NextResponse } from 'next/server'
+import { log } from 'next-axiom'
+
+export async function middleware(_req, _ev) {
+  await log.info("Hello from middleware", { 'bar': 'baz' });
+  return NextResponse.next()
+}

package.json

@@ -49,7 +49,6 @@
     "typescript": "^4.6.4"
   },
   "dependencies": {
-    "cross-fetch": "^3.1.5",
-    "lodash": "^4.17.21"
+    "cross-fetch": "^3.1.5"
   }
-}
+}

src/webVitals.ts

@@ -4,16 +4,23 @@ import { isBrowser, proxyPath } from './config';
 export { log } from './logger';
 
 const url = `${proxyPath}/web-vitals`;
-const _debounce = require('lodash/debounce');
+
+const debounce = (fn: Function, ms = 300) => {
+  let timeoutId: ReturnType<typeof setTimeout>;
+  return function (this: any, ...args: any[]) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn.apply(this, args), ms);
+  };
+};
 
 export declare type WebVitalsMetric = NextWebVitalsMetric & { route: string };
 
-const debounceSendMetrics = _debounce(() => sendMetrics(), 1000);
+const debouncedSendMetrics = debounce(sendMetrics, 1000);
 let collectedMetrics: WebVitalsMetric[] = [];
 
 export function reportWebVitals(metric: NextWebVitalsMetric) {
   collectedMetrics.push({ route: window.__NEXT_DATA__?.page, ...metric });
-  debounceSendMetrics();
+  debouncedSendMetrics();
 }
 
 function sendMetrics() {