Merge pull request #12 from axiomhq/avoid-logging-network-errors

fix: avoid network errors if envVars are not set

__tests__/log.test.ts

@@ -1,6 +1,8 @@
 /**
  * @jest-environment jsdom
  */
+// set axiom env vars before importing logger
+process.env.AXIOM_INGEST_ENDPOINT = 'https://example.co/api/test';
 import { log } from '../src/logger';
 
 global.fetch = jest.fn() as jest.Mock;

__tests__/noEnvVars.test.ts

@@ -0,0 +1,27 @@
+/**
+ * @jest-environment jsdom
+ */
+
+// clear Axiom env vars
+process.env.AXIOM_INGEST_ENDPOINT = '';
+process.env.NEXT_PUBLIC_AXIOM_INGEST_ENDPOINT = '';
+import { NextWebVitalsMetric } from 'next/app';
+import { log } from '../src/logger';
+import { reportWebVitals } from '../src/webVitals';
+
+global.fetch = jest.fn() as jest.Mock;
+const mockedLog = jest.spyOn(global.console, 'log').mockImplementation();
+
+test('sending logs on localhost should fallback to console', () => {
+  log.info('hello, world!');
+  jest.advanceTimersByTime(1000);
+  expect(fetch).toHaveBeenCalledTimes(0);
+  expect(mockedLog).toHaveBeenCalledTimes(1);
+});
+
+test('webVitals should not be sent when envVars are not set', () => {
+  const metric: NextWebVitalsMetric = { id: '1', startTime: 1234, value: 1, name: 'FCP', label: 'web-vital' };
+  reportWebVitals(metric);
+  jest.advanceTimersByTime(1000);
+  expect(fetch).toHaveBeenCalledTimes(0);
+});

__tests__/webvitals.test.ts

@@ -1,9 +1,10 @@
 /**
  * @jest-environment jsdom
  */
-
 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';
 import { reportWebVitals } from '../src/webVitals';
 
 global.fetch = jest.fn() as jest.Mock;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "next-axiom",
   "description": "Send WebVitals from your Next.js project to Axiom.",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "author": "Axiom, Inc.",
   "license": "MIT",
   "contributors": [
@@ -51,4 +51,4 @@
   "dependencies": {
     "cross-fetch": "^3.1.5"
   }
-}
+}

src/index.ts

@@ -12,6 +12,11 @@ export function withAxiom(nextConfig: NextConfig): NextConfig {
       const webVitalsEndpoint = getIngestURL(EndpointType.webVitals);
       const logsEndpoint = getIngestURL(EndpointType.logs);
       if (!webVitalsEndpoint && !logsEndpoint) {
+        console.warn(
+          'axiom - Envvars not detected. If this is production please see https://github.com/axiomhq/next-axiom for help'
+        );
+        console.warn('axiom - Sending Web Vitals to /dev/null');
+        console.warn('axiom - Sending logs to console');
         return rewrites || []; // nothing to do
       }
 

src/logger.ts

@@ -1,13 +1,19 @@
-import { proxyPath, isBrowser, EndpointType, getIngestURL } from './shared';
+import { proxyPath, isBrowser, EndpointType, getIngestURL, isEnvVarsSet } from './shared';
 import { throttle } from './shared';
 
 const url = isBrowser ? `${proxyPath}/logs` : getIngestURL(EndpointType.logs);
 const throttledSendLogs = throttle(sendLogs, 1000);
 let logEvents: any[] = [];
 
 function _log(level: string, message: string, args: any = {}) {
-  if (!url) {
-    console.warn('axiom: NEXT_PUBLIC_AXIOM_INGEST_ENDPOINT is not defined');
+  if (!isEnvVarsSet) {
+    // if AXIOM ingesting url is not set, fallback to printing to console
+    // to avoid network errors in development environments
+    let fields = '';
+    if (Object.keys(args).length) {
+      fields = args;
+    }
+    console.log(`${level} - ${message}`, fields);
     return;
   }
 

src/shared.ts

@@ -1,6 +1,7 @@
 export const proxyPath = '/_axiom';
 
 export const isBrowser = typeof window !== 'undefined';
+export const isEnvVarsSet = process.env.AXIOM_INGEST_ENDPOINT || process.env.NEXT_PUBLIC_AXIOM_INGEST_ENDPOINT;
 
 export enum EndpointType {
   webVitals = 'web-vitals',

src/webVitals.ts

@@ -1,6 +1,5 @@
 import { NextWebVitalsMetric } from 'next/app';
-import { isBrowser, proxyPath } from './shared';
-import { throttle } from './shared';
+import { isBrowser, proxyPath, isEnvVarsSet, throttle } from './shared';
 
 export { log } from './logger';
 
@@ -13,6 +12,11 @@ let collectedMetrics: WebVitalsMetric[] = [];
 
 export function reportWebVitals(metric: NextWebVitalsMetric) {
   collectedMetrics.push({ route: window.__NEXT_DATA__?.page, ...metric });
+  // if Axiom env vars are not set, do nothing,
+  // otherwise devs will get errors on dev environments
+  if (!isEnvVarsSet) {
+    return;
+  }
   throttledSendMetrics();
 }