@crimson-education/browser-logger 4.1.4 → 5.0.0-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crimson-education/browser-logger",
-  "version": "4.1.4",
+  "version": "5.0.0-beta.10",
   "description": "An abstract logger and reporting utility for browser environments",
   "scripts": {
     "prepack": "npm run build",
@@ -28,24 +28,22 @@
   },
   "homepage": "https://github.com/crimson-education/browser-logger#readme",
   "dependencies": {
-    "@datadog/browser-logs": "^4.40.0",
-    "@datadog/browser-rum": "^4.40.0"
+    "@aws-sdk/client-cognito-identity": "^3.844.0",
+    "@aws-sdk/protocol-http": "^3.370.0",
+    "@datadog/browser-logs": "^6.13.0",
+    "@datadog/browser-rum": "^6.13.0",
+    "aws-amplify": "^6.15.3"
   },
   "devDependencies": {
     "@crimson-education/eslint-config": "^2.1.0",
-    "@types/jest": "^27.0.3",
-    "eslint": "^7.20.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^25.3.2",
-    "jest": "^27.4.3",
-    "rimraf": "^3.0.2",
-    "ts-jest": "^27.1.1",
-    "typescript": "^4.1.2"
-  },
-  "peerDependencies": {
-    "@aws-amplify/analytics": ">=5.2.22",
-    "@aws-amplify/auth": ">=4.6.8",
-    "@aws-sdk/client-pinpoint": ">=3.370.0"
+    "@types/jest": "^29.5.12",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jest": "^28.9.0",
+    "jest": "^29.7.0",
+    "rimraf": "^5.0.5",
+    "ts-jest": "^29.1.2",
+    "typescript": "5.1.6"
   },
   "files": [
     "lib",

package/src/reporters/amplifyReporter.ts

@@ -1,8 +1,7 @@
-import { Auth } from '@aws-amplify/auth';
-import { Analytics } from '@aws-amplify/analytics';
-import { Endpoint, FinalizeRequestMiddleware } from '@aws-sdk/types';
-import { HttpRequest } from '@aws-sdk/protocol-http';
-import { PinpointClient, ServiceInputTypes, ServiceOutputTypes } from '@aws-sdk/client-pinpoint';
+import { identifyUser, record } from '@aws-amplify/analytics';
+// import { Endpoint, FinalizeRequestMiddleware } from '@aws-sdk/types';
+// import { HttpRequest } from '@aws-sdk/protocol-http';
+// import { PinpointClient, ServiceInputTypes, ServiceOutputTypes } from '@aws-sdk/client-pinpoint';
 
 import {
   IReporter,
@@ -14,12 +13,142 @@ import {
   ServiceInfo,
 } from '../types';
 import { logger } from '../logger';
+// Note: fetchAuthSession was previously imported but unused; removing to satisfy linter
+import { Amplify } from 'aws-amplify';
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
 type AttributeMap = Record<string, string[] | string | null>;
 
 type AmplifyAutoTrackSource = 'pageView' | 'event' | 'session';
 
+// Auto-tracking implementation for Gen2
+class AmplifyAutoTracker {
+  private config: AmplifyReporterConfig;
+  private allMetadata: AttributeMap;
+  private currentUser: ReportUser | null = null;
+  private sessionStartTime: number = Date.now();
+  private pageViewCount: number = 0;
+  private lastPageUrl: string = window.location.href;
+  private isPageVisible: boolean = !document.hidden;
+
+  constructor(config: AmplifyReporterConfig, allMetadata: AttributeMap) {
+    this.config = config;
+    this.allMetadata = allMetadata;
+    this.setupEventListeners();
+  }
+
+  private setupEventListeners() {
+    // Page visibility tracking
+    document.addEventListener('visibilitychange', () => {
+      this.isPageVisible = !document.hidden;
+      if (this.config.autoTrackSessions) {
+        this.trackSessionState();
+      }
+    });
+
+    // Page view tracking
+    if (this.config.autoTrackPageViews) {
+      this.trackPageView();
+
+      // Track route changes for SPAs
+      let currentUrl = window.location.href;
+      const observer = new MutationObserver(() => {
+        if (window.location.href !== currentUrl) {
+          currentUrl = window.location.href;
+          this.trackPageView();
+        }
+      });
+      observer.observe(document.body, { childList: true, subtree: true });
+    }
+
+    // User interaction tracking
+    if (this.config.autoTrackEvents) {
+      this.setupInteractionTracking();
+    }
+  }
+
+  private trackPageView() {
+    this.pageViewCount++;
+    const pageViewEvent = {
+      message: 'Page View',
+      metadata: {
+        url: window.location.href,
+        title: document.title,
+        referrer: document.referrer,
+        pageViewCount: this.pageViewCount,
+        ...this.getAutoTrackMetadata('pageView'),
+      },
+    };
+
+    record({
+      name: pageViewEvent.message,
+      attributes: asAttributeMap(pageViewEvent.metadata, false) as Record<string, string>,
+    });
+  }
+
+  private trackSessionState() {
+    const sessionDuration = Date.now() - this.sessionStartTime;
+    const sessionEvent = {
+      message: this.isPageVisible ? 'Session Active' : 'Session Inactive',
+      metadata: {
+        sessionDuration,
+        isVisible: this.isPageVisible,
+        ...this.getAutoTrackMetadata('session'),
+      },
+    };
+
+    record({
+      name: sessionEvent.message,
+      attributes: asAttributeMap(sessionEvent.metadata, false) as Record<string, string>,
+    });
+  }
+
+  private setupInteractionTracking() {
+    const selectorPrefix = this.config.selectorPrefix ?? 'data-analytics-';
+
+    document.addEventListener('click', (event) => {
+      const target = event.target as HTMLElement;
+      if (!target) return;
+
+      // Find the closest element with analytics attributes
+      const analyticsElement = target.closest(`[${selectorPrefix}name]`);
+      if (!analyticsElement) return;
+
+      const analyticsName = analyticsElement.getAttribute(`${selectorPrefix}name`);
+      if (!analyticsName) return;
+
+      const interactionEvent = {
+        message: 'User Interaction',
+        metadata: {
+          elementName: analyticsName,
+          elementType: target.tagName.toLowerCase(),
+          elementText: target.textContent?.slice(0, 100),
+          interactionType: 'click',
+          ...this.getAutoTrackMetadata('event'),
+        },
+      };
+
+      record({
+        name: interactionEvent.message,
+        attributes: asAttributeMap(interactionEvent.metadata, false) as Record<string, string>,
+      });
+    });
+  }
+
+  private getAutoTrackMetadata(source: AmplifyAutoTrackSource): Metadata {
+    const { beforeAutoTrack } = this.config;
+    return typeof beforeAutoTrack === 'function' ? (beforeAutoTrack(source) ?? {}) : {};
+  }
+
+  public setUser(user: ReportUser | null) {
+    this.currentUser = user;
+  }
+
+  public updateMetadata(metadata: AttributeMap) {
+    Object.assign(this.allMetadata, metadata);
+  }
+}
+
 export interface AmplifyReporterConfig extends ReporterConfigBase {
   /**
    * AWS Region for Amplify.
@@ -29,7 +158,7 @@ export interface AmplifyReporterConfig extends ReporterConfigBase {
    * The Identity Pool Id to use for reporting, if set to false, Auth.configure is not called.
    * This must be called manually for the reporter to work.
    */
-  identityPoolId: string | false;
+  identityPoolId: string;
   /**
    * The Pinpoint App Id to report to.
    */
@@ -96,19 +225,21 @@ type AmplifyReporterBufferingConfig = {
 };
 
 export function amplifyReporter(info: ServiceInfo, config: AmplifyReporterConfig): IReporter {
-  if (config.identityPoolId !== false) {
-    Auth.configure({
-      region: config.region,
-      identityPoolId: config.identityPoolId,
-      userPoolId: config.userPoolId,
-      userPoolWebClientId: config.userPoolWebClientId,
-    });
-  }
-
-  const wrapAutoTrackMiddleware = (source: AmplifyAutoTrackSource) => {
-    const { beforeAutoTrack } = config;
-    return typeof beforeAutoTrack === 'function' ? () => beforeAutoTrack(source) ?? {} : undefined;
-  };
+  Amplify.configure({
+    Auth: {
+      Cognito: {
+        identityPoolId: config.identityPoolId,
+        allowGuestAccess: true,
+      },
+    },
+    Analytics: {
+      Pinpoint: {
+        appId: config.analyticsAppId,
+        region: config.region,
+        ...config.buffering,
+      },
+    },
+  });
 
   const allMetadata = asAttributeMap({
     appName: info.service,
@@ -118,48 +249,16 @@ export function amplifyReporter(info: ServiceInfo, config: AmplifyReporterConfig
     version: info.version,
   });
 
-  Analytics.configure({
-    region: config.region,
-    appId: config.analyticsAppId,
-    endpoint: {
-      attributes: allMetadata,
-    },
-    ...config.buffering,
-  });
-
-  // Session autotracking is enabled by default for backwards compatibility reasons, so we _must_
-  // call this unconditionally to ensure we opt out of session tracking when `autoTrackSessions` isn't set
-  // See: https://docs.amplify.aws/lib/analytics/autotrack/q/platform/js/#session-tracking
-  Analytics.autoTrack('session', {
-    enable: config.autoTrackSessions === true,
-    attributes: wrapAutoTrackMiddleware('session'),
-  });
-
-  if (config.autoTrackPageViews) {
-    Analytics.autoTrack('pageView', {
-      enable: true,
-      eventName: 'pageView',
-      type: 'SPA',
-      provider: 'AWSPinpoint',
-      attributes: wrapAutoTrackMiddleware('pageView'),
-    });
-  }
-
-  if (config.autoTrackEvents) {
-    Analytics.autoTrack('event', {
-      enable: true,
-      selectorPrefix: config.selectorPrefix ?? 'data-analytics-',
-      attributes: wrapAutoTrackMiddleware('event'),
-    });
-  }
+  // Initialize auto-tracker for Gen2
+  const autoTracker = new AmplifyAutoTracker(config, allMetadata);
 
   if (config.proxyUrl) {
-    installPinpointProxy(new URL(config.proxyUrl));
+    // installPinpointProxy(new URL(config.proxyUrl));
   }
 
   const reporter: IReporter = {
     trackEvent: function (event: ReporterEvent): void {
-      Analytics.record({
+      record({
         name: event.message,
         attributes: asAttributeMap(
           {
@@ -169,8 +268,6 @@ export function amplifyReporter(info: ServiceInfo, config: AmplifyReporterConfig
           false,
         ) as Record<string, string>,
         metrics: event.metrics,
-      }).catch(() => {
-        // Swallow; see: https://crimsonhq.slack.com/archives/G4UN6Q4KF/p1648599302847539
       });
     },
     addBreadcrumb: function (breadcrumb: ReporterBreadcrumb): void {
@@ -184,11 +281,9 @@ export function amplifyReporter(info: ServiceInfo, config: AmplifyReporterConfig
     },
     addMetadata: function (metadata: Metadata): void {
       Object.assign(allMetadata, asAttributeMap(metadata, true));
-      Analytics.updateEndpoint({
-        attributes: allMetadata,
-      }).catch(() => {
-        // Swallow; see: https://crimsonhq.slack.com/archives/G4UN6Q4KF/p1648599302847539
-      });
+      autoTracker.updateMetadata(asAttributeMap(metadata, true));
+      // Note: updateEndpoint is not available in Amplify v7
+      // Metadata updates would need to be handled differently
     },
     setUser: function (user: ReportUser | null): void {
       const userMetadata = user
@@ -197,19 +292,14 @@ export function amplifyReporter(info: ServiceInfo, config: AmplifyReporterConfig
           })
         : {};
       Object.assign(allMetadata, asAttributeMap(userMetadata, true));
-      Analytics.updateEndpoint({
+      autoTracker.setUser(user);
+      // Note: updateEndpoint is not available in Amplify v7
+      // User updates would need to be handled differently
+      identifyUser({
         userId: user?.id ?? '',
-        attributes: allMetadata,
-        userAttributes: user
-          ? asAttributeMap({
-              id: user.id,
-              email: user.email,
-              name: user.name ?? user.email,
-              username: user.username,
-            })
-          : {},
-      }).catch(() => {
-        // Swallow; see: https://crimsonhq.slack.com/archives/G4UN6Q4KF/p1648599302847539
+        userProfile: {
+          email: user?.email,
+        },
       });
     },
     setRouteName: function (routeName: string): void {
@@ -232,8 +322,8 @@ export function asAttributeMap(values: Record<string, unknown>, groupValues = tr
   const checkedEntries = Object.entries(attributeMap).map(([key, value]) => {
     const truncatedKey = key.length > 50 ? `___${key.slice(-47)}` : key;
     const truncatedValue = Array.isArray(value)
-      ? value?.map((val) => val.slice(0, 100)) ?? null
-      : value?.slice(0, 100) ?? null;
+      ? (value?.map((val) => val.slice(0, 100)) ?? null)
+      : (value?.slice(0, 100) ?? null);
 
     return [truncatedKey, truncatedValue];
   });
@@ -264,8 +354,13 @@ export function buildAttributeMap(
   Object.entries(values).forEach(([key, value]) => {
     const combinedKey = parentKey ? [parentKey, key].join('.') : key;
 
-    if (!value) {
-      valuesWithStringArrays[combinedKey] = null;
+    // Only treat undefined or null as empty; avoid converting falsy values like ''/0/false to null
+    if (value === undefined || value === null) {
+      // For event attributes (groupValues === false), Pinpoint rejects null values.
+      // In that case we omit the key entirely to avoid "Event attribute value can not be null".
+      if (groupValues) {
+        valuesWithStringArrays[combinedKey] = null;
+      }
     } else if (groupValues && Array.isArray(value)) {
       valuesWithStringArrays[combinedKey] = value.map((element) =>
         typeof element === 'string' ? element : JSON.stringify(element),
@@ -282,63 +377,63 @@ export function buildAttributeMap(
   return valuesWithStringArrays;
 }
 
-function installPinpointProxy(proxyUrl: URL) {
-  // No public API for overriding where the Pinpoint client sends events to... 🤮
-  // In theory you can pass in an `endpoint` to the Pinpoint client's constructor like any other AWS
-  // client, but Amplify's analytics doesn't expose anything we can use to get an endpoint threaded
-  // down to the Pinpoint client's constructor.
-  //
-  // The Pinpoint client _also_ isn't available synchronously because it is instantiated when events
-  // get sent out, and then reconfigured whenever the API credentials change. We need to hook `_initClients`
-  // to ensure that the Pinpoint client being used is always patched with our custom endpoint.
-  const provider = Analytics.getPluggable('AWSPinpoint') as any;
-  if (!provider || typeof provider._initClients !== 'function') {
-    logger.error(
-      'Installation of the Pinpoint proxy failed. This likely means the internals of the @aws-amplify/analytics package have changed.',
-    );
-    return;
-  }
-
-  const originalInitClients = provider._initClients;
-  const requestMiddleware: FinalizeRequestMiddleware<ServiceInputTypes, ServiceOutputTypes> =
-    (next) => async (args) => {
-      const pinpointClient = provider.pinpointClient as PinpointClient | undefined;
-
-      if (pinpointClient && proxyUrl.pathname !== '/' && HttpRequest.isInstance(args.request)) {
-        // Add proxyUrl.pathname to final request url if it was provided
-        const shouldStripSlash = proxyUrl.pathname.endsWith('/');
-        args.request.path = `${proxyUrl.pathname}${args.request.path.slice(shouldStripSlash ? 1 : 0)}`;
-
-        // Wrap request body so the proxy has signing info
-        if (typeof args.request.body === 'string') {
-          const credentials = await pinpointClient.config.credentials();
-          args.request.body = JSON.stringify({
-            credentials,
-            data: JSON.parse(args.request.body),
-          });
-        }
-      }
-
-      return next(args);
-    };
-
-  provider._initClients = async (credentials: unknown) => {
-    const result = await originalInitClients.call(provider, credentials);
-    const pinpointClient = provider.pinpointClient as PinpointClient | undefined;
-
-    if (pinpointClient) {
-      pinpointClient.config.endpoint = (): Promise<Endpoint> =>
-        Promise.resolve({
-          hostname: proxyUrl.hostname,
-          // Passing proxyUrl.pathname here doesn't work; it gets overridden
-          path: '/',
-          port: undefined,
-          protocol: proxyUrl.protocol,
-        });
-
-      pinpointClient.middlewareStack.remove(requestMiddleware);
-      pinpointClient.middlewareStack.add(requestMiddleware, { step: 'finalizeRequest' });
-    }
-    return result;
-  };
-}
+// function installPinpointProxy(proxyUrl: URL) {
+//   // No public API for overriding where the Pinpoint client sends events to... 🤮
+//   // In theory you can pass in an `endpoint` to the Pinpoint client's constructor like any other AWS
+//   // client, but Amplify's analytics doesn't expose anything we can use to get an endpoint threaded
+//   // down to the Pinpoint client's constructor.
+//   //
+//   // The Pinpoint client _also_ isn't available synchronously because it is instantiated when events
+//   // get sent out, and then reconfigured whenever the API credentials change. We need to hook `_initClients`
+//   // to ensure that the Pinpoint client being used is always patched with our custom endpoint.
+//   const provider = (globalThis as any).Analytics?.getPluggable?.('AWSPinpoint') as any;
+//   if (!provider || typeof provider._initClients !== 'function') {
+//     logger.error(
+//       'Installation of the Pinpoint proxy failed. This likely means the internals of the @aws-amplify/analytics package have changed.',
+//     );
+//     return;
+//   }
+
+//   const originalInitClients = provider._initClients;
+//   const requestMiddleware: FinalizeRequestMiddleware<ServiceInputTypes, ServiceOutputTypes> =
+//     (next) => async (args) => {
+//       const pinpointClient = provider.pinpointClient as PinpointClient | undefined;
+
+//       if (pinpointClient && proxyUrl.pathname !== '/' && HttpRequest.isInstance(args.request)) {
+//         // Add proxyUrl.pathname to final request url if it was provided
+//         const shouldStripSlash = proxyUrl.pathname.endsWith('/');
+//         args.request.path = `${proxyUrl.pathname}${args.request.path.slice(shouldStripSlash ? 1 : 0)}`;
+
+//         // Wrap request body so the proxy has signing info
+//         if (typeof args.request.body === 'string') {
+//           const credentials = await pinpointClient.config.credentials();
+//           args.request.body = JSON.stringify({
+//             credentials,
+//             data: JSON.parse(args.request.body),
+//           });
+//         }
+//       }
+
+//       return next(args);
+//     };
+
+//   provider._initClients = async (credentials: unknown) => {
+//     const result = await originalInitClients.call(provider, credentials);
+//     const pinpointClient = provider.pinpointClient as PinpointClient | undefined;
+
+//     if (pinpointClient) {
+//       pinpointClient.config.endpoint = (): Promise<Endpoint> =>
+//         Promise.resolve({
+//           hostname: proxyUrl.hostname,
+//           // Passing proxyUrl.pathname here doesn't work; it gets overridden
+//           path: '/',
+//           port: undefined,
+//           protocol: proxyUrl.protocol,
+//         });
+
+//       pinpointClient.middlewareStack.remove(requestMiddleware);
+//       pinpointClient.middlewareStack.add(requestMiddleware, { step: 'finalizeRequest' });
+//     }
+//     return result;
+//   };
+// }