Dynamics API

Wrapper

The Dynamics Higher order component is at the heart of the telemetry capturing mechanism. It wraps your components and enhances them with functionality which uses lifecycle hooks and event handlers to record user interactions. The HOC takes in a unique component name as an additional parameter

const Sample1 =  () => {
    // component logic
    ...
    return (
    ...
    )
}

export default withDynamics(Sample1, 'sample1');

Custom Hook

An alternative to using the HOC you can also simply plug into the telemetry system by using the custom hook. If you wish to capture click and hover events then the ref needs to be assigned to a <div> element rendered by the component

const Sample1 =  () => {
    // component logic
    const ref = useDynamics('sample1');
    ...
    return (
        <div ref={ref}>
        ...
        </div>
    )
}

export default Sample1;

Boundary

The Dynamics HOC underneath it uses an Error boundary component for capturing Errors occuring inside your components. It also captures entire stack trace along side the timestamps.

<DynamicsBoundary componentName={componentName}>
    <Component id={componentName} {...props} />
</DynamicsBoundary>