@crimson-education/browser-logger 5.0.1-beta.2 → 5.0.1-beta.4

package/src/reporters/amplifyReporter.ts

@@ -1,7 +1,8 @@
-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 { 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 {
   IReporter,
@@ -13,164 +14,12 @@ import {
   ServiceInfo,
 } from '../types';
 import { logger } from '../logger';
-// Note: fetchAuthSession was previously imported but unused; removing to satisfy linter
-import { Amplify } from '@aws-amplify/core';
 
 /* 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) {
-      // Delay initial page view to ensure Amplify is fully configured
-      // Using setTimeout(0) to defer to the next event loop tick
-      setTimeout(() => {
-        this.trackPageView();
-      }, 0);
-
-      // 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(
-        {
-          ...this.allMetadata,
-          ...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(
-        {
-          ...this.allMetadata,
-          ...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(
-          {
-            ...this.allMetadata,
-            ...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.
@@ -180,7 +29,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;
+  identityPoolId: string | false;
   /**
    * The Pinpoint App Id to report to.
    */
@@ -247,21 +96,19 @@ type AmplifyReporterBufferingConfig = {
 };
 
 export function amplifyReporter(info: ServiceInfo, config: AmplifyReporterConfig): IReporter {
-  Amplify.configure({
-    Auth: {
-      Cognito: {
-        identityPoolId: config.identityPoolId,
-        allowGuestAccess: true,
-      },
-    },
-    Analytics: {
-      Pinpoint: {
-        appId: config.analyticsAppId,
-        region: config.region,
-        ...config.buffering,
-      },
-    },
-  });
+  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;
+  };
 
   const allMetadata = asAttributeMap({
     appName: info.service,
@@ -271,26 +118,59 @@ export function amplifyReporter(info: ServiceInfo, config: AmplifyReporterConfig
     version: info.version,
   });
 
-  // Initialize auto-tracker for Gen2
-  const autoTracker = new AmplifyAutoTracker(config, allMetadata);
+  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'),
+    });
+  }
 
   if (config.proxyUrl) {
-    // installPinpointProxy(new URL(config.proxyUrl));
+    installPinpointProxy(new URL(config.proxyUrl));
   }
 
   const reporter: IReporter = {
     trackEvent: function (event: ReporterEvent): void {
-      record({
+      Analytics.record({
         name: event.message,
         attributes: asAttributeMap(
           {
-            ...allMetadata,
             ...event.metadata,
             ...event.tags,
           },
           false,
         ) as Record<string, string>,
         metrics: event.metrics,
+      }).catch(() => {
+        // Swallow; see: https://crimsonhq.slack.com/archives/G4UN6Q4KF/p1648599302847539
       });
     },
     addBreadcrumb: function (breadcrumb: ReporterBreadcrumb): void {
@@ -304,9 +184,11 @@ export function amplifyReporter(info: ServiceInfo, config: AmplifyReporterConfig
     },
     addMetadata: function (metadata: Metadata): void {
       Object.assign(allMetadata, asAttributeMap(metadata, true));
-      autoTracker.updateMetadata(asAttributeMap(metadata, true));
-      // Note: updateEndpoint is not available in Amplify v7
-      // Metadata updates would need to be handled differently
+      Analytics.updateEndpoint({
+        attributes: allMetadata,
+      }).catch(() => {
+        // Swallow; see: https://crimsonhq.slack.com/archives/G4UN6Q4KF/p1648599302847539
+      });
     },
     setUser: function (user: ReportUser | null): void {
       const userMetadata = user
@@ -315,21 +197,20 @@ export function amplifyReporter(info: ServiceInfo, config: AmplifyReporterConfig
           })
         : {};
       Object.assign(allMetadata, asAttributeMap(userMetadata, true));
-      autoTracker.setUser(user);
-      // Only call identifyUser when we have a valid user ID
-      // Calling with empty string can cause issues with Pinpoint USER_ID
-      if (user?.id) {
-        identifyUser({
-          userId: user.id,
-          userProfile: {
-            email: user.email,
-          },
-        }).catch((error) => {
-          // Credentials may not be ready yet, log warning and continue
-          // The userId is still stored in allMetadata for event tracking
-          logger.warn('Failed to identify user in Pinpoint', { error });
-        });
-      }
+      Analytics.updateEndpoint({
+        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
+      });
     },
     setRouteName: function (routeName: string): void {
       reporter.addMetadata({ routeName });
@@ -351,8 +232,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];
   });
@@ -383,13 +264,8 @@ export function buildAttributeMap(
   Object.entries(values).forEach(([key, value]) => {
     const combinedKey = parentKey ? [parentKey, key].join('.') : key;
 
-    // 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;
-      }
+    if (!value) {
+      valuesWithStringArrays[combinedKey] = null;
     } else if (groupValues && Array.isArray(value)) {
       valuesWithStringArrays[combinedKey] = value.map((element) =>
         typeof element === 'string' ? element : JSON.stringify(element),
@@ -406,63 +282,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 = (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;
-//   };
-// }
+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;
+  };
+}