createInsightsMiddleware - [insights middleware]: could not extract Algolia credentials from searchClient

[tomzweb]

Description

When using the createInsightsMiddleware with the typesense-instantsearch-adapter search client, the useInstantSearch from 'react-instantsearch-hooks' throws the following error:

Uncaught Error: [insights middleware]: could not extract Algolia credentials from searchClient

This appears to be because of a missing appId and appKey. Attempts to add this via search-insights have not been successful:

import aa from 'search-insights';
aa('init', { appId: 'test', appKey: 'test'})

What I'm trying to achieve is to use insights to send events to a third-party analytics service.

Steps to reproduce

Create an insights middleware component:

import { createInsightsMiddleware } from 'instantsearch.js/es/middlewares';
import { useInstantSearch } from 'react-instantsearch-hooks';
import { useLayoutEffect } from 'react';

export const InsightsMiddleware = () => {
  const { use } = useInstantSearch();

  useLayoutEffect(() => {
    const middleware = createInsightsMiddleware({
      insightsClient: null,
      onEvent: () => {
        // todo
      }
    });

    return use(middleware);
  }, [use]);

  return null;
}

Provide the InsightsMiddleware to the InstantSearch component:

<InstantSearch indexName='index' searchClient={searchClient}>
  <InsightsMiddleware />
  <SearchBox />
  <Hits hitComponent={Hit} />
</InstantSearch>

Expected Behavior

The ability to use insights middleware to send events to third-party APIs.

Actual Behavior

Uncaught Error: [insights middleware]: could not extract Algolia credentials from searchClient

[jasonbosco]

@tomzweb Even though the search-insights middleware has a generic name, it turns out that it is only useful to send analytics events to Algolia. To send analytics to a third party service, you want to use the approach outlined here: https://www.algolia.com/doc/guides/building-search-ui/going-further/integrate-google-analytics/js/

[accalton]

@tomzweb I recently encountered this issue myself when developing a Search page for a client. It turns out that the reason for this, in my case, was that I was attempting to remove empty queries from Search Analytics using the old React InstantSearch method.

Check out the documentation here: https://www.algolia.com/doc/guides/getting-analytics/search-analytics/out-of-the-box-analytics/how-to/how-to-remove-empty-search-from-analytics/?client=React+Hooks

Specifically, look at the React Hooks example and note that the searchClient constant now has ...algoliaClient as part of it. This cleared up the issue and it's now working for me.

Hopefully this helps!

[tomzweb]

@accalton Thanks that does fix the error I was seeing, thank you!