Merge pull request #6 from axiomhq/islam/dx-77-get-rid-of-asyncawait-…

…in-next-axiom

split behaviour between frontend and backend

README.md

@@ -43,11 +43,7 @@ log.warn('be careful!')
 log.error('oops!')
 ```
 
-Deploy your site and watch data coming into your Axiom dashboard.
+Deploy your site and watch data coming into your Axiom dataset.
 
-The log functions are asynchoronus functions, make sure to wait for them
-when its appropriate, like when running on serverless/edge functions:
-
-```js
-await log.info('function will wait for the log to be sent')
-```
+:warning: If you log from a function, please call `await log.flush()` at the end
+to ensure log delivery.

__tests__/config.test.ts

@@ -1,4 +1,4 @@
-import { getIngestURL, EndpointType } from '../src/config';
+import { getIngestURL, EndpointType } from '../src/shared';
 
 test('reading ingest endpoint', () => {
   process.env.AXIOM_INGEST_ENDPOINT = 'https://axiom.co/api/test';

__tests__/log.test.ts

@@ -2,11 +2,20 @@
  * @jest-environment jsdom
  */
 import { log } from '../src/logger';
-import fetch from 'cross-fetch';
 
-jest.mock('cross-fetch');
+global.fetch = jest.fn() as jest.Mock;
+jest.useFakeTimers();
 
-test('logging', async () => {
-  await log.info('hello, world!');
-  expect(fetch).toHaveBeenCalled();
+test('sending logs from browser', async () => {
+  log.info('hello, world!');
+  expect(fetch).toHaveBeenCalledTimes(0);
+
+  jest.advanceTimersByTime(1000);
+  expect(fetch).toHaveBeenCalledTimes(1);
+
+  log.info('hello, world!');
+  expect(fetch).toHaveBeenCalledTimes(1);
+
+  await log.flush();
+  expect(fetch).toHaveBeenCalledTimes(2);
 });

examples/logger/package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "next": "12.1.4",
-    "next-axiom": "github:axiomhq/next-axiom#150327c7c2b2b48f0003fc3b6d03fc0e06b7ba17",
+    "next-axiom": "github:axiomhq/next-axiom#main",
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "swr": "^1.3.0"
@@ -17,4 +17,4 @@
     "eslint": "8.12.0",
     "eslint-config-next": "12.1.4"
   }
-}
+}

examples/logger/pages/_middleware.js

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

examples/logger/pages/api/hello.js

@@ -2,6 +2,6 @@
 import { log } from 'next-axiom'
 
 export default async function handler(req, res) {
-  await log.info('Hello from function', { url: req.url });
+  log.info('Hello from function', { url: req.url });
   res.status(200).json({ name: 'John Doe' })
 }

examples/logger/pages/index.js

@@ -2,15 +2,15 @@ import { log } from 'next-axiom'
 import useSWR from 'swr'
 
 export async function getStaticProps(context) {
-  await log.info('Hello from SSR', { context })
+  log.info('Hello from SSR', { context })
   return {
     props: {},
   }
 }
 
 const fetcher = async (...args) => {
   console.log('Fetching', args)
-  await log.info('Hello from SWR', { args });
+  log.info('Hello from SWR', { args });
   const res = await fetch(...args);
   return await res.json();
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "next-axiom",
   "description": "Send WebVitals from your Next.js project to Axiom.",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "author": "Axiom, Inc.",
   "license": "MIT",
   "contributors": [

src/index.ts

@@ -1,5 +1,5 @@
 import { NextConfig } from 'next';
-import { proxyPath, EndpointType, getIngestURL } from './config';
+import { proxyPath, EndpointType, getIngestURL } from './shared';
 export { reportWebVitals } from './webVitals';
 export { log } from './logger';
 

src/logger.ts

@@ -1,8 +1,11 @@
-import { proxyPath, isBrowser, EndpointType, getIngestURL } from './config';
+import { proxyPath, isBrowser, EndpointType, getIngestURL } from './shared';
+import { debounce } from './shared';
 
 const url = isBrowser ? `${proxyPath}/logs` : getIngestURL(EndpointType.logs);
+const debouncedSendLogs = debounce(sendLogs, 1000);
+let logEvents: any[] = [];
 
-async function _log(level: string, message: string, args: any = {}) {
+function _log(level: string, message: string, args: any = {}) {
   if (!url) {
     console.warn('axiom: NEXT_PUBLIC_AXIOM_INGEST_ENDPOINT is not defined');
     return;
@@ -12,21 +15,42 @@ async function _log(level: string, message: string, args: any = {}) {
   if (Object.keys(args).length > 0) {
     logEvent['fields'] = args;
   }
-  const body = JSON.stringify([logEvent]);
-
-  if (typeof fetch === 'undefined') {
-    const fetch = await require('cross-fetch');
-    await fetch(url, { body, method: 'POST', keepalive: true });
-  } else if (isBrowser && navigator.sendBeacon) {
-    navigator.sendBeacon(url, body);
-  } else {
-    await fetch(url, { body, method: 'POST', keepalive: true });
-  }
+
+  logEvents.push(logEvent);
+  debouncedSendLogs();
 }
 
 export const log = {
-  debug: async (message: string, args: any = {}) => await _log('debug', message, args),
-  info: async (message: string, args: any = {}) => await _log('info', message, args),
-  warn: async (message: string, args: any = {}) => await _log('warn', message, args),
-  error: async (message: string, args: any = {}) => await _log('error', message, args),
+  debug: (message: string, args: any = {}) => _log('debug', message, args),
+  info: (message: string, args: any = {}) => _log('info', message, args),
+  warn: (message: string, args: any = {}) => _log('warn', message, args),
+  error: (message: string, args: any = {}) => _log('error', message, args),
+  flush: async () => {
+    await sendLogs();
+  },
 };
+
+async function sendLogs() {
+  if (!logEvents.length) {
+    return;
+  }
+
+  const method = 'POST';
+  const keepalive = true;
+  const body = JSON.stringify(logEvents);
+  // clear pending logs
+  logEvents = [];
+
+  try {
+    if (typeof fetch === 'undefined') {
+      const fetch = await require('cross-fetch');
+      await fetch(url, { body, method, keepalive });
+    } else if (isBrowser && navigator.sendBeacon) {
+      navigator.sendBeacon(url, body);
+    } else {
+      await fetch(url, { body, method, keepalive });
+    }
+  } catch (e) {
+    console.error(`Failed to send logs to Axiom: ${e}`);
+  }
+}

src/config.ts → src/shared.ts

@@ -12,8 +12,17 @@ export const getIngestURL = (t: EndpointType) => {
   if (!ingestEndpoint) {
     return '';
   }
+
   const url = new URL(ingestEndpoint);
   // attach type query param based on passed EndpointType
   url.searchParams.set('type', t.toString());
   return url.toString();
 };
+
+export const debounce = (fn: Function, ms = 300) => {
+  let timeoutId: ReturnType<typeof setTimeout>;
+  return async function (this: any, ...args: any[]) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(async () => await fn.apply(this, args), ms);
+  };
+};

src/webVitals.ts

@@ -1,18 +1,11 @@
 import { NextWebVitalsMetric } from 'next/app';
-import { isBrowser, proxyPath } from './config';
+import { isBrowser, proxyPath } from './shared';
+import { debounce } from './shared';
 
 export { log } from './logger';
 
 const url = `${proxyPath}/web-vitals`;
 
-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 debouncedSendMetrics = debounce(sendMetrics, 1000);