Applicationinsights-js: Docs for withAITracking are possibly incorrect

[James-E-Adams]

Hi!
It says here
https://github.com/microsoft/ApplicationInsights-JS/tree/master/vNext/extensions/applicationinsights-react-js#basic-usage

import React from 'react';
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ReactPlugin, withAITracking } from '@microsoft/applicationinsights-react-js';
import { createBrowserHistory } from "history";

const browserHistory = createBrowserHistory({ basename: '' });
var reactPlugin = new ReactPlugin();
var appInsights = new ApplicationInsights({
    config: {
        instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE'
        extensions: [reactPlugin],
        extensionConfig: {
          [reactPlugin.identifier]: { history: browserHistory }
        }
    }
});
appInsights.loadAppInsights();

// To instrument various React components usage tracking, apply the `withAITracking` higher-order
// component function.

class MyComponent extends React.Component {
    ...
}

export default withAITracking(appInsights, MyComponent);

to pass an appInsights instance to the first argument of withAITracking but according to:

https://github.com/microsoft/ApplicationInsights-JS/blob/master/vNext/extensions/applicationinsights-react-js/src/withAITracking.tsx

The first argument should be a reactPlugin.

Should the docs be updated to reflect this?

Also, my first thought when checking out the API was that I hope it supports currying, i.e withAITracking(reactPlugin) returns a HOC. Is there interest in adding this to the API? It would make it possible to chain it within a compose for those who structure their react components as compositions of HOCs - rather than forcing the withAITracking HOC to be wrapping the component directly.

Cheers!

[yasso1am]

I have found this to be the same. My IDE was required an object with typeof ReactPlugin.

[hectorhdzg]

Updating sample code with correct parameters, @James-E-Adams can you provide more details about your ask, my understanding is that a HOC is always associated with a React component, we will be happy to extend the plugin functionality for common usage patterns among users.

[James-E-Adams]

Hi @hectorhdzg,
Thanks for the support.
So withAITracking as defined in https://github.com/microsoft/ApplicationInsights-JS/blob/master/vNext/extensions/applicationinsights-react-js/src/withAITracking.tsx
is for sure a HOC. But it could have a better API that allows it to be used in a composition of HOCs.

Right now, in order to use withAITracking, you must wrap the component itself.

This means that you can't do this:

Example 1

const MyEnhancedComponent = compose(
      hoc1,
      withAiTracking(reactPlugin),
      hoc2
      )(BaseComponent)

and you are forced to do this:

Example 2

const MyEnhancedComponent = compose(
      hoc1,
      hoc2
      )(withAITracking(reactPlugin,BaseComponent))

which is more restrictive.

So a better API would support currying. i.e calling withAITracking(reactPlugin) returns a function with the following signature:

(Component: React.ComponentType<P>, componentName?: string, className?: string) => React.ComponentClass<P>

This would now support the usage in Example 1.

Hope that makes sense!