Poc/telemetry3 (#4601)

* feat(core): introduce `getWidgetUiState` lifecycle hook (1/n) (#4454) This deprecates `getWidgetState` to `getWidgetUiState` to make the upcoming `getWidgetRenderState` less confusing. * feat(core): introduce `getWidgetRenderState` (2/n) (#4457) This introduces the widget lifecycle hook `getWidgetRenderState` and implements it for `connectSearchBox`. * feat(autocomplete): implement `getWidgetRenderState` (#4466) * feat(breadcrumb): implement `getWidgetRenderState` (#4467) * feat(clearRefinements): implement `getWidgetRenderState` (#4468) * feat(configure): implement `getWidgetRenderState` (#4469) * feat(currentRefinements): implement `getWidgetRenderState` (#4470) * fix(breadcrumb): add attribute to render state (#4472) * feat(hierarchicalMenu): implement `getWidgetRenderState` (#4471) * fix: provide both `getWidgetRenderState` and `getRenderState` in connectors (#4518) * WIP * remove temporary implementation * rename getWidgetRenderState to getRenderState * fix wrong parameter name * update panel * update comment * chore: remove panel-related code * fixing types WIP * fix type * do not cast the return of getWidgetRenderState * Revert "do not cast the return of getWidgetRenderState" This reverts commit 614bc53. * Revert "fix type" This reverts commit 54e31fc. * add TWidgetRenderState to connector * add generics to Widget for getWidgetRenderState * fix to allow nullish getWidgetRenderState when unknown * remove exclamation marks * remove the type for widgetParams (was experimental) * make getRenderState optional for widgets with default generics * update other connectors to follow new connector type * update types in tests * add comment * do not declare individual widget render state types * feat(hits): implement `getWidgetRenderState` (#4525) * feat(range): implement `getRenderState` and `getWidgetRenderState` (#4536) * fix(types): fix type errors (#4537) * fix type errors * fix type errors * simplify test util * update type of widgetParams * add lifecycle methods * fixing breadcrumb widget * revert the change (let's do this in later iteration) * add lifecycle methods for places widget * replace WidgetFactory with Factory * remove unnecessary part * rename options to params * Revert "remove unnecessary part" This reverts commit 5b2ed14. * Revert "replace WidgetFactory with Factory" This reverts commit ee125bd. * fix getRenderState of places and analytics * feat(poweredBy): getWidgetRenderState (#4551) * feat(poweredBy): getWidgetRenderState DX-206 * fix jsdoc * feat(menu): implement `getRenderState` and `getWidgetRenderState` (#4540) * feat(menu): implement `getRenderState` and `getWidgetRenderState` * Removed duplicated declaration of `jsHelper`, moved `cachedToggleShowMore` binding to `init` to avoid it happens more than once * feat(renderState): add connectNumericMenu (#4550) * feat(renderState): add connectNumericMenu DX-204 * Apply suggestions from code review Co-authored-by: Yannick Croissant <[email protected]> * Apply suggestions from code review Co-authored-by: Yannick Croissant <[email protected]> * POC: Add telemetry * Update src/widgets/configure-related-items/configure-related-items.ts Co-authored-by: Haroen Viaene <[email protected]> * Use full Schema * POC: Add telemetry 2 * Use middleware * move code a little * chore: fix type of middleware TODO: make sure this stays on rebase Co-authored-by: François Chalifour <[email protected]> Co-authored-by: Eunjae Lee <[email protected]> Co-authored-by: Yannick Croissant <[email protected]> Co-authored-by: Clément Vannicatte <[email protected]> Co-authored-by: Yannick Croissant <[email protected]>
algolia · Dec 9, 2020 · 70ea711 · 70ea711
1 parent 539df82
commit 70ea711
Show file tree

Hide file tree

Showing 34 changed files with 421 additions and 238 deletions.
diff --git a/src/lib/InstantSearch.ts b/src/lib/InstantSearch.ts
@@ -26,6 +26,7 @@ import {
   RouterProps,
 } from '../middlewares/createRouterMiddleware';
 import { InsightsEvent } from '../middlewares/createInsightsMiddleware';
+import { createTelemetryMiddleware } from '../middlewares/createTelemetryMiddleware';
 
 const withUsage = createDocumentationMessageGenerator({
   name: 'instantsearch',
@@ -218,7 +219,6 @@ See ${createDocumentationLink({
 
     this.client = searchClient;
     this.insightsClient = insightsClient;
-
     this.indexName = indexName;
     this.helper = null;
     this.mainHelper = null;
@@ -250,6 +250,8 @@ See ${createDocumentationLink({
       const routerOptions = typeof routing === 'boolean' ? undefined : routing;
       this.use(createRouterMiddleware(routerOptions));
     }
+
+    this.use(createTelemetryMiddleware());
   }
 
   /**

diff --git a/src/middlewares/createTelemetryMiddleware.ts b/src/middlewares/createTelemetryMiddleware.ts
@@ -0,0 +1,83 @@
+import { Widget, Middleware } from '../types';
+import { resolveScopedResultsFromIndex } from '../widgets/index/index';
+
+type TelemetryWidget = {
+  type: string;
+  params: string[];
+  officialWidget: boolean;
+};
+
+const ALGOLIA_CRAWLER_USER_AGENT = /Algolia Crawler\/[0-9]+.[0-9]+.[0-9]+/;
+
+export const createTelemetryMiddleware = (): Middleware => {
+  const isTelemetryEnabled =
+    typeof window !== undefined &&
+    ALGOLIA_CRAWLER_USER_AGENT.test(window.navigator.userAgent);
+
+  if (!isTelemetryEnabled) {
+    return () => ({
+      onStateChange() {},
+      subscribe() {},
+      unsubscribe() {},
+    });
+  }
+
+  const payload: { widgets: TelemetryWidget[] } = {
+    widgets: [],
+  };
+
+  const payloadContainer = document.createElement('meta');
+  const refNode = document.querySelector('head');
+  payloadContainer.name = 'instantsearch:widgets';
+  refNode!.appendChild(payloadContainer);
+
+  return ({ instantSearchInstance }) => {
+    return {
+      onStateChange() {},
+      subscribe() {
+        setTimeout(() => {
+          const widgets: Array<Widget<{
+            renderState: any;
+          }>> = instantSearchInstance.mainIndex.getWidgets();
+
+          const parent = instantSearchInstance.mainIndex;
+
+          const initOptions = {
+            instantSearchInstance,
+            parent,
+            results: parent.getResults()!,
+            scopedResults: resolveScopedResultsFromIndex(parent),
+            state: parent.getResults()!._state,
+            helper: parent.getHelper()!,
+            // @TODO: https://github.com/algolia/instantsearch.js/pull/4603
+            // createURL: parent.createURL,
+            uiState: instantSearchInstance._initialUiState,
+            renderState: instantSearchInstance.renderState,
+            templatesConfig: instantSearchInstance.templatesConfig,
+            searchMetadata: {
+              isSearchStalled: instantSearchInstance._isSearchStalled,
+            },
+          };
+
+          widgets.forEach(widget => {
+            payload.widgets.push({
+              type: widget.$$type || 'custom.widget',
+              params: widget.getWidgetRenderState
+                ? Object.keys(
+                    widget.getWidgetRenderState(initOptions).widgetParams
+                  )
+                : [],
+              officialWidget: Boolean(widget.$$officialWidget),
+            });
+          });
+
+          payloadContainer.content = JSON.stringify(payload);
+        }, 0);
+      },
+
+      unsubscribe() {
+        payloadContainer.parentNode!.removeChild(payloadContainer);
+      },
+    };
+  };
+};
diff --git a/src/middlewares/index.ts b/src/middlewares/index.ts
@@ -1,2 +1,3 @@
 export * from './createInsightsMiddleware';
 export * from './createRouterMiddleware';
+export * from './createTelemetryMiddleware';
diff --git a/src/types/widget.ts b/src/types/widget.ts
@@ -363,7 +363,11 @@ export type WidgetRenderState<
 export type Widget<
   TWidgetOptions extends { renderState: unknown } = { renderState: unknown }
 > = {
+  /**
+   * identifier for official widgets
+   */
   $$type?:
+    | 'ais.analytics'
     | 'ais.autocomplete'
     | 'ais.breadcrumb'
     | 'ais.clearRefinements'
@@ -394,6 +398,12 @@ export type Widget<
     | 'ais.stats'
     | 'ais.toggleRefinement'
     | 'ais.voiceSearch';
+
+  /**
+   * private marker on widgets to differentiate a widget from a connector
+   */
+  $$officialWidget?: boolean;
+
   /**
    * Called once before the first search
    */

diff --git a/src/widgets/analytics/analytics.ts b/src/widgets/analytics/analytics.ts
@@ -224,6 +224,9 @@ For the migration, visit https://www.algolia.com/doc/guides/building-search-ui/u
   };
 
   return {
+    $$type: 'ais.analytics',
+    $$officialWidget: true,
+
     init() {
       if (triggerOnUIInteraction === true) {
         document.addEventListener('click', onClick);

diff --git a/src/widgets/breadcrumb/breadcrumb.tsx b/src/widgets/breadcrumb/breadcrumb.tsx
@@ -165,7 +165,10 @@ const breadcrumb: BreadcrumbWidget = function breadcrumb(widgetOptions) {
     render(null, containerNode)
   );
 
-  return makeBreadcrumb({ attributes, separator, rootPath, transformItems });
+  return {
+    ...makeBreadcrumb({ attributes, separator, rootPath, transformItems }),
+    $$officialWidget: true,
+  };
 };
 
 export default breadcrumb;
diff --git a/src/widgets/clear-refinements/clear-refinements.tsx b/src/widgets/clear-refinements/clear-refinements.tsx
@@ -128,11 +128,14 @@ const clearRefinements: ClearRefinementsWidget = widgetOptions => {
     render(null, containerNode)
   );
 
-  return makeWidget({
-    includedAttributes,
-    excludedAttributes,
-    transformItems,
-  });
+  return {
+    ...makeWidget({
+      includedAttributes,
+      excludedAttributes,
+      transformItems,
+    }),
+    $$officialWidget: true,
+  };
 };
 
 export default clearRefinements;
diff --git a/src/widgets/configure-related-items/configure-related-items.ts b/src/widgets/configure-related-items/configure-related-items.ts
@@ -19,7 +19,10 @@ const configureRelatedItems: ConfigureRelatedItemsWidget = function configureRel
 ) {
   const makeWidget = connectConfigureRelatedItems(noop);
 
-  return makeWidget(widgetParams);
+  return {
+    ...makeWidget(widgetParams),
+    $$officialWidget: true,
+  };
 };
 
 export default configureRelatedItems;
diff --git a/src/widgets/configure/configure.ts b/src/widgets/configure/configure.ts
@@ -26,7 +26,10 @@ const configure: ConfigureWidget = function configure(widgetParams) {
   // noop render and unmount functions.
   const makeWidget = connectConfigure(noop);
 
-  return makeWidget({ searchParameters: widgetParams });
+  return {
+    ...makeWidget({ searchParameters: widgetParams }),
+    $$officialWidget: true,
+  };
 };
 
 export default configure;
diff --git a/src/widgets/current-refinements/current-refinements.tsx b/src/widgets/current-refinements/current-refinements.tsx
@@ -121,13 +121,16 @@ const currentRefinements: CurrentRefinementsWidget = function currentRefinements
     () => render(null, containerNode)
   );
 
-  return makeWidget({
-    container: containerNode,
-    cssClasses,
-    includedAttributes,
-    excludedAttributes,
-    transformItems,
-  });
+  return {
+    ...makeWidget({
+      container: containerNode,
+      cssClasses,
+      includedAttributes,
+      excludedAttributes,
+      transformItems,
+    }),
+    $$officialWidget: true,
+  };
 };
 
 export default currentRefinements;
diff --git a/src/widgets/geo-search/geo-search.js b/src/widgets/geo-search/geo-search.js
@@ -212,21 +212,24 @@ const geoSearch = ({
     render(null, containerNode)
   );
 
-  return makeGeoSearch({
-    ...widgetParams,
-    renderState: {},
-    container: containerNode,
-    googleReference,
-    initialZoom,
-    initialPosition,
-    templates,
-    cssClasses,
-    createMarker,
-    markerOptions,
-    enableRefine,
-    enableClearMapRefinement,
-    enableRefineControl,
-  });
+  return {
+    ...makeGeoSearch({
+      ...widgetParams,
+      renderState: {},
+      container: containerNode,
+      googleReference,
+      initialZoom,
+      initialPosition,
+      templates,
+      cssClasses,
+      createMarker,
+      markerOptions,
+      enableRefine,
+      enableClearMapRefinement,
+      enableRefineControl,
+    }),
+    $$officialWidget: true,
+  };
 };
 
 export default geoSearch;
diff --git a/src/widgets/hierarchical-menu/hierarchical-menu.js b/src/widgets/hierarchical-menu/hierarchical-menu.js
@@ -162,7 +162,7 @@ const renderer = ({
  * @type {WidgetFactory}
  * @devNovel HierarchicalMenu
  * @category filter
- * @param {HierarchicalMenuWidgetOptions} $0 The HierarchicalMenu widget options.
+ * @param {HierarchicalMenuWidgetOptions} widgetOptions The HierarchicalMenu widget options.
  * @return {Widget} A new HierarchicalMenu widget instance.
  * @example
  * search.addWidgets([
@@ -172,20 +172,22 @@ const renderer = ({
  *   })
  * ]);
  */
-export default function hierarchicalMenu({
-  container,
-  attributes,
-  separator,
-  rootPath,
-  showParentLevel,
-  limit,
-  showMore = false,
-  showMoreLimit,
-  sortBy,
-  transformItems,
-  templates = defaultTemplates,
-  cssClasses: userCssClasses = {},
-} = {}) {
+export default function hierarchicalMenu(widgetOptions) {
+  const {
+    container,
+    attributes,
+    separator,
+    rootPath,
+    showParentLevel,
+    limit,
+    showMore = false,
+    showMoreLimit,
+    sortBy,
+    transformItems,
+    templates = defaultTemplates,
+    cssClasses: userCssClasses = {},
+  } = widgetOptions || {};
+
   if (!container) {
     throw new Error(withUsage('The `container` option is required.'));
   }
@@ -235,15 +237,18 @@ export default function hierarchicalMenu({
     () => render(null, containerNode)
   );
 
-  return makeHierarchicalMenu({
-    attributes,
-    separator,
-    rootPath,
-    showParentLevel,
-    limit,
-    showMore,
-    showMoreLimit,
-    sortBy,
-    transformItems,
-  });
+  return {
+    ...makeHierarchicalMenu({
+      attributes,
+      separator,
+      rootPath,
+      showParentLevel,
+      limit,
+      showMore,
+      showMoreLimit,
+      sortBy,
+      transformItems,
+    }),
+    $$officialWidget: true,
+  };
 }
diff --git a/src/widgets/hits-per-page/hits-per-page.tsx b/src/widgets/hits-per-page/hits-per-page.tsx
@@ -102,7 +102,10 @@ const hitsPerPage: HitsPerPageWidget = function hitsPerPage(widgetOptions) {
     render(null, containerNode)
   );
 
-  return makeHitsPerPage({ items, transformItems });
+  return {
+    ...makeHitsPerPage({ items, transformItems }),
+    $$officialWidget: true,
+  };
 };
 
 export default hitsPerPage;
diff --git a/src/widgets/hits/hits.tsx b/src/widgets/hits/hits.tsx
@@ -161,7 +161,10 @@ const hits: HitsWidget = function hits(widgetOptions) {
     render(null, containerNode)
   );
 
-  return makeHits({ escapeHTML, transformItems });
+  return {
+    ...makeHits({ escapeHTML, transformItems }),
+    $$officialWidget: true,
+  };
 };
 
 export default hits;
diff --git a/src/widgets/index/index.ts b/src/widgets/index/index.ts
@@ -174,7 +174,7 @@ function resolveScopedResultsFromWidgets(widgets: Widget[]): ScopedResult[] {
   }, []);
 }
 
-function resolveScopedResultsFromIndex(widget: Index): ScopedResult[] {
+export function resolveScopedResultsFromIndex(widget: Index): ScopedResult[] {
   const widgetParent = widget.getParent();
   // If the widget is the root, we consider itself as the only sibling.
   const widgetSiblings = widgetParent ? widgetParent.getWidgets() : [widget];