EventsSDK: Add debug mode

docs/analytics.analyticsconfig.debug.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/analytics](./analytics.md) &gt; [AnalyticsConfig](./analytics.analyticsconfig.md) &gt; [debug](./analytics.analyticsconfig.debug.md)
+
+## AnalyticsConfig.debug property
+
+Used to enable debug mode, which is false by default. When enabled the SDK will not send requests to the Events API, but will log the request with other useful debug information instead.
+
+**Signature:**
+
+```typescript
+debug?: boolean;
+```

docs/analytics.analyticsconfig.md

@@ -18,6 +18,7 @@ export interface AnalyticsConfig
 |  --- | --- | --- | --- |
 |  [authorization](./analytics.analyticsconfig.authorization.md) |  | string | The API Key, OAuth, or bearer token for accessing the Analytics Events API. |
 |  [authorizationType](./analytics.analyticsconfig.authorizationtype.md) |  | 'apiKey' \| 'bearer' | Used for specifying if an API Key or Bearer Token is used for the authorization property. |
+|  [debug?](./analytics.analyticsconfig.debug.md) |  | boolean | _(Optional)_ Used to enable debug mode, which is false by default. When enabled the SDK will not send requests to the Events API, but will log the request with other useful debug information instead. |
 |  [env?](./analytics.analyticsconfig.env.md) |  | [Environment](./analytics.environment.md) | _(Optional)_ The Yext environment to send requests to. Defaults to 'PRODUCTION'. |
 |  [forceFetch?](./analytics.analyticsconfig.forcefetch.md) |  | boolean | _(Optional)_ Used to force sending the request with fetch even if the browser does not support fetch with the keepalive flag (like Firefox). If the browser does support it, fetch is used by default. |
 |  [region?](./analytics.analyticsconfig.region.md) |  | [Region](./analytics.region.md) | _(Optional)_ The region to send requests to. Defaults to 'US'. |

etc/analytics.api.md

@@ -14,6 +14,7 @@ export function analytics(config: AnalyticsConfig): AnalyticsEventService;
 export interface AnalyticsConfig {
     authorization: string;
     authorizationType: 'apiKey' | 'bearer';
+    debug?: boolean;
     env?: Environment;
     forceFetch?: boolean;
     region?: Region;

src/AnalyticsConfig.ts

@@ -28,4 +28,11 @@ export interface AnalyticsConfig {
    * does not support fetch with the keepalive flag (like Firefox).
    * If the browser does support it, fetch is used by default. */
   forceFetch?: boolean;
+
+  /**
+   * Used to enable debug mode, which is false by default.
+   * When enabled the SDK will not send requests to the Events API, but will log the request
+   * with other useful debug information instead.
+   */
+  debug?: boolean;
 }

src/AnalyticsEventReporter.ts

@@ -34,10 +34,27 @@ export class AnalyticsEventReporter implements AnalyticsEventService {
   with(payload: EventPayload): AnalyticsEventService {
     const currentPayload =
       this.payload === undefined ? payload : merge(this.payload, payload);
+    if (this.config.debug) {
+      console.log('[DEBUG] AnalyticsConfig Object:\n', this.config);
+      console.log(
+        '[DEBUG] Payload following call to `with`:\n',
+        currentPayload
+      );
+    }
     return new AnalyticsEventReporter(this.config, currentPayload);
   }
 
   public async report(newPayload?: EventPayload): Promise<string> {
+    if (this.config.debug) {
+      console.log(
+        '[DEBUG] Merging the following payloads:\n' +
+          '\nOriginal Payload from call to `with`:\n' +
+          `\n${this.payload ? JSON.stringify(this.payload) : '{}'}\n` +
+          '\nNew Payload from call to `report:`\n' +
+          `\n${newPayload ? JSON.stringify(newPayload) : '{}'}\n`
+      );
+    }
+
     const finalPayload: EventPayload = merge(
       this.payload ?? {},
       newPayload ?? {}
@@ -66,6 +83,20 @@ export class AnalyticsEventReporter implements AnalyticsEventService {
     const shouldUseBeacon = useBeacon(finalPayload, this.config.forceFetch);
     const requestUrl = setupRequestUrl(this.config.env, this.config.region);
 
+    if (this.config.debug) {
+      console.log(
+        '[DEBUG] The following Payload would be sent to the Yext Events API using ' +
+          (shouldUseBeacon ? 'Beacon. ' : 'fetch(). ') +
+          'Session Tracking is ' +
+          (this.config.sessionTrackingEnabled ? 'enabled.\n' : 'disabled.\n') +
+          'Request URL: ' +
+          requestUrl +
+          '\n' +
+          'To send the event to the Yext Events API, disable the debug flag in your AnalyticsConfig.\n',
+        finalPayload
+      );
+    }
+
     // If useBeacon returns true, return boolean response of postWithBeacon as string.
     if (shouldUseBeacon) {
       return new Promise((resolve, reject) => {

test-site/src/index.ts

@@ -11,7 +11,9 @@ import { analytics } from '@yext/analytics';
 const analyticsProvider = analytics({
   authorizationType: 'apiKey',
   authorization: process.env.YEXT_API_KEY,
-  sessionTrackingEnabled: false
+  env: 'SANDBOX',
+  sessionTrackingEnabled: true,
+  debug: true
 }).with({
   action: 'CHAT_LINK_CLICK',
   pageUrl: 'http://www.yext-test-pageurl.com',