@sentry/react 7.0.0-beta.0 → 7.0.0-beta.1

package/cjs/profiler.js

@@ -1,93 +1,110 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const browser_1 = require("@sentry/browser");
-const utils_1 = require("@sentry/utils");
-const hoist_non_react_statics_1 = tslib_1.__importDefault(require("hoist-non-react-statics"));
-const React = tslib_1.__importStar(require("react"));
-const 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.
  */
-class Profiler extends React.Component {
-    constructor(props) {
-        super(props);
-        /**
-         * The span of the mount activity
-         * Made protected for the React Native SDK to access
-         */
-        this._mountSpan = undefined;
-        const { name, disabled = false } = this.props;
-        if (disabled) {
-            return;
-        }
-        const activeTransaction = getActiveTransaction();
-        if (activeTransaction) {
-            this._mountSpan = activeTransaction.startChild({
-                description: `<${name}>`,
-                op: constants_1.REACT_MOUNT_OP,
-            });
-        }
+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.
-    componentDidMount() {
-        if (this._mountSpan) {
-            this._mountSpan.finish();
-        }
+
+    var activeTransaction = getActiveTransaction();
+    if (activeTransaction) {
+      this._mountSpan = activeTransaction.startChild({
+        description: `<${name}>`,
+        op: constants.REACT_MOUNT_OP,
+      });
     }
-    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.
-            const 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.
-                const now = utils_1.timestampWithMs();
-                this._mountSpan.startChild({
-                    data: {
-                        changedProps,
-                    },
-                    description: `<${this.props.name}>`,
-                    endTimestamp: now,
-                    op: constants_1.REACT_UPDATE_OP,
-                    startTimestamp: now,
-                });
-            }
-        }
+  }
+
+  // If a component mounted, we can finish the mount activity.
+   componentDidMount() {
+    if (this._mountSpan) {
+      this._mountSpan.finish();
     }
-    // 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_1.timestampWithMs(),
-                op: constants_1.REACT_RENDER_OP,
-                startTimestamp: this._mountSpan.endTimestamp,
-            });
-        }
+  }
+
+   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,
+        });
+      }
     }
-    render() {
-        return this.props.children;
+  }
+
+  // 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,
+      });
     }
-}
-exports.Profiler = Profiler;
-// eslint-disable-next-line @typescript-eslint/member-ordering
-Profiler.defaultProps = {
-    disabled: false,
-    includeRender: true,
-    includeUpdates: true,
-};
+  }
+
+   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
@@ -96,19 +113,28 @@ Profiler.defaultProps = {
  * @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) {
-    const componentDisplayName = (options && options.name) || WrappedComponent.displayName || WrappedComponent.name || exports.UNKNOWN_COMPONENT;
-    const Wrapped = (props) => (React.createElement(Profiler, Object.assign({}, options, { name: componentDisplayName, updateProps: props }),
-        React.createElement(WrappedComponent, Object.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.
@@ -116,51 +142,63 @@ exports.withProfiler = withProfiler;
  * Requires React 16.8 or above.
  * @param name displayName of component being profiled
  */
-function useProfiler(name, options = {
+function useProfiler(
+  name,
+  options = {
     disabled: false,
     hasRenderSpan: true,
-}) {
-    const [mountSpan] = React.useState(() => {
-        if (options && options.disabled) {
-            return undefined;
-        }
-        const activeTransaction = getActiveTransaction();
-        if (activeTransaction) {
-            return activeTransaction.startChild({
-                description: `<${name}>`,
-                op: constants_1.REACT_MOUNT_OP,
-            });
-        }
-        return undefined;
-    });
-    React.useEffect(() => {
-        if (mountSpan) {
-            mountSpan.finish();
-        }
-        return () => {
-            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
-    }, []);
+  },
+) {
+  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 = browser_1.getCurrentHub()) {
-    if (hub) {
-        const 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;;;;;;"}

package/cjs/reactrouter.js

@@ -1,115 +1,169 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const utils_1 = require("@sentry/utils");
-const hoist_non_react_statics_1 = tslib_1.__importDefault(require("hoist-non-react-statics"));
-const React = tslib_1.__importStar(require("react"));
+var {
+  _interopDefault,
+  _interopNamespace
+} = require('@sentry/utils/cjs/buildPolyfills');
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('@sentry/utils');
+var hoistNonReactStatics = require('hoist-non-react-statics');
+var React = require('react');
+
+var hoistNonReactStatics__default = /*#__PURE__*/_interopDefault(hoistNonReactStatics);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var _jsxFileName = "/home/runner/work/sentry-javascript/sentry-javascript/packages/react/src/reactrouter.tsx";
+
+// We need to disable eslint no-explict-any because any is required for the
+// react-router typings.
+
 /* eslint-enable @typescript-eslint/no-explicit-any */
-const global = utils_1.getGlobalObject();
+
+var global = utils.getGlobalObject();
+
 let activeTransaction;
-function reactRouterV4Instrumentation(history, routes, matchPath) {
-    return createReactRouterInstrumentation(history, 'react-router-v4', routes, matchPath);
+
+function reactRouterV4Instrumentation(
+  history,
+  routes,
+  matchPath,
+) {
+  return createReactRouterInstrumentation(history, 'react-router-v4', routes, matchPath);
 }
-exports.reactRouterV4Instrumentation = reactRouterV4Instrumentation;
-function reactRouterV5Instrumentation(history, routes, matchPath) {
-    return createReactRouterInstrumentation(history, 'react-router-v5', routes, matchPath);
+
+function reactRouterV5Instrumentation(
+  history,
+  routes,
+  matchPath,
+) {
+  return createReactRouterInstrumentation(history, 'react-router-v5', routes, matchPath);
 }
-exports.reactRouterV5Instrumentation = reactRouterV5Instrumentation;
-function createReactRouterInstrumentation(history, name, allRoutes = [], matchPath) {
-    function getInitPathName() {
-        if (history && history.location) {
-            return history.location.pathname;
-        }
-        if (global && global.location) {
-            return global.location.pathname;
-        }
-        return undefined;
+
+function createReactRouterInstrumentation(
+  history,
+  name,
+  allRoutes = [],
+  matchPath,
+) {
+  function getInitPathName() {
+    if (history && history.location) {
+      return history.location.pathname;
     }
-    function getTransactionName(pathname) {
-        if (allRoutes.length === 0 || !matchPath) {
-            return pathname;
-        }
-        const branches = matchRoutes(allRoutes, pathname, matchPath);
-        // eslint-disable-next-line @typescript-eslint/prefer-for-of
+
+    if (global && global.location) {
+      return global.location.pathname;
+    }
+
+    return undefined;
+  }
+
+  function getTransactionName(pathname) {
+    if (allRoutes.length === 0 || !matchPath) {
+      return pathname;
+    }
+
+    var branches = matchRoutes(allRoutes, pathname, matchPath);
         for (let x = 0; x < branches.length; x++) {
-            if (branches[x].match.isExact) {
-                return branches[x].match.path;
-            }
-        }
-        return pathname;
+      if (branches[x].match.isExact) {
+        return branches[x].match.path;
+      }
     }
-    return (customStartTransaction, startTransactionOnPageLoad = true, startTransactionOnLocationChange = true) => {
-        const initPathName = getInitPathName();
-        if (startTransactionOnPageLoad && initPathName) {
-            activeTransaction = customStartTransaction({
-                name: getTransactionName(initPathName),
-                op: 'pageload',
-                tags: {
-                    'routing.instrumentation': name,
-                },
-            });
-        }
-        if (startTransactionOnLocationChange && history.listen) {
-            history.listen((location, action) => {
-                if (action && (action === 'PUSH' || action === 'POP')) {
-                    if (activeTransaction) {
-                        activeTransaction.finish();
-                    }
-                    const tags = {
-                        'routing.instrumentation': name,
-                    };
-                    activeTransaction = customStartTransaction({
-                        name: getTransactionName(location.pathname),
-                        op: 'navigation',
-                        tags,
-                    });
-                }
-            });
+
+    return pathname;
+  }
+
+  return (customStartTransaction, startTransactionOnPageLoad = true, startTransactionOnLocationChange = true) => {
+    var initPathName = getInitPathName();
+    if (startTransactionOnPageLoad && initPathName) {
+      activeTransaction = customStartTransaction({
+        name: getTransactionName(initPathName),
+        op: 'pageload',
+        tags: {
+          'routing.instrumentation': name,
+        },
+      });
+    }
+
+    if (startTransactionOnLocationChange && history.listen) {
+      history.listen((location, action) => {
+        if (action && (action === 'PUSH' || action === 'POP')) {
+          if (activeTransaction) {
+            activeTransaction.finish();
+          }
+          var tags = {
+            'routing.instrumentation': name,
+          };
+
+          activeTransaction = customStartTransaction({
+            name: getTransactionName(location.pathname),
+            op: 'navigation',
+            tags,
+          });
         }
-    };
+      });
+    }
+  };
 }
+
 /**
  * Matches a set of routes to a pathname
  * Based on implementation from
  */
-function matchRoutes(routes, pathname, matchPath, branch = []) {
-    routes.some(route => {
-        const match = route.path
-            ? matchPath(pathname, route)
-            : branch.length
-                ? branch[branch.length - 1].match // use parent match
-                : computeRootMatch(pathname); // use default "root" match
-        if (match) {
-            branch.push({ route, match });
-            if (route.routes) {
-                matchRoutes(route.routes, pathname, matchPath, branch);
-            }
-        }
-        return !!match;
-    });
-    return branch;
+function matchRoutes(
+  routes,
+  pathname,
+  matchPath,
+  branch = [],
+) {
+  routes.some(route => {
+    var match = route.path
+      ? matchPath(pathname, route)
+      : branch.length
+      ? branch[branch.length - 1].match // use parent match
+      : computeRootMatch(pathname); // use default "root" match
+
+    if (match) {
+      branch.push({ route, match });
+
+      if (route.routes) {
+        matchRoutes(route.routes, pathname, matchPath, branch);
+      }
+    }
+
+    return !!match;
+  });
+
+  return branch;
 }
+
 function computeRootMatch(pathname) {
-    return { path: '/', url: '/', params: {}, isExact: pathname === '/' };
+  return { path: '/', url: '/', params: {}, isExact: pathname === '/' };
 }
-/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access */
+
 function withSentryRouting(Route) {
-    const componentDisplayName = Route.displayName || Route.name;
-    const WrappedRoute = (props) => {
-        if (activeTransaction && props && props.computedMatch && props.computedMatch.isExact) {
-            activeTransaction.setName(props.computedMatch.path);
-        }
-        // @ts-ignore Setting more specific React Component typing for `R` generic above
-        // will break advanced type inference done by react router params:
-        // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/13dc4235c069e25fe7ee16e11f529d909f9f3ff8/types/react-router/index.d.ts#L154-L164
-        return React.createElement(Route, Object.assign({}, props));
-    };
-    WrappedRoute.displayName = `sentryRoute(${componentDisplayName})`;
-    hoist_non_react_statics_1.default(WrappedRoute, Route);
+  var componentDisplayName = (Route ).displayName || (Route ).name;
+
+  var WrappedRoute = (props) => {
+    if (activeTransaction && props && props.computedMatch && props.computedMatch.isExact) {
+      activeTransaction.setName(props.computedMatch.path);
+    }
+
     // @ts-ignore Setting more specific React Component typing for `R` generic above
     // will break advanced type inference done by react router params:
     // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/13dc4235c069e25fe7ee16e11f529d909f9f3ff8/types/react-router/index.d.ts#L154-L164
-    return WrappedRoute;
+    return React__namespace.createElement(Route, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 163}} );
+  };
+
+  WrappedRoute.displayName = `sentryRoute(${componentDisplayName})`;
+  hoistNonReactStatics__default(WrappedRoute, Route);
+  // @ts-ignore Setting more specific React Component typing for `R` generic above
+  // will break advanced type inference done by react router params:
+  // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/13dc4235c069e25fe7ee16e11f529d909f9f3ff8/types/react-router/index.d.ts#L154-L164
+  return WrappedRoute;
 }
-exports.withSentryRouting = withSentryRouting;
 /* eslint-enable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access */
-//# sourceMappingURL=reactrouter.js.map
+
+exports.reactRouterV4Instrumentation = reactRouterV4Instrumentation;
+exports.reactRouterV5Instrumentation = reactRouterV5Instrumentation;
+exports.withSentryRouting = withSentryRouting;
+//# sourceMappingURL=reactrouter.js.map