percormance.decorator.ts

import { Store } from '@ngxs/store';
import { AppModule } from 'src/app/app.module';
import { AnalyticsActions } from 'src/app/state/analytics/analytics.actions';
import { isFunction } from 'util';
import { captureBreadcrumb } from '../utils';

/**
 * ***************************** WARNING **********************************
 * To use this decorator you must ensure that your component implements   *
 * both OnInit and OnDestroy. If it does not this will not work.          *
 * ************************************************************************
 *
 * This decorator will add performance monitoring to the component to find
 * out exactly how long a user spends on a page. If you provide the pageName
 * property then it will also send an analytics event to tell when a user has
 * both entered and left a page.
 */
export function MonitorComponentPerformance(data: {
  pageName?: string;
  traceName: string;
}): ClassDecorator {
  return function (constructor: Function) {
    const store = AppModule.injector.get(Store);

    const onInit: Function = constructor.prototype.ngOnInit;
    const onDestroy: Function = constructor.prototype.ngOnDestroy;

    if (!onInit || !isFunction(onInit)) {
      throw new Error(`${constructor.name} does not implement OnInit`);
    }

    if (!onDestroy || !isFunction(onDestroy)) {
      throw new Error(`${constructor.name} does not implement OnDestroy`);
    }

    constructor.prototype.ngOnInit = function (...args) {
      if (data.pageName) {
        store.dispatch(new AnalyticsActions.LogEvent(`visited ${data.pageName}`));
      }
      captureBreadcrumb(
        { message: `${data.traceName} initialized`, data: { data } },
        'performance decorator'
      );

      onInit && onInit.apply(this, args);
    };

    constructor.prototype.ngOnDestroy = function (...args) {
      if (data.pageName) {
        store.dispatch(new AnalyticsActions.LogEvent(`left ${data.pageName}`));
      }

      captureBreadcrumb(
        { message: `${data.traceName} destroyed`, data: { data } },
        'performance decorator'
      );
      onDestroy && onDestroy.apply(this, args);
    };
  };
}