@sentry/react 6.13.0-beta.1

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Transaction, TransactionContext } from '@sentry/types';\n\nexport type Action = 'PUSH' | 'REPLACE' | 'POP';\n\nexport type Location = {\n  pathname: string;\n  action?: Action;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n} & Record<string, any>;\n\nexport type ReactRouterInstrumentation = <T extends Transaction>(\n  startTransaction: (context: TransactionContext) => T | undefined,\n  startTransactionOnPageLoad?: boolean,\n  startTransactionOnLocationChange?: boolean,\n) => void;\n"]}

package/esm/errorboundary.d.ts

@@ -0,0 +1,59 @@
+import { ReportDialogOptions, Scope } from '@sentry/browser';
+import * as React from 'react';
+export declare const UNKNOWN_COMPONENT = "unknown";
+export declare type FallbackRender = (errorData: {
+    error: Error;
+    componentStack: string | null;
+    eventId: string | null;
+    resetError(): void;
+}) => React.ReactElement;
+export declare type ErrorBoundaryProps = {
+    /** If a Sentry report dialog should be rendered on error */
+    showDialog?: boolean;
+    /**
+     * Options to be passed into the Sentry report dialog.
+     * No-op if {@link showDialog} is false.
+     */
+    dialogOptions?: ReportDialogOptions;
+    /**
+     * A fallback component that gets rendered when the error boundary encounters an error.
+     *
+     * Can either provide a React Component, or a function that returns React Component as
+     * a valid fallback prop. If a function is provided, the function will be called with
+     * the error, the component stack, and an function that resets the error boundary on error.
+     *
+     */
+    fallback?: React.ReactElement | FallbackRender;
+    /** Called when the error boundary encounters an error */
+    onError?(error: Error, componentStack: string, eventId: string): void;
+    /** Called on componentDidMount() */
+    onMount?(): void;
+    /** Called if resetError() is called from the fallback render props function  */
+    onReset?(error: Error | null, componentStack: string | null, eventId: string | null): void;
+    /** Called on componentWillUnmount() */
+    onUnmount?(error: Error | null, componentStack: string | null, eventId: string | null): void;
+    /** Called before the error is captured by Sentry, allows for you to add tags or context using the scope */
+    beforeCapture?(scope: Scope, error: Error | null, componentStack: string | null): void;
+};
+declare type ErrorBoundaryState = {
+    componentStack: string | null;
+    error: Error | null;
+    eventId: string | null;
+};
+/**
+ * A ErrorBoundary component that logs errors to Sentry. Requires React >= 16.
+ * NOTE: If you are a Sentry user, and you are seeing this stack frame, it means the
+ * Sentry React SDK ErrorBoundary caught an error invoking your application code. This
+ * is expected behavior and NOT indicative of a bug with the Sentry React SDK.
+ */
+declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    componentDidCatch(error: Error, { componentStack }: React.ErrorInfo): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    resetErrorBoundary: () => void;
+    render(): React.ReactNode;
+}
+declare function withErrorBoundary<P extends Record<string, any>>(WrappedComponent: React.ComponentType<P>, errorBoundaryOptions: ErrorBoundaryProps): React.FC<P>;
+export { ErrorBoundary, withErrorBoundary };
+//# sourceMappingURL=errorboundary.d.ts.map

package/esm/errorboundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"errorboundary.d.ts","sourceRoot":"","sources":["../src/errorboundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,mBAAmB,EACnB,KAAK,EAGN,MAAM,iBAAiB,CAAC;AAIzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,iBAAiB,YAAY,CAAC;AAE3C,oBAAY,cAAc,GAAG,CAAC,SAAS,EAAE;IACvC,KAAK,EAAE,KAAK,CAAC;IACb,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,UAAU,IAAI,IAAI,CAAC;CACpB,KAAK,KAAK,CAAC,YAAY,CAAC;AAEzB,oBAAY,kBAAkB,GAAG;IAC/B,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,cAAc,CAAC;IAC/C,yDAAyD;IACzD,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACtE,oCAAoC;IACpC,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,gFAAgF;IAChF,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,EAAE,cAAc,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3F,uCAAuC;IACvC,SAAS,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,EAAE,cAAc,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7F,2GAA2G;IAC3G,aAAa,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI,EAAE,cAAc,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;CACxF,CAAC;AAEF,aAAK,kBAAkB,GAAG;IACxB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB,CAAC;AA6CF;;;;;GAKG;AACH,cAAM,aAAc,SAAQ,KAAK,CAAC,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;IAC1E,KAAK,EAAE,kBAAkB,CAAiB;IAE1C,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,cAAc,EAAE,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI;IAqB1E,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAQ5B,kBAAkB,EAAE,MAAM,IAAI,CAOnC;IAEK,MAAM,IAAI,KAAK,CAAC,SAAS;CA6BjC;AAGD,iBAAS,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACtD,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EACxC,oBAAoB,EAAE,kBAAkB,GACvC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAeb;AAED,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,CAAC"}

package/esm/errorboundary.js

@@ -0,0 +1,136 @@
+import { __assign, __extends, __read, __spread } from "tslib";
+import { captureEvent, captureException, eventFromException, showReportDialog, withScope, } from '@sentry/browser';
+import { logger, parseSemver } from '@sentry/utils';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import * as React from 'react';
+var reactVersion = parseSemver(React.version);
+export var UNKNOWN_COMPONENT = 'unknown';
+var INITIAL_STATE = {
+    componentStack: null,
+    error: null,
+    eventId: null,
+};
+/**
+ * Logs react error boundary errors to Sentry. If on React version >= 17, creates stack trace
+ * from componentStack param, otherwise relies on error param for stacktrace.
+ *
+ * @param error An error captured by React Error Boundary
+ * @param componentStack The component stacktrace
+ */
+function captureReactErrorBoundaryError(error, componentStack) {
+    var errorBoundaryError = new Error(error.message);
+    errorBoundaryError.name = "React ErrorBoundary " + errorBoundaryError.name;
+    errorBoundaryError.stack = componentStack;
+    var errorBoundaryEvent = {};
+    void eventFromException({}, errorBoundaryError).then(function (e) {
+        errorBoundaryEvent = e;
+    });
+    if (errorBoundaryEvent.exception &&
+        Array.isArray(errorBoundaryEvent.exception.values) &&
+        reactVersion.major &&
+        reactVersion.major >= 17) {
+        var originalEvent_1 = {};
+        void eventFromException({}, error).then(function (e) {
+            originalEvent_1 = e;
+        });
+        if (originalEvent_1.exception && Array.isArray(originalEvent_1.exception.values)) {
+            originalEvent_1.exception.values = __spread(errorBoundaryEvent.exception.values, originalEvent_1.exception.values);
+        }
+        return captureEvent(originalEvent_1);
+    }
+    return captureException(error, { contexts: { react: { componentStack: componentStack } } });
+}
+/**
+ * A ErrorBoundary component that logs errors to Sentry. Requires React >= 16.
+ * NOTE: If you are a Sentry user, and you are seeing this stack frame, it means the
+ * Sentry React SDK ErrorBoundary caught an error invoking your application code. This
+ * is expected behavior and NOT indicative of a bug with the Sentry React SDK.
+ */
+var ErrorBoundary = /** @class */ (function (_super) {
+    __extends(ErrorBoundary, _super);
+    function ErrorBoundary() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = INITIAL_STATE;
+        _this.resetErrorBoundary = function () {
+            var onReset = _this.props.onReset;
+            var _a = _this.state, error = _a.error, componentStack = _a.componentStack, eventId = _a.eventId;
+            if (onReset) {
+                onReset(error, componentStack, eventId);
+            }
+            _this.setState(INITIAL_STATE);
+        };
+        return _this;
+    }
+    ErrorBoundary.prototype.componentDidCatch = function (error, _a) {
+        var _this = this;
+        var componentStack = _a.componentStack;
+        var _b = this.props, beforeCapture = _b.beforeCapture, onError = _b.onError, showDialog = _b.showDialog, dialogOptions = _b.dialogOptions;
+        withScope(function (scope) {
+            if (beforeCapture) {
+                beforeCapture(scope, error, componentStack);
+            }
+            var eventId = captureReactErrorBoundaryError(error, componentStack);
+            if (onError) {
+                onError(error, componentStack, eventId);
+            }
+            if (showDialog) {
+                showReportDialog(__assign(__assign({}, dialogOptions), { eventId: eventId }));
+            }
+            // componentDidCatch is used over getDerivedStateFromError
+            // so that componentStack is accessible through state.
+            _this.setState({ error: error, componentStack: componentStack, eventId: eventId });
+        });
+    };
+    ErrorBoundary.prototype.componentDidMount = function () {
+        var onMount = this.props.onMount;
+        if (onMount) {
+            onMount();
+        }
+    };
+    ErrorBoundary.prototype.componentWillUnmount = function () {
+        var _a = this.state, error = _a.error, componentStack = _a.componentStack, eventId = _a.eventId;
+        var onUnmount = this.props.onUnmount;
+        if (onUnmount) {
+            onUnmount(error, componentStack, eventId);
+        }
+    };
+    ErrorBoundary.prototype.render = function () {
+        var _a = this.props, fallback = _a.fallback, children = _a.children;
+        var _b = this.state, error = _b.error, componentStack = _b.componentStack, eventId = _b.eventId;
+        if (error) {
+            var element = undefined;
+            if (typeof fallback === 'function') {
+                element = fallback({ error: error, componentStack: componentStack, resetError: this.resetErrorBoundary, eventId: eventId });
+            }
+            else {
+                element = fallback;
+            }
+            if (React.isValidElement(element)) {
+                return element;
+            }
+            if (fallback) {
+                logger.warn('fallback did not produce a valid ReactElement');
+            }
+            // Fail gracefully if no fallback provided or is not valid
+            return null;
+        }
+        if (typeof children === 'function') {
+            return children();
+        }
+        return children;
+    };
+    return ErrorBoundary;
+}(React.Component));
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function withErrorBoundary(WrappedComponent, errorBoundaryOptions) {
+    var componentDisplayName = WrappedComponent.displayName || WrappedComponent.name || UNKNOWN_COMPONENT;
+    var Wrapped = function (props) { return (React.createElement(ErrorBoundary, __assign({}, errorBoundaryOptions),
+        React.createElement(WrappedComponent, __assign({}, props)))); };
+    Wrapped.displayName = "errorBoundary(" + 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(Wrapped, WrappedComponent);
+    return Wrapped;
+}
+export { ErrorBoundary, withErrorBoundary };
+//# sourceMappingURL=errorboundary.js.map

package/esm/errorboundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"errorboundary.js","sourceRoot":"","sources":["../src/errorboundary.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  captureEvent,\n  captureException,\n  eventFromException,\n  ReportDialogOptions,\n  Scope,\n  showReportDialog,\n  withScope,\n} from '@sentry/browser';\nimport { Event } from '@sentry/types';\nimport { logger, parseSemver } from '@sentry/utils';\nimport hoistNonReactStatics from 'hoist-non-react-statics';\nimport * as React from 'react';\n\nconst reactVersion = parseSemver(React.version);\n\nexport const UNKNOWN_COMPONENT = 'unknown';\n\nexport type FallbackRender = (errorData: {\n  error: Error;\n  componentStack: string | null;\n  eventId: string | null;\n  resetError(): void;\n}) => React.ReactElement;\n\nexport type ErrorBoundaryProps = {\n  /** If a Sentry report dialog should be rendered on error */\n  showDialog?: boolean;\n  /**\n   * Options to be passed into the Sentry report dialog.\n   * No-op if {@link showDialog} is false.\n   */\n  dialogOptions?: ReportDialogOptions;\n  /**\n   * A fallback component that gets rendered when the error boundary encounters an error.\n   *\n   * Can either provide a React Component, or a function that returns React Component as\n   * a valid fallback prop. If a function is provided, the function will be called with\n   * the error, the component stack, and an function that resets the error boundary on error.\n   *\n   */\n  fallback?: React.ReactElement | FallbackRender;\n  /** Called when the error boundary encounters an error */\n  onError?(error: Error, componentStack: string, eventId: string): void;\n  /** Called on componentDidMount() */\n  onMount?(): void;\n  /** Called if resetError() is called from the fallback render props function  */\n  onReset?(error: Error | null, componentStack: string | null, eventId: string | null): void;\n  /** Called on componentWillUnmount() */\n  onUnmount?(error: Error | null, componentStack: string | null, eventId: string | null): void;\n  /** Called before the error is captured by Sentry, allows for you to add tags or context using the scope */\n  beforeCapture?(scope: Scope, error: Error | null, componentStack: string | null): void;\n};\n\ntype ErrorBoundaryState = {\n  componentStack: string | null;\n  error: Error | null;\n  eventId: string | null;\n};\n\nconst INITIAL_STATE = {\n  componentStack: null,\n  error: null,\n  eventId: null,\n};\n\n/**\n * Logs react error boundary errors to Sentry. If on React version >= 17, creates stack trace\n * from componentStack param, otherwise relies on error param for stacktrace.\n *\n * @param error An error captured by React Error Boundary\n * @param componentStack The component stacktrace\n */\nfunction captureReactErrorBoundaryError(error: Error, componentStack: string): string {\n  const errorBoundaryError = new Error(error.message);\n  errorBoundaryError.name = `React ErrorBoundary ${errorBoundaryError.name}`;\n  errorBoundaryError.stack = componentStack;\n\n  let errorBoundaryEvent: Event = {};\n  void eventFromException({}, errorBoundaryError).then(e => {\n    errorBoundaryEvent = e;\n  });\n\n  if (\n    errorBoundaryEvent.exception &&\n    Array.isArray(errorBoundaryEvent.exception.values) &&\n    reactVersion.major &&\n    reactVersion.major >= 17\n  ) {\n    let originalEvent: Event = {};\n    void eventFromException({}, error).then(e => {\n      originalEvent = e;\n    });\n    if (originalEvent.exception && Array.isArray(originalEvent.exception.values)) {\n      originalEvent.exception.values = [...errorBoundaryEvent.exception.values, ...originalEvent.exception.values];\n    }\n\n    return captureEvent(originalEvent);\n  }\n\n  return captureException(error, { contexts: { react: { componentStack } } });\n}\n\n/**\n * A ErrorBoundary component that logs errors to Sentry. Requires React >= 16.\n * NOTE: If you are a Sentry user, and you are seeing this stack frame, it means the\n * Sentry React SDK ErrorBoundary caught an error invoking your application code. This\n * is expected behavior and NOT indicative of a bug with the Sentry React SDK.\n */\nclass ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  public state: ErrorBoundaryState = INITIAL_STATE;\n\n  public componentDidCatch(error: Error, { componentStack }: React.ErrorInfo): void {\n    const { beforeCapture, onError, showDialog, dialogOptions } = this.props;\n\n    withScope(scope => {\n      if (beforeCapture) {\n        beforeCapture(scope, error, componentStack);\n      }\n      const eventId = captureReactErrorBoundaryError(error, componentStack);\n      if (onError) {\n        onError(error, componentStack, eventId);\n      }\n      if (showDialog) {\n        showReportDialog({ ...dialogOptions, eventId });\n      }\n\n      // componentDidCatch is used over getDerivedStateFromError\n      // so that componentStack is accessible through state.\n      this.setState({ error, componentStack, eventId });\n    });\n  }\n\n  public componentDidMount(): void {\n    const { onMount } = this.props;\n    if (onMount) {\n      onMount();\n    }\n  }\n\n  public componentWillUnmount(): void {\n    const { error, componentStack, eventId } = this.state;\n    const { onUnmount } = this.props;\n    if (onUnmount) {\n      onUnmount(error, componentStack, eventId);\n    }\n  }\n\n  public resetErrorBoundary: () => void = () => {\n    const { onReset } = this.props;\n    const { error, componentStack, eventId } = this.state;\n    if (onReset) {\n      onReset(error, componentStack, eventId);\n    }\n    this.setState(INITIAL_STATE);\n  };\n\n  public render(): React.ReactNode {\n    const { fallback, children } = this.props;\n    const { error, componentStack, eventId } = this.state;\n\n    if (error) {\n      let element: React.ReactElement | undefined = undefined;\n      if (typeof fallback === 'function') {\n        element = fallback({ error, componentStack, resetError: this.resetErrorBoundary, eventId });\n      } else {\n        element = fallback;\n      }\n\n      if (React.isValidElement(element)) {\n        return element;\n      }\n\n      if (fallback) {\n        logger.warn('fallback did not produce a valid ReactElement');\n      }\n\n      // Fail gracefully if no fallback provided or is not valid\n      return null;\n    }\n\n    if (typeof children === 'function') {\n      return children();\n    }\n    return children;\n  }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction withErrorBoundary<P extends Record<string, any>>(\n  WrappedComponent: React.ComponentType<P>,\n  errorBoundaryOptions: ErrorBoundaryProps,\n): React.FC<P> {\n  const componentDisplayName = WrappedComponent.displayName || WrappedComponent.name || UNKNOWN_COMPONENT;\n\n  const Wrapped: React.FC<P> = (props: P) => (\n    <ErrorBoundary {...errorBoundaryOptions}>\n      <WrappedComponent {...props} />\n    </ErrorBoundary>\n  );\n\n  Wrapped.displayName = `errorBoundary(${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\nexport { ErrorBoundary, withErrorBoundary };\n"]}

package/esm/index.d.ts

@@ -0,0 +1,8 @@
+export * from '@sentry/browser';
+export { init } from './sdk';
+export { Profiler, withProfiler, useProfiler } from './profiler';
+export { ErrorBoundary, withErrorBoundary } from './errorboundary';
+export { createReduxEnhancer } from './redux';
+export { reactRouterV3Instrumentation } from './reactrouterv3';
+export { reactRouterV4Instrumentation, reactRouterV5Instrumentation, withSentryRouting } from './reactrouter';
+//# sourceMappingURL=index.d.ts.map

package/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAEhC,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,4BAA4B,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,4BAA4B,EAAE,4BAA4B,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC"}

package/esm/index.js

@@ -0,0 +1,8 @@
+export * from '@sentry/browser';
+export { init } from './sdk';
+export { Profiler, withProfiler, useProfiler } from './profiler';
+export { ErrorBoundary, withErrorBoundary } from './errorboundary';
+export { createReduxEnhancer } from './redux';
+export { reactRouterV3Instrumentation } from './reactrouterv3';
+export { reactRouterV4Instrumentation, reactRouterV5Instrumentation, withSentryRouting } from './reactrouter';
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAEhC,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,4BAA4B,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,4BAA4B,EAAE,4BAA4B,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export * from '@sentry/browser';\n\nexport { init } from './sdk';\nexport { Profiler, withProfiler, useProfiler } from './profiler';\nexport { ErrorBoundary, withErrorBoundary } from './errorboundary';\nexport { createReduxEnhancer } from './redux';\nexport { reactRouterV3Instrumentation } from './reactrouterv3';\nexport { reactRouterV4Instrumentation, reactRouterV5Instrumentation, withSentryRouting } from './reactrouter';\n"]}

package/esm/profiler.d.ts

@@ -0,0 +1,55 @@
+import { Hub } from '@sentry/browser';
+import { Span, Transaction } from '@sentry/types';
+import * as React from 'react';
+export declare const UNKNOWN_COMPONENT = "unknown";
+export declare type ProfilerProps = {
+    name: string;
+    disabled?: boolean;
+    includeRender?: boolean;
+    includeUpdates?: boolean;
+    updateProps: {
+        [key: string]: unknown;
+    };
+};
+/**
+ * The Profiler component leverages Sentry's Tracing integration to generate
+ * spans based on component lifecycles.
+ */
+declare class Profiler extends React.Component<ProfilerProps> {
+    /**
+     * The span of the mount activity
+     * Made protected for the React Native SDK to access
+     */
+    protected _mountSpan: Span | undefined;
+    private _mountActivity;
+    static defaultProps: Partial<ProfilerProps>;
+    constructor(props: ProfilerProps);
+    componentDidMount(): void;
+    componentDidUpdate({ updateProps, includeUpdates }: ProfilerProps): void;
+    componentWillUnmount(): void;
+    render(): React.ReactNode;
+}
+/**
+ * withProfiler is a higher order component that wraps a
+ * component in a {@link Profiler} component. It is recommended that
+ * the higher order component be used over the regular {@link Profiler} component.
+ *
+ * @param WrappedComponent component that is wrapped by Profiler
+ * @param options the {@link ProfilerProps} you can pass into the Profiler
+ */
+declare function withProfiler<P extends Record<string, any>>(WrappedComponent: React.ComponentType<P>, options?: Pick<Partial<ProfilerProps>, Exclude<keyof ProfilerProps, 'updateProps'>>): React.FC<P>;
+/**
+ *
+ * `useProfiler` is a React hook that profiles a React component.
+ *
+ * Requires React 16.8 or above.
+ * @param name displayName of component being profiled
+ */
+declare function useProfiler(name: string, options?: {
+    disabled?: boolean;
+    hasRenderSpan?: boolean;
+}): void;
+export { withProfiler, Profiler, useProfiler };
+/** Grabs active transaction off scope */
+export declare function getActiveTransaction<T extends Transaction>(hub?: Hub): T | undefined;
+//# sourceMappingURL=profiler.d.ts.map

package/esm/profiler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"profiler.d.ts","sourceRoot":"","sources":["../src/profiler.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,GAAG,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAiC,IAAI,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGjF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,iBAAiB,YAAY,CAAC;AA8D3C,oBAAY,aAAa,GAAG;IAE1B,IAAI,EAAE,MAAM,CAAC;IAGb,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,WAAW,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC;CACzC,CAAC;AAEF;;;GAGG;AACH,cAAM,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IACnD;;;OAGG;IACH,SAAS,CAAC,UAAU,EAAE,IAAI,GAAG,SAAS,CAAa;IAGnD,OAAO,CAAC,cAAc,CAAuB;IAG7C,OAAc,YAAY,EAAE,OAAO,CAAC,aAAa,CAAC,CAIhD;gBAEiB,KAAK,EAAE,aAAa;IAyBhC,iBAAiB,IAAI,IAAI;IAYzB,kBAAkB,CAAC,EAAE,WAAW,EAAE,cAAqB,EAAE,EAAE,aAAa,GAAG,IAAI;IA2B/E,oBAAoB,IAAI,IAAI;IAe5B,MAAM,IAAI,KAAK,CAAC,SAAS;CAGjC;AAED;;;;;;;GAOG;AACH,iBAAS,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACjD,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EAExC,OAAO,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC,MAAM,aAAa,EAAE,aAAa,CAAC,CAAC,GAClF,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAgBb;AAED;;;;;;GAMG;AACH,iBAAS,WAAW,CAClB,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAA;CAGrD,GACA,IAAI,CAmCN;AAED,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;AAE/C,yCAAyC;AACzC,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,WAAW,EAAE,GAAG,GAAE,GAAqB,GAAG,CAAC,GAAG,SAAS,CASrG"}

package/esm/profiler.js

@@ -0,0 +1,235 @@
+import { __assign, __extends, __read } from "tslib";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { getCurrentHub } from '@sentry/browser';
+import { timestampWithMs } from '@sentry/utils';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import * as React from 'react';
+export var UNKNOWN_COMPONENT = 'unknown';
+var TRACING_GETTER = {
+    id: 'Tracing',
+};
+var globalTracingIntegration = null;
+/** @deprecated remove when @sentry/apm no longer used */
+var getTracingIntegration = function () {
+    if (globalTracingIntegration) {
+        return globalTracingIntegration;
+    }
+    globalTracingIntegration = getCurrentHub().getIntegration(TRACING_GETTER);
+    return globalTracingIntegration;
+};
+/**
+ * pushActivity creates an new react activity.
+ * Is a no-op if Tracing integration is not valid
+ * @param name displayName of component that started activity
+ * @deprecated remove when @sentry/apm no longer used
+ */
+function pushActivity(name, op) {
+    if (globalTracingIntegration === null) {
+        return null;
+    }
+    return globalTracingIntegration.constructor.pushActivity(name, {
+        description: "<" + name + ">",
+        op: "react." + op,
+    });
+}
+/**
+ * popActivity removes a React activity.
+ * Is a no-op if Tracing integration is not valid.
+ * @param activity id of activity that is being popped
+ * @deprecated remove when @sentry/apm no longer used
+ */
+function popActivity(activity) {
+    if (activity === null || globalTracingIntegration === null) {
+        return;
+    }
+    globalTracingIntegration.constructor.popActivity(activity);
+}
+/**
+ * Obtain a span given an activity id.
+ * Is a no-op if Tracing integration is not valid.
+ * @param activity activity id associated with obtained span
+ * @deprecated remove when @sentry/apm no longer used
+ */
+function getActivitySpan(activity) {
+    if (activity === null || globalTracingIntegration === null) {
+        return undefined;
+    }
+    return globalTracingIntegration.constructor.getActivitySpan(activity);
+}
+/**
+ * The Profiler component leverages Sentry's Tracing integration to generate
+ * spans based on component lifecycles.
+ */
+var Profiler = /** @class */ (function (_super) {
+    __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;
+        // The activity representing how long it takes to mount a component.
+        _this._mountActivity = null;
+        var _a = _this.props, name = _a.name, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
+        if (disabled) {
+            return _this;
+        }
+        // If they are using @sentry/apm, we need to push/pop activities
+        // eslint-disable-next-line deprecation/deprecation
+        if (getTracingIntegration()) {
+            // eslint-disable-next-line deprecation/deprecation
+            _this._mountActivity = pushActivity(name, 'mount');
+        }
+        else {
+            var activeTransaction = getActiveTransaction();
+            if (activeTransaction) {
+                _this._mountSpan = activeTransaction.startChild({
+                    description: "<" + name + ">",
+                    op: 'react.mount',
+                });
+            }
+        }
+        return _this;
+    }
+    // If a component mounted, we can finish the mount activity.
+    Profiler.prototype.componentDidMount = function () {
+        if (this._mountSpan) {
+            this._mountSpan.finish();
+        }
+        else {
+            // eslint-disable-next-line deprecation/deprecation
+            this._mountSpan = getActivitySpan(this._mountActivity);
+            // eslint-disable-next-line deprecation/deprecation
+            popActivity(this._mountActivity);
+            this._mountActivity = null;
+        }
+    };
+    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 = timestampWithMs();
+                this._mountSpan.startChild({
+                    data: {
+                        changedProps: changedProps,
+                    },
+                    description: "<" + this.props.name + ">",
+                    endTimestamp: now,
+                    op: "react.update",
+                    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: timestampWithMs(),
+                op: "react.render",
+                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));
+/**
+ * withProfiler is a higher order component that wraps a
+ * component in a {@link Profiler} component. It is recommended that
+ * the higher order component be used over the regular {@link Profiler} component.
+ *
+ * @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 || UNKNOWN_COMPONENT;
+    var Wrapped = function (props) { return (React.createElement(Profiler, __assign({}, options, { name: componentDisplayName, updateProps: props }),
+        React.createElement(WrappedComponent, __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
+    hoistNonReactStatics(Wrapped, WrappedComponent);
+    return Wrapped;
+}
+/**
+ *
+ * `useProfiler` is a React hook that profiles a React component.
+ *
+ * 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 = __read(React.useState(function () {
+        if (options && options.disabled) {
+            return undefined;
+        }
+        var activeTransaction = getActiveTransaction();
+        if (activeTransaction) {
+            return activeTransaction.startChild({
+                description: "<" + name + ">",
+                op: 'react.mount',
+            });
+        }
+        return undefined;
+    }), 1), mountSpan = _a[0];
+    React.useEffect(function () {
+        if (mountSpan) {
+            mountSpan.finish();
+        }
+        return function () {
+            if (mountSpan && options.hasRenderSpan) {
+                mountSpan.startChild({
+                    description: "<" + name + ">",
+                    endTimestamp: timestampWithMs(),
+                    op: "react.render",
+                    startTimestamp: mountSpan.endTimestamp,
+                });
+            }
+        };
+        // We only want this to run once.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+}
+export { withProfiler, Profiler, useProfiler };
+/** Grabs active transaction off scope */
+export function getActiveTransaction(hub) {
+    if (hub === void 0) { hub = getCurrentHub(); }
+    if (hub) {
+        var scope = hub.getScope();
+        if (scope) {
+            return scope.getTransaction();
+        }
+    }
+    return undefined;
+}
+//# sourceMappingURL=profiler.js.map