@sentry/react 7.0.0-alpha.1 → 7.0.0-beta.2

package/cjs/profiler.js

@@ -1,98 +1,110 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-var browser_1 = require("@sentry/browser");
-var utils_1 = require("@sentry/utils");
-var hoist_non_react_statics_1 = tslib_1.__importDefault(require("hoist-non-react-statics"));
-var React = tslib_1.__importStar(require("react"));
-var constants_1 = require("./constants");
-exports.UNKNOWN_COMPONENT = 'unknown';
+var {
+  _interopDefault,
+  _interopNamespace
+} = require('@sentry/utils/cjs/buildPolyfills');
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var browser = require('@sentry/browser');
+var utils = require('@sentry/utils');
+var hoistNonReactStatics = require('hoist-non-react-statics');
+var React = require('react');
+var constants = require('./constants.js');
+
+var hoistNonReactStatics__default = /*#__PURE__*/_interopDefault(hoistNonReactStatics);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var _jsxFileName = "/home/runner/work/sentry-javascript/sentry-javascript/packages/react/src/profiler.tsx";
+var UNKNOWN_COMPONENT = 'unknown';
+
 /**
  * The Profiler component leverages Sentry's Tracing integration to generate
  * spans based on component lifecycles.
  */
-var Profiler = /** @class */ (function (_super) {
-    tslib_1.__extends(Profiler, _super);
-    function Profiler(props) {
-        var _this = _super.call(this, props) || this;
-        /**
-         * The span of the mount activity
-         * Made protected for the React Native SDK to access
-         */
-        _this._mountSpan = undefined;
-        var _a = _this.props, name = _a.name, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
-        if (disabled) {
-            return _this;
-        }
-        var activeTransaction = getActiveTransaction();
-        if (activeTransaction) {
-            _this._mountSpan = activeTransaction.startChild({
-                description: "<" + name + ">",
-                op: constants_1.REACT_MOUNT_OP,
-            });
-        }
-        return _this;
+class Profiler extends React__namespace.Component {
+  /**
+   * The span of the mount activity
+   * Made protected for the React Native SDK to access
+   */
+   __init() {this._mountSpan = undefined;}
+
+     static __initStatic() {this.defaultProps = {
+    disabled: false,
+    includeRender: true,
+    includeUpdates: true,
+  };}
+
+   constructor(props) {
+    super(props);Profiler.prototype.__init.call(this);;
+    const { name, disabled = false } = this.props;
+
+    if (disabled) {
+      return;
     }
-    // If a component mounted, we can finish the mount activity.
-    Profiler.prototype.componentDidMount = function () {
-        if (this._mountSpan) {
-            this._mountSpan.finish();
-        }
-    };
-    Profiler.prototype.componentDidUpdate = function (_a) {
-        var _this = this;
-        var updateProps = _a.updateProps, _b = _a.includeUpdates, includeUpdates = _b === void 0 ? true : _b;
-        // Only generate an update span if hasUpdateSpan is true, if there is a valid mountSpan,
-        // and if the updateProps have changed. It is ok to not do a deep equality check here as it is expensive.
-        // We are just trying to give baseline clues for further investigation.
-        if (includeUpdates && this._mountSpan && updateProps !== this.props.updateProps) {
-            // See what props haved changed between the previous props, and the current props. This is
-            // set as data on the span. We just store the prop keys as the values could be potenially very large.
-            var changedProps = Object.keys(updateProps).filter(function (k) { return updateProps[k] !== _this.props.updateProps[k]; });
-            if (changedProps.length > 0) {
-                // The update span is a point in time span with 0 duration, just signifying that the component
-                // has been updated.
-                var now = utils_1.timestampWithMs();
-                this._mountSpan.startChild({
-                    data: {
-                        changedProps: changedProps,
-                    },
-                    description: "<" + this.props.name + ">",
-                    endTimestamp: now,
-                    op: constants_1.REACT_UPDATE_OP,
-                    startTimestamp: now,
-                });
-            }
-        }
-    };
-    // If a component is unmounted, we can say it is no longer on the screen.
-    // This means we can finish the span representing the component render.
-    Profiler.prototype.componentWillUnmount = function () {
-        var _a = this.props, name = _a.name, _b = _a.includeRender, includeRender = _b === void 0 ? true : _b;
-        if (this._mountSpan && includeRender) {
-            // If we were able to obtain the spanId of the mount activity, we should set the
-            // next activity as a child to the component mount activity.
-            this._mountSpan.startChild({
-                description: "<" + name + ">",
-                endTimestamp: utils_1.timestampWithMs(),
-                op: constants_1.REACT_RENDER_OP,
-                startTimestamp: this._mountSpan.endTimestamp,
-            });
-        }
-    };
-    Profiler.prototype.render = function () {
-        return this.props.children;
-    };
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    Profiler.defaultProps = {
-        disabled: false,
-        includeRender: true,
-        includeUpdates: true,
-    };
-    return Profiler;
-}(React.Component));
-exports.Profiler = Profiler;
+
+    var activeTransaction = getActiveTransaction();
+    if (activeTransaction) {
+      this._mountSpan = activeTransaction.startChild({
+        description: `<${name}>`,
+        op: constants.REACT_MOUNT_OP,
+      });
+    }
+  }
+
+  // If a component mounted, we can finish the mount activity.
+   componentDidMount() {
+    if (this._mountSpan) {
+      this._mountSpan.finish();
+    }
+  }
+
+   componentDidUpdate({ updateProps, includeUpdates = true }) {
+    // Only generate an update span if hasUpdateSpan is true, if there is a valid mountSpan,
+    // and if the updateProps have changed. It is ok to not do a deep equality check here as it is expensive.
+    // We are just trying to give baseline clues for further investigation.
+    if (includeUpdates && this._mountSpan && updateProps !== this.props.updateProps) {
+      // See what props haved changed between the previous props, and the current props. This is
+      // set as data on the span. We just store the prop keys as the values could be potenially very large.
+      var changedProps = Object.keys(updateProps).filter(k => updateProps[k] !== this.props.updateProps[k]);
+      if (changedProps.length > 0) {
+        // The update span is a point in time span with 0 duration, just signifying that the component
+        // has been updated.
+        var now = utils.timestampWithMs();
+        this._mountSpan.startChild({
+          data: {
+            changedProps,
+          },
+          description: `<${this.props.name}>`,
+          endTimestamp: now,
+          op: constants.REACT_UPDATE_OP,
+          startTimestamp: now,
+        });
+      }
+    }
+  }
+
+  // If a component is unmounted, we can say it is no longer on the screen.
+  // This means we can finish the span representing the component render.
+   componentWillUnmount() {
+    const { name, includeRender = true } = this.props;
+
+    if (this._mountSpan && includeRender) {
+      // If we were able to obtain the spanId of the mount activity, we should set the
+      // next activity as a child to the component mount activity.
+      this._mountSpan.startChild({
+        description: `<${name}>`,
+        endTimestamp: utils.timestampWithMs(),
+        op: constants.REACT_RENDER_OP,
+        startTimestamp: this._mountSpan.endTimestamp,
+      });
+    }
+  }
+
+   render() {
+    return this.props.children;
+  }
+}Profiler.__initStatic();
+
 /**
  * withProfiler is a higher order component that wraps a
  * component in a {@link Profiler} component. It is recommended that
@@ -101,19 +113,28 @@ exports.Profiler = Profiler;
  * @param WrappedComponent component that is wrapped by Profiler
  * @param options the {@link ProfilerProps} you can pass into the Profiler
  */
-function withProfiler(WrappedComponent, 
-// We do not want to have `updateProps` given in options, it is instead filled through the HOC.
-options) {
-    var componentDisplayName = (options && options.name) || WrappedComponent.displayName || WrappedComponent.name || exports.UNKNOWN_COMPONENT;
-    var Wrapped = function (props) { return (React.createElement(Profiler, tslib_1.__assign({}, options, { name: componentDisplayName, updateProps: props }),
-        React.createElement(WrappedComponent, tslib_1.__assign({}, props)))); };
-    Wrapped.displayName = "profiler(" + componentDisplayName + ")";
-    // Copy over static methods from Wrapped component to Profiler HOC
-    // See: https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over
-    hoist_non_react_statics_1.default(Wrapped, WrappedComponent);
-    return Wrapped;
+function withProfiler(
+  WrappedComponent,
+  // We do not want to have `updateProps` given in options, it is instead filled through the HOC.
+  options,
+) {
+  var componentDisplayName =
+    (options && options.name) || WrappedComponent.displayName || WrappedComponent.name || UNKNOWN_COMPONENT;
+
+  var Wrapped = (props) => (
+    React__namespace.createElement(Profiler, { ...options, name: componentDisplayName, updateProps: props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 133}}
+      , React__namespace.createElement(WrappedComponent, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 134}} )
+    )
+  );
+
+  Wrapped.displayName = `profiler(${componentDisplayName})`;
+
+  // Copy over static methods from Wrapped component to Profiler HOC
+  // See: https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over
+  hoistNonReactStatics__default(Wrapped, WrappedComponent);
+  return Wrapped;
 }
-exports.withProfiler = withProfiler;
+
 /**
  *
  * `useProfiler` is a React hook that profiles a React component.
@@ -121,53 +142,63 @@ exports.withProfiler = withProfiler;
  * Requires React 16.8 or above.
  * @param name displayName of component being profiled
  */
-function useProfiler(name, options) {
-    if (options === void 0) { options = {
-        disabled: false,
-        hasRenderSpan: true,
-    }; }
-    var _a = tslib_1.__read(React.useState(function () {
-        if (options && options.disabled) {
-            return undefined;
-        }
-        var activeTransaction = getActiveTransaction();
-        if (activeTransaction) {
-            return activeTransaction.startChild({
-                description: "<" + name + ">",
-                op: constants_1.REACT_MOUNT_OP,
-            });
-        }
-        return undefined;
-    }), 1), mountSpan = _a[0];
-    React.useEffect(function () {
-        if (mountSpan) {
-            mountSpan.finish();
-        }
-        return function () {
-            if (mountSpan && options.hasRenderSpan) {
-                mountSpan.startChild({
-                    description: "<" + name + ">",
-                    endTimestamp: utils_1.timestampWithMs(),
-                    op: constants_1.REACT_RENDER_OP,
-                    startTimestamp: mountSpan.endTimestamp,
-                });
-            }
-        };
-        // We only want this to run once.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+function useProfiler(
+  name,
+  options = {
+    disabled: false,
+    hasRenderSpan: true,
+  },
+) {
+  const [mountSpan] = React__namespace.useState(() => {
+    if (options && options.disabled) {
+      return undefined;
+    }
+
+    var activeTransaction = getActiveTransaction();
+    if (activeTransaction) {
+      return activeTransaction.startChild({
+        description: `<${name}>`,
+        op: constants.REACT_MOUNT_OP,
+      });
+    }
+
+    return undefined;
+  });
+
+  React__namespace.useEffect(() => {
+    if (mountSpan) {
+      mountSpan.finish();
+    }
+
+    return () => {
+      if (mountSpan && options.hasRenderSpan) {
+        mountSpan.startChild({
+          description: `<${name}>`,
+          endTimestamp: utils.timestampWithMs(),
+          op: constants.REACT_RENDER_OP,
+          startTimestamp: mountSpan.endTimestamp,
+        });
+      }
+    };
+    // We only want this to run once.
+      }, []);
 }
-exports.useProfiler = useProfiler;
+
 /** Grabs active transaction off scope */
-function getActiveTransaction(hub) {
-    if (hub === void 0) { hub = browser_1.getCurrentHub(); }
-    if (hub) {
-        var scope = hub.getScope();
-        if (scope) {
-            return scope.getTransaction();
-        }
+function getActiveTransaction(hub = browser.getCurrentHub()) {
+  if (hub) {
+    var scope = hub.getScope();
+    if (scope) {
+      return scope.getTransaction() ;
     }
-    return undefined;
+  }
+
+  return undefined;
 }
+
+exports.Profiler = Profiler;
+exports.UNKNOWN_COMPONENT = UNKNOWN_COMPONENT;
 exports.getActiveTransaction = getActiveTransaction;
-//# sourceMappingURL=profiler.js.map
+exports.useProfiler = useProfiler;
+exports.withProfiler = withProfiler;
+//# sourceMappingURL=profiler.js.map

package/cjs/profiler.js.map

@@ -1 +1 @@
-{"version":3,"file":"profiler.js","sourceRoot":"","sources":["../../src/profiler.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { getCurrentHub, Hub } from '@sentry/browser';\nimport { Span, Transaction } from '@sentry/types';\nimport { timestampWithMs } from '@sentry/utils';\nimport hoistNonReactStatics from 'hoist-non-react-statics';\nimport * as React from 'react';\n\nimport { REACT_MOUNT_OP, REACT_RENDER_OP, REACT_UPDATE_OP } from './constants';\n\nexport const UNKNOWN_COMPONENT = 'unknown';\n\nexport type ProfilerProps = {\n  // The name of the component being profiled.\n  name: string;\n  // If the Profiler is disabled. False by default. This is useful if you want to disable profilers\n  // in certain environments.\n  disabled?: boolean;\n  // If time component is on page should be displayed as spans. True by default.\n  includeRender?: boolean;\n  // If component updates should be displayed as spans. True by default.\n  includeUpdates?: boolean;\n  // props given to component being profiled.\n  updateProps: { [key: string]: unknown };\n};\n\n/**\n * The Profiler component leverages Sentry's Tracing integration to generate\n * spans based on component lifecycles.\n */\nclass Profiler extends React.Component<ProfilerProps> {\n  /**\n   * The span of the mount activity\n   * Made protected for the React Native SDK to access\n   */\n  protected _mountSpan: Span | undefined = undefined;\n\n  // eslint-disable-next-line @typescript-eslint/member-ordering\n  public static defaultProps: Partial<ProfilerProps> = {\n    disabled: false,\n    includeRender: true,\n    includeUpdates: true,\n  };\n\n  public constructor(props: ProfilerProps) {\n    super(props);\n    const { name, disabled = false } = this.props;\n\n    if (disabled) {\n      return;\n    }\n\n    const activeTransaction = getActiveTransaction();\n    if (activeTransaction) {\n      this._mountSpan = activeTransaction.startChild({\n        description: `<${name}>`,\n        op: REACT_MOUNT_OP,\n      });\n    }\n  }\n\n  // If a component mounted, we can finish the mount activity.\n  public componentDidMount(): void {\n    if (this._mountSpan) {\n      this._mountSpan.finish();\n    }\n  }\n\n  public componentDidUpdate({ updateProps, includeUpdates = true }: ProfilerProps): void {\n    // Only generate an update span if hasUpdateSpan is true, if there is a valid mountSpan,\n    // and if the updateProps have changed. It is ok to not do a deep equality check here as it is expensive.\n    // We are just trying to give baseline clues for further investigation.\n    if (includeUpdates && this._mountSpan && updateProps !== this.props.updateProps) {\n      // See what props haved changed between the previous props, and the current props. This is\n      // set as data on the span. We just store the prop keys as the values could be potenially very large.\n      const changedProps = Object.keys(updateProps).filter(k => updateProps[k] !== this.props.updateProps[k]);\n      if (changedProps.length > 0) {\n        // The update span is a point in time span with 0 duration, just signifying that the component\n        // has been updated.\n        const now = timestampWithMs();\n        this._mountSpan.startChild({\n          data: {\n            changedProps,\n          },\n          description: `<${this.props.name}>`,\n          endTimestamp: now,\n          op: REACT_UPDATE_OP,\n          startTimestamp: now,\n        });\n      }\n    }\n  }\n\n  // If a component is unmounted, we can say it is no longer on the screen.\n  // This means we can finish the span representing the component render.\n  public componentWillUnmount(): void {\n    const { name, includeRender = true } = this.props;\n\n    if (this._mountSpan && includeRender) {\n      // If we were able to obtain the spanId of the mount activity, we should set the\n      // next activity as a child to the component mount activity.\n      this._mountSpan.startChild({\n        description: `<${name}>`,\n        endTimestamp: timestampWithMs(),\n        op: REACT_RENDER_OP,\n        startTimestamp: this._mountSpan.endTimestamp,\n      });\n    }\n  }\n\n  public render(): React.ReactNode {\n    return this.props.children;\n  }\n}\n\n/**\n * withProfiler is a higher order component that wraps a\n * component in a {@link Profiler} component. It is recommended that\n * the higher order component be used over the regular {@link Profiler} component.\n *\n * @param WrappedComponent component that is wrapped by Profiler\n * @param options the {@link ProfilerProps} you can pass into the Profiler\n */\nfunction withProfiler<P extends Record<string, any>>(\n  WrappedComponent: React.ComponentType<P>,\n  // We do not want to have `updateProps` given in options, it is instead filled through the HOC.\n  options?: Pick<Partial<ProfilerProps>, Exclude<keyof ProfilerProps, 'updateProps'>>,\n): React.FC<P> {\n  const componentDisplayName =\n    (options && options.name) || WrappedComponent.displayName || WrappedComponent.name || UNKNOWN_COMPONENT;\n\n  const Wrapped: React.FC<P> = (props: P) => (\n    <Profiler {...options} name={componentDisplayName} updateProps={props}>\n      <WrappedComponent {...props} />\n    </Profiler>\n  );\n\n  Wrapped.displayName = `profiler(${componentDisplayName})`;\n\n  // Copy over static methods from Wrapped component to Profiler HOC\n  // See: https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over\n  hoistNonReactStatics(Wrapped, WrappedComponent);\n  return Wrapped;\n}\n\n/**\n *\n * `useProfiler` is a React hook that profiles a React component.\n *\n * Requires React 16.8 or above.\n * @param name displayName of component being profiled\n */\nfunction useProfiler(\n  name: string,\n  options: { disabled?: boolean; hasRenderSpan?: boolean } = {\n    disabled: false,\n    hasRenderSpan: true,\n  },\n): void {\n  const [mountSpan] = React.useState(() => {\n    if (options && options.disabled) {\n      return undefined;\n    }\n\n    const activeTransaction = getActiveTransaction();\n    if (activeTransaction) {\n      return activeTransaction.startChild({\n        description: `<${name}>`,\n        op: REACT_MOUNT_OP,\n      });\n    }\n\n    return undefined;\n  });\n\n  React.useEffect(() => {\n    if (mountSpan) {\n      mountSpan.finish();\n    }\n\n    return (): void => {\n      if (mountSpan && options.hasRenderSpan) {\n        mountSpan.startChild({\n          description: `<${name}>`,\n          endTimestamp: timestampWithMs(),\n          op: REACT_RENDER_OP,\n          startTimestamp: mountSpan.endTimestamp,\n        });\n      }\n    };\n    // We only want this to run once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n}\n\nexport { withProfiler, Profiler, useProfiler };\n\n/** Grabs active transaction off scope */\nexport function getActiveTransaction<T extends Transaction>(hub: Hub = getCurrentHub()): T | undefined {\n  if (hub) {\n    const scope = hub.getScope();\n    if (scope) {\n      return scope.getTransaction() as T | undefined;\n    }\n  }\n\n  return undefined;\n}\n"]}
+{"version":3,"file":"profiler.js","sources":["../../src/profiler.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { getCurrentHub, Hub } from '@sentry/browser';\nimport { Span, Transaction } from '@sentry/types';\nimport { timestampWithMs } from '@sentry/utils';\nimport hoistNonReactStatics from 'hoist-non-react-statics';\nimport * as React from 'react';\n\nimport { REACT_MOUNT_OP, REACT_RENDER_OP, REACT_UPDATE_OP } from './constants';\n\nexport const UNKNOWN_COMPONENT = 'unknown';\n\nexport type ProfilerProps = {\n  // The name of the component being profiled.\n  name: string;\n  // If the Profiler is disabled. False by default. This is useful if you want to disable profilers\n  // in certain environments.\n  disabled?: boolean;\n  // If time component is on page should be displayed as spans. True by default.\n  includeRender?: boolean;\n  // If component updates should be displayed as spans. True by default.\n  includeUpdates?: boolean;\n  // props given to component being profiled.\n  updateProps: { [key: string]: unknown };\n};\n\n/**\n * The Profiler component leverages Sentry's Tracing integration to generate\n * spans based on component lifecycles.\n */\nclass Profiler extends React.Component<ProfilerProps> {\n  /**\n   * The span of the mount activity\n   * Made protected for the React Native SDK to access\n   */\n  protected _mountSpan: Span | undefined = undefined;\n\n  // eslint-disable-next-line @typescript-eslint/member-ordering\n  public static defaultProps: Partial<ProfilerProps> = {\n    disabled: false,\n    includeRender: true,\n    includeUpdates: true,\n  };\n\n  public constructor(props: ProfilerProps) {\n    super(props);\n    const { name, disabled = false } = this.props;\n\n    if (disabled) {\n      return;\n    }\n\n    const activeTransaction = getActiveTransaction();\n    if (activeTransaction) {\n      this._mountSpan = activeTransaction.startChild({\n        description: `<${name}>`,\n        op: REACT_MOUNT_OP,\n      });\n    }\n  }\n\n  // If a component mounted, we can finish the mount activity.\n  public componentDidMount(): void {\n    if (this._mountSpan) {\n      this._mountSpan.finish();\n    }\n  }\n\n  public componentDidUpdate({ updateProps, includeUpdates = true }: ProfilerProps): void {\n    // Only generate an update span if hasUpdateSpan is true, if there is a valid mountSpan,\n    // and if the updateProps have changed. It is ok to not do a deep equality check here as it is expensive.\n    // We are just trying to give baseline clues for further investigation.\n    if (includeUpdates && this._mountSpan && updateProps !== this.props.updateProps) {\n      // See what props haved changed between the previous props, and the current props. This is\n      // set as data on the span. We just store the prop keys as the values could be potenially very large.\n      const changedProps = Object.keys(updateProps).filter(k => updateProps[k] !== this.props.updateProps[k]);\n      if (changedProps.length > 0) {\n        // The update span is a point in time span with 0 duration, just signifying that the component\n        // has been updated.\n        const now = timestampWithMs();\n        this._mountSpan.startChild({\n          data: {\n            changedProps,\n          },\n          description: `<${this.props.name}>`,\n          endTimestamp: now,\n          op: REACT_UPDATE_OP,\n          startTimestamp: now,\n        });\n      }\n    }\n  }\n\n  // If a component is unmounted, we can say it is no longer on the screen.\n  // This means we can finish the span representing the component render.\n  public componentWillUnmount(): void {\n    const { name, includeRender = true } = this.props;\n\n    if (this._mountSpan && includeRender) {\n      // If we were able to obtain the spanId of the mount activity, we should set the\n      // next activity as a child to the component mount activity.\n      this._mountSpan.startChild({\n        description: `<${name}>`,\n        endTimestamp: timestampWithMs(),\n        op: REACT_RENDER_OP,\n        startTimestamp: this._mountSpan.endTimestamp,\n      });\n    }\n  }\n\n  public render(): React.ReactNode {\n    return this.props.children;\n  }\n}\n\n/**\n * withProfiler is a higher order component that wraps a\n * component in a {@link Profiler} component. It is recommended that\n * the higher order component be used over the regular {@link Profiler} component.\n *\n * @param WrappedComponent component that is wrapped by Profiler\n * @param options the {@link ProfilerProps} you can pass into the Profiler\n */\nfunction withProfiler<P extends Record<string, any>>(\n  WrappedComponent: React.ComponentType<P>,\n  // We do not want to have `updateProps` given in options, it is instead filled through the HOC.\n  options?: Pick<Partial<ProfilerProps>, Exclude<keyof ProfilerProps, 'updateProps'>>,\n): React.FC<P> {\n  const componentDisplayName =\n    (options && options.name) || WrappedComponent.displayName || WrappedComponent.name || UNKNOWN_COMPONENT;\n\n  const Wrapped: React.FC<P> = (props: P) => (\n    <Profiler {...options} name={componentDisplayName} updateProps={props}>\n      <WrappedComponent {...props} />\n    </Profiler>\n  );\n\n  Wrapped.displayName = `profiler(${componentDisplayName})`;\n\n  // Copy over static methods from Wrapped component to Profiler HOC\n  // See: https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over\n  hoistNonReactStatics(Wrapped, WrappedComponent);\n  return Wrapped;\n}\n\n/**\n *\n * `useProfiler` is a React hook that profiles a React component.\n *\n * Requires React 16.8 or above.\n * @param name displayName of component being profiled\n */\nfunction useProfiler(\n  name: string,\n  options: { disabled?: boolean; hasRenderSpan?: boolean } = {\n    disabled: false,\n    hasRenderSpan: true,\n  },\n): void {\n  const [mountSpan] = React.useState(() => {\n    if (options && options.disabled) {\n      return undefined;\n    }\n\n    const activeTransaction = getActiveTransaction();\n    if (activeTransaction) {\n      return activeTransaction.startChild({\n        description: `<${name}>`,\n        op: REACT_MOUNT_OP,\n      });\n    }\n\n    return undefined;\n  });\n\n  React.useEffect(() => {\n    if (mountSpan) {\n      mountSpan.finish();\n    }\n\n    return (): void => {\n      if (mountSpan && options.hasRenderSpan) {\n        mountSpan.startChild({\n          description: `<${name}>`,\n          endTimestamp: timestampWithMs(),\n          op: REACT_RENDER_OP,\n          startTimestamp: mountSpan.endTimestamp,\n        });\n      }\n    };\n    // We only want this to run once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n}\n\nexport { withProfiler, Profiler, useProfiler };\n\n/** Grabs active transaction off scope */\nexport function getActiveTransaction<T extends Transaction>(hub: Hub = getCurrentHub()): T | undefined {\n  if (hub) {\n    const scope = hub.getScope();\n    if (scope) {\n      return scope.getTransaction() as T | undefined;\n    }\n  }\n\n  return undefined;\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA;;;AA0BA;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmFA;;AAEA;;;;;;;;AAQA;;;;AAIA;;;;;;;;;;;;;;;;AAgBA;;AAEA;;;;;;;AAOA;;;;;;AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA;;AAIA;;;;;;;;;;AAUA;;;;;;"}