DX-196; use axiom ingest endpoints

.gitignore

@@ -5,3 +5,4 @@
 /src/*.js.map
 /dist/
 /.vscode
+.envrc

README.md

@@ -17,17 +17,23 @@
 
 For more information check out the [official documentation](https://axiom.co/docs).
 
-## Usage
+## Quickstart
 
-First of all make sure you have the [Axiom Vercel integration](https://www.axiom.co/vercel) 
-installed.
-Then in your Next.js project, run install `next-axiom` like this:
+- If you are using Vercel, make sure you have the [Axiom Vercel integration](https://www.axiom.co/vercel) 
+installed. On other platforms you must create an API token and set those environment variables:
+
+```
+AXIOM_DATASET: the dataset the logs will be ingested into
+AXIOM_TOKEN: the API token you created for ingestion to the dataset
+```
+
+- Then in your Next.js project, run install `next-axiom` like this:
 
 ```sh
 npm install --save next-axiom
 ```
 
-Wrap your Next.js config in `withAxiom` like this in `next.config.js`:
+- Wrap your Next.js config in `withAxiom` like this in `next.config.js`:
 
 ```js
 const { withAxiom } = require('next-axiom')
@@ -37,7 +43,7 @@ module.exports = withAxiom({
 })
 ```
 
-Go to `pages/_app.js` or `pages/_app.ts` and add the following line to report web vitals:
+- Go to `pages/_app.js` or `pages/_app.ts` and add the following line to report web vitals:
 
 ```js
 export { reportWebVitals } from 'next-axiom'

__tests__/genericConfig.vercel.ts

@@ -0,0 +1,14 @@
+process.env.AXIOM_INGEST_ENDPOINT = '';
+process.env.AXIOM_URL = 'https://test.axiom.co';
+process.env.AXIOM_DATASET = 'test';
+
+import config from '../src/config';
+import { EndpointType } from '../src/shared';
+
+test('reading axiom ingest endpoint', () => {
+  let url = config.getIngestURL(EndpointType.webVitals);
+  expect(url).toEqual('https://test.axiom.co/api/v1/datasets/test/ingest');
+
+  url = config.getIngestURL(EndpointType.logs);
+  expect(url).toEqual('https://test.axiom.co/api/v1/datasets/test/ingest');
+});

__tests__/noEnvVars.test.ts

@@ -3,6 +3,9 @@
  */
 
 // clear Axiom env vars
+process.env.AXIOM_URL = '';
+process.env.AXIOM_DATASET = '';
+process.env.AXIOM_TOKEN = '';
 process.env.AXIOM_INGEST_ENDPOINT = '';
 process.env.NEXT_PUBLIC_AXIOM_INGEST_ENDPOINT = '';
 import { NextWebVitalsMetric } from 'next/app';

__tests__/vercelConfig.test.ts

@@ -0,0 +1,13 @@
+process.env.AXIOM_URL = undefined;
+process.env.AXIOM_INGEST_ENDPOINT = 'https://axiom.co/api/v1/integrations/vercel';
+
+import config from '../src/config';
+import { EndpointType } from '../src/shared';
+
+test('reading vercel ingest endpoint', () => {
+  let url = config.getIngestURL(EndpointType.webVitals);
+  expect(url).toEqual('https://axiom.co/api/v1/integrations/vercel?type=web-vitals');
+
+  url = config.getIngestURL(EndpointType.logs);
+  expect(url).toEqual('https://axiom.co/api/v1/integrations/vercel?type=logs');
+});

__tests__/webvitals.test.ts

@@ -4,7 +4,8 @@
 import { jest } from '@jest/globals';
 import { NextWebVitalsMetric } from 'next/app';
 // set axiom env vars before importing webvitals
-process.env.AXIOM_INGEST_ENDPOINT = 'https://example.co/api/test';
+process.env.AXIOM_URL = '';
+process.env.NEXT_PUBLIC_AXIOM_INGEST_ENDPOINT = 'https://example.co/api/test';
 import { reportWebVitals } from '../src/webVitals';
 import 'whatwg-fetch';
 
@@ -37,18 +38,26 @@ test('throttled sendMetrics', async () => {
   jest.advanceTimersByTime(1000);
 
   const url = '/_axiom/web-vitals';
-  const payload = { method: 'POST', keepalive: true };
+  const payload = {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    keepalive: true,
+  };
 
   expect(fetch).toHaveBeenCalledTimes(2);
   expect(fetch).nthCalledWith(1, url, {
     body: JSON.stringify({
       webVitals: [...metricsMatrix[0], ...metricsMatrix[1]],
+      environment: 'test',
     }),
     ...payload,
   });
   expect(fetch).nthCalledWith(2, url, {
     body: JSON.stringify({
       webVitals: metricsMatrix[2],
+      environment: 'test',
     }),
     ...payload,
   });

package.json

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

src/config.ts

@@ -0,0 +1,17 @@
+import GenericConfig from './platform/generic';
+import VercelConfig from './platform/vercel';
+import NetlifyConfig from './platform/netlify';
+
+export const isVercel = process.env.AXIOM_INGEST_ENDPOINT || process.env.NEXT_PUBLIC_AXIOM_INGEST_ENDPOINT;
+export const isNetlify = process.env.NETLIFY == 'true';
+
+// Detect the platform provider, and return the appropriate config
+// fallback to generic config if no provider is detected
+let config = new GenericConfig();
+if (isVercel) {
+  config = new VercelConfig();
+} else if (isNetlify) {
+  config = new NetlifyConfig();
+}
+
+export default config;

src/logger.ts

@@ -1,24 +1,18 @@
-import {
-  proxyPath,
-  isBrowser,
-  EndpointType,
-  getIngestURL,
-  isEnvVarsSet,
-  isNoPrettyPrint,
-  vercelEnv,
-  vercelRegion,
-} from './shared';
-import { throttle } from './shared';
-
-const url = isBrowser ? `${proxyPath}/logs` : getIngestURL(EndpointType.logs);
-
-interface LogEvent {
+import config, { isVercel } from './config';
+import { NetlifyInfo } from './platform/netlify';
+import { isNoPrettyPrint, throttle } from './shared';
+
+const url = config.getLogsEndpoint();
+
+export interface LogEvent {
   level: string;
   message: string;
   fields: {};
   _time: string;
   request?: RequestReport;
-  vercel?: VercelData;
+  platform?: PlatformInfo;
+  vercel?: PlatformInfo;
+  netlify?: NetlifyInfo;
 }
 
 export interface RequestReport {
@@ -33,7 +27,7 @@ export interface RequestReport {
   userAgent?: string | null;
 }
 
-interface VercelData {
+export interface PlatformInfo {
   environment?: string;
   region?: string;
   route?: string;
@@ -84,15 +78,15 @@ export class Logger {
       logEvent.fields = { ...logEvent.fields, args: args };
     }
 
-    logEvent.vercel = {
-      environment: vercelEnv,
-      region: vercelRegion,
-      source: this.source,
-    };
+    config.injectPlatformMetadata(logEvent, this.source);
 
     if (this.req != null) {
       logEvent.request = this.req;
-      logEvent.vercel.route = this.req.path;
+      if (logEvent.platform) {
+        logEvent.platform.route = this.req.path;
+      } else if (logEvent.vercel) {
+        logEvent.vercel.route = this.req.path;
+      }
     }
 
     this.logEvents.push(logEvent);
@@ -115,7 +109,7 @@ export class Logger {
       return;
     }
 
-    if (!isEnvVarsSet) {
+    if (!config.isEnvVarsSet()) {
       // if AXIOM ingesting url is not set, fallback to printing to console
       // to avoid network errors in development environments
       this.logEvents.forEach((ev) => prettyPrint(ev));
@@ -128,15 +122,22 @@ export class Logger {
     const body = JSON.stringify(this.logEvents);
     // clear pending logs
     this.logEvents = [];
+    const headers = {
+      'content-type': 'application/json',
+    };
+    if (config.token) {
+      headers['Authorization'] = `Bearer ${config.token}`;
+    }
+    const reqOptions: RequestInit = { body, method, keepalive, headers };
 
     try {
       if (typeof fetch === 'undefined') {
         const fetch = await require('whatwg-fetch');
-        await fetch(url, { body, method, keepalive });
-      } else if (isBrowser && navigator.sendBeacon) {
+        await fetch(url, reqOptions);
+      } else if (config.isBrowser && isVercel && navigator.sendBeacon) {
         navigator.sendBeacon(url, body);
       } else {
-        await fetch(url, { body, method, keepalive });
+        await fetch(url, reqOptions);
       }
     } catch (e) {
       console.error(`Failed to send logs to Axiom: ${e}`);
@@ -187,7 +188,7 @@ export function prettyPrint(ev: LogEvent) {
   let msgString = '';
   let args: any[] = [ev.level, ev.message];
 
-  if (isBrowser) {
+  if (config.isBrowser) {
     msgString = '%c%s - %s';
     args = [`color: ${levelColors[ev.level].browser};`, ...args];
   } else {

src/platform/base.ts

@@ -0,0 +1,22 @@
+import { NextWebVitalsMetric } from 'next/app';
+import { RequestReport } from '../logger';
+import { EndpointType } from '../shared';
+
+// This is the base class for all platform providers. It contains all the different
+// configrations per provider, and the functions that are used by the logger. Implement
+// this interface to have special behaviour for your platform.
+export default interface Provider {
+  shoudSendEdgeReport: boolean;
+  token: string | undefined;
+  environment: string;
+  region: string | undefined;
+  axiomUrl: string | undefined;
+
+  isEnvVarsSet(): boolean;
+  getIngestURL(t: EndpointType): string;
+  wrapWebVitalsObject(metrics: NextWebVitalsMetric[]): any;
+  injectPlatformMetadata(logEvent: any, source: string): void;
+  generateRequestMeta(req: any): RequestReport;
+  getLogsEndpoint(): string
+  getWebVitalsEndpoint(): string
+}

src/platform/generic.ts

@@ -0,0 +1,69 @@
+import { NextApiRequest } from "next";
+import { LogEvent, RequestReport } from "../logger";
+import { EndpointType } from "../shared";
+import type Provider from "./base";
+
+// This is the generic config class for all platforms that doesn't have a special
+// implementation (e.g: vercel, netlify). All config classes extends this one.
+export default class GenericConfig implements Provider {
+  proxyPath = '/_axiom';
+  isBrowser = typeof window !== 'undefined';
+  shoudSendEdgeReport = false;
+  token = process.env.AXIOM_TOKEN;
+  dataset = process.env.AXIOM_DATASET;
+  environment: string = process.env.NODE_ENV;
+  axiomUrl = process.env.AXIOM_URL || 'https://cloud.axiom.co';
+  region = process.env.REGION || undefined;
+
+  isEnvVarsSet(): boolean {
+    return !!(this.axiomUrl && process.env.AXIOM_DATASET && process.env.AXIOM_TOKEN);
+  }
+
+  getIngestURL(_: EndpointType): string {
+    return `${this.axiomUrl}/api/v1/datasets/${this.dataset}/ingest`;
+  }
+
+  getLogsEndpoint(): string {
+    return this.isBrowser ? `${this.proxyPath}/logs` : this.getIngestURL(EndpointType.logs);
+  }
+
+  getWebVitalsEndpoint(): string {
+    return this.isBrowser ? `${this.proxyPath}/logs` : this.getIngestURL(EndpointType.webVitals);
+  }
+
+  wrapWebVitalsObject(metrics: any[]): any {
+    return metrics.map(m => ({
+        webVital: m,
+        _time: new Date().getTime(),
+        platform: {
+          environment: this.environment,
+          source: 'web-vital',
+        },
+    }))
+  }
+
+  injectPlatformMetadata(logEvent: LogEvent, source: string) {
+    logEvent.platform = {
+      environment: this.environment,
+      region: this.environment,
+      source: source,
+    };
+  }
+
+  generateRequestMeta(req: any): RequestReport {
+    return {
+      startTime: new Date().getTime(),
+      path: req.url!,
+      method: req.method!,
+      host: this.getHeaderOrDefault(req, 'host', ''),
+      userAgent: this.getHeaderOrDefault(req, 'user-agent', ''),
+      scheme: 'https',
+      ip: this.getHeaderOrDefault(req, 'x-forwarded-for', ''),
+      region: this.region,
+    };
+  }
+
+  getHeaderOrDefault(req: NextApiRequest, headerName: string, defaultValue: any) {
+    return req.headers[headerName] ? req.headers[headerName] : defaultValue;
+  }
+}