コンポーネントの処理時間を計測するHOC（Higher-Order Component）を作る

import React from 'react';

const isServer = !(typeof window !== 'undefined');

// A. 中身のNew Relic関数
function nrTrace(
  segmentName: string,
  argf: any,
  component: PropertyDescriptor,
  args: any[]
) {
  if (isServer) {
    if (!newrelic) {
      return false;
    }
    return newrelic.startSegment(segmentName, true, () => {
      return argf.apply(component, args);
    });
  }

  // クライアント側では元の関数をそのまま返す
  return argf.apply(component, args);
}

// B. デコレータ
function trace(segmentName = 'Anonymous') {
  return (target: any, name: string, descriptor: PropertyDescriptor) => {
    // NR missing - Server
    if (isServer && newrelic && !newrelic.agent) {
      return descriptor;
    }
    // NR missing - Client
    if (!isServer && typeof newrelic === 'undefined') {
      return descriptor;
    }

    if (typeof descriptor.value === 'function') {
      const descriptorValue = descriptor.value;

      descriptor.value = function(...args: any[]) {
        try {
          return nrTrace(segmentName, descriptorValue, this, args);
        } catch (e) {
          console.log(`Error: ${e}`);
          throw e;
        }
      };
    }

    return descriptor;
  };
}

// C. 実際にコンポーネント側に付けるHOC
export function withTrace(WrappedComponent: React.FC<any>) {
  return class extends React.Component {

    @trace(WrappedComponent.displayName)
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

import React from 'react';
import { withTrace } from '~/helpers/nrTrace';

const SomeComponent: React.FC = () => {

// some statements 

return (
  <div>
   some elements
  </div>
  )
}

SomeComponent.displayName = 'SomeComponent';
export default withTrace(SomeComponent);

////
// observer等が付く場合
////
const wrapped = observer(SomeComponent);
wrapped.displayName = 'SomeComponent';
export default withTrace(wrapped);