@sentry/react - npm Package Compare versions

Comparing version 5.17.0 to 5.18.0

dist/index.d.ts

 export * from '@sentry/browser';
-export { Profiler, withProfiler } from './profiler';
+export { Profiler, withProfiler, useProfiler } from './profiler';
+export { ErrorBoundary, withErrorBoundary } from './errorboundary';
 //# sourceMappingURL=index.d.ts.map

dist/index.js

 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+var browser_1 = require("@sentry/browser");
+function createReactEventProcessor() {
+    if (browser_1.addGlobalEventProcessor) {
+        browser_1.addGlobalEventProcessor(function (event) {
+            event.sdk = tslib_1.__assign(tslib_1.__assign({}, event.sdk), { name: 'sentry.javascript.react', packages: tslib_1.__spread(((event.sdk && event.sdk.packages) || []), [
+                    {
+                        name: 'npm:@sentry/react',
+                        version: browser_1.SDK_VERSION,
+                    },
+                ]), version: browser_1.SDK_VERSION });
+            return event;
+        });
+    }
+}
 tslib_1.__exportStar(require("@sentry/browser"), exports);
@@ -7,2 +21,7 @@ var profiler_1 = require("./profiler");
 Object.defineProperty(exports, "withProfiler", { enumerable: true, get: function () { return profiler_1.withProfiler; } });
+Object.defineProperty(exports, "useProfiler", { enumerable: true, get: function () { return profiler_1.useProfiler; } });
+var errorboundary_1 = require("./errorboundary");
+Object.defineProperty(exports, "ErrorBoundary", { enumerable: true, get: function () { return errorboundary_1.ErrorBoundary; } });
+Object.defineProperty(exports, "withErrorBoundary", { enumerable: true, get: function () { return errorboundary_1.withErrorBoundary; } });
+createReactEventProcessor();
 //# sourceMappingURL=index.js.map

dist/profiler.d.ts

@@ -0,16 +1,49 @@
+import { Span } from '@sentry/types';
 import * as React from 'react';
 export declare const UNKNOWN_COMPONENT = "unknown";
-interface ProfilerProps {
-    componentDisplayName?: string;
-}
+export declare type ProfilerProps = {
+    name: string;
+    disabled?: boolean;
+    hasRenderSpan?: boolean;
+    hasUpdateSpan?: boolean;
+    updateProps: {
+        [key: string]: any;
+    };
+};
+/**
+ * The Profiler component leverages Sentry's Tracing integration to generate
+ * spans based on component lifecycles.
+ */
 declare class Profiler extends React.Component<ProfilerProps> {
-    activity: number | null;
+    mountActivity: number | null;
+    mountSpan: Span | undefined;
+    renderSpan: Span | undefined;
+    static defaultProps: Partial<ProfilerProps>;
     constructor(props: ProfilerProps);
     componentDidMount(): void;
+    componentDidUpdate({ updateProps, hasUpdateSpan }: ProfilerProps): void;
     componentWillUnmount(): void;
-    finishProfile: () => void;
     render(): React.ReactNode;
 }
-declare function withProfiler<P extends object>(WrappedComponent: React.ComponentType<P>): React.FC<P>;
-export { withProfiler, Profiler };
+/**
+ * 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 object>(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 };
 //# sourceMappingURL=profiler.d.ts.map

dist/profiler.js

 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Profiler = exports.withProfiler = exports.UNKNOWN_COMPONENT = void 0;
+exports.useProfiler = exports.Profiler = exports.withProfiler = exports.UNKNOWN_COMPONENT = void 0;
 var tslib_1 = require("tslib");
@@ -12,42 +12,61 @@ var browser_1 = require("@sentry/browser");
 };
+var globalTracingIntegration = null;
+var getTracingIntegration = function () {
+    if (globalTracingIntegration) {
+        return globalTracingIntegration;
+    }
+    globalTracingIntegration = browser_1.getCurrentHub().getIntegration(TRACING_GETTER);
+    return globalTracingIntegration;
+};
 /**
- *
- * Based on implementation from Preact:
- * https:github.com/preactjs/preact/blob/9a422017fec6dab287c77c3aef63c7b2fef0c7e1/hooks/src/index.js#L301-L313
- *
- * Schedule a callback to be invoked after the browser has a chance to paint a new frame.
- * Do this by combining requestAnimationFrame (rAF) + setTimeout to invoke a callback after
- * the next browser frame.
- *
- * Also, schedule a timeout in parallel to the the rAF to ensure the callback is invoked
- * even if RAF doesn't fire (for example if the browser tab is not visible)
- *
- * This is what we use to tell if a component activity has finished
- *
+ * Warn if tracing integration not configured. Will only warn once.
  */
-function afterNextFrame(callback) {
-    var timeout;
-    var raf;
-    var done = function () {
-        window.clearTimeout(timeout);
-        window.cancelAnimationFrame(raf);
-        window.setTimeout(callback);
-    };
-    raf = window.requestAnimationFrame(done);
-    timeout = window.setTimeout(done, 100);
+function warnAboutTracing(name) {
+    if (globalTracingIntegration === null) {
+        utils_1.logger.warn("Unable to profile component " + name + " due to invalid Tracing Integration. Please make sure the Tracing integration is setup properly.");
+    }
 }
-var getInitActivity = function (componentDisplayName) {
-    var tracingIntegration = browser_1.getCurrentHub().getIntegration(TRACING_GETTER);
-    if (tracingIntegration !== null) {
-        // tslint:disable-next-line:no-unsafe-any
-        var activity = tracingIntegration.constructor.pushActivity(componentDisplayName, {
-            description: "<" + componentDisplayName + ">",
-            op: 'react',
-        });
-        // tslint:disable-next-line: no-unsafe-any
-        return activity;
+/**
+ * pushActivity creates an new react activity.
+ * Is a no-op if Tracing integration is not valid
+ * @param name displayName of component that started activity
+ */
+function pushActivity(name, op) {
+    if (globalTracingIntegration === null) {
+        return null;
     }
-    utils_1.logger.warn("Unable to profile component " + componentDisplayName + " due to invalid Tracing Integration. Please make sure to setup the Tracing integration.");
-    return null;
-};
+    // tslint:disable-next-line:no-unsafe-any
+    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
+ */
+function popActivity(activity) {
+    if (activity === null || globalTracingIntegration === null) {
+        return;
+    }
+    // tslint:disable-next-line:no-unsafe-any
+    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
+ */
+function getActivitySpan(activity) {
+    if (activity === null || globalTracingIntegration === null) {
+        return undefined;
+    }
+    // tslint:disable-next-line:no-unsafe-any
+    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) {
@@ -57,22 +76,66 @@ tslib_1.__extends(Profiler, _super);
         var _this = _super.call(this, props) || this;
-        _this.finishProfile = function () {
-            if (!_this.activity) {
-                return;
-            }
-            var tracingIntegration = browser_1.getCurrentHub().getIntegration(TRACING_GETTER);
-            if (tracingIntegration !== null) {
-                // tslint:disable-next-line:no-unsafe-any
-                tracingIntegration.constructor.popActivity(_this.activity);
-                _this.activity = null;
-            }
-        };
-        var _a = _this.props.componentDisplayName, componentDisplayName = _a === void 0 ? exports.UNKNOWN_COMPONENT : _a;
-        _this.activity = getInitActivity(componentDisplayName);
+        // The activity representing how long it takes to mount a component.
+        _this.mountActivity = null;
+        // The span of the mount activity
+        _this.mountSpan = undefined;
+        // The span of the render
+        _this.renderSpan = undefined;
+        var _a = _this.props, name = _a.name, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
+        if (disabled) {
+            return _this;
+        }
+        if (getTracingIntegration()) {
+            _this.mountActivity = pushActivity(name, 'mount');
+        }
+        else {
+            warnAboutTracing(name);
+        }
         return _this;
     }
+    // If a component mounted, we can finish the mount activity.
     Profiler.prototype.componentDidMount = function () {
-        afterNextFrame(this.finishProfile);
+        this.mountSpan = getActivitySpan(this.mountActivity);
+        popActivity(this.mountActivity);
+        this.mountActivity = null;
     };
+    Profiler.prototype.componentDidUpdate = function (_a) {
+        var _this = this;
+        var updateProps = _a.updateProps, _b = _a.hasUpdateSpan, hasUpdateSpan = _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 (hasUpdateSpan && 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: "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 () {
-        afterNextFrame(this.finishProfile);
+        var _a = this.props, name = _a.name, _b = _a.hasRenderSpan, hasRenderSpan = _b === void 0 ? true : _b;
+        if (this.mountSpan && hasRenderSpan) {
+            // 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: "react.render",
+                startTimestamp: this.mountSpan.endTimestamp,
+            });
+        }
     };
@@ -82,8 +145,23 @@ Profiler.prototype.render = function () {
     };
+    Profiler.defaultProps = {
+        disabled: false,
+        hasRenderSpan: true,
+        hasUpdateSpan: true,
+    };
     return Profiler;
 }(React.Component));
 exports.Profiler = Profiler;
-function withProfiler(WrappedComponent) {
-    var componentDisplayName = WrappedComponent.displayName || WrappedComponent.name || exports.UNKNOWN_COMPONENT;
-    var Wrapped = function (props) { return (React.createElement(Profiler, { componentDisplayName: componentDisplayName },
+/**
+ * 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 || 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)))); };
@@ -97,2 +175,40 @@ Wrapped.displayName = "profiler(" + componentDisplayName + ")";
 exports.withProfiler = withProfiler;
+/**
+ *
+ * `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 = tslib_1.__read(React.useState(function () {
+        if (options && options.disabled) {
+            return null;
+        }
+        if (getTracingIntegration()) {
+            return pushActivity(name, 'mount');
+        }
+        warnAboutTracing(name);
+        return null;
+    }), 1), mountActivity = _a[0];
+    React.useEffect(function () {
+        var mountSpan = getActivitySpan(mountActivity);
+        popActivity(mountActivity);
+        return function () {
+            if (mountSpan && options.hasRenderSpan) {
+                mountSpan.startChild({
+                    description: "<" + name + ">",
+                    endTimestamp: utils_1.timestampWithMs(),
+                    op: "react.render",
+                    startTimestamp: mountSpan.endTimestamp,
+                });
+            }
+        };
+    }, []);
+}
+exports.useProfiler = useProfiler;
 //# sourceMappingURL=profiler.js.map

esm/index.d.ts

 export * from '@sentry/browser';
-export { Profiler, withProfiler } from './profiler';
+export { Profiler, withProfiler, useProfiler } from './profiler';
+export { ErrorBoundary, withErrorBoundary } from './errorboundary';
 //# sourceMappingURL=index.d.ts.map

esm/index.js

@@ -0,3 +1,20 @@
+import { __assign, __read, __spread } from "tslib";
+import { addGlobalEventProcessor, SDK_VERSION } from '@sentry/browser';
+function createReactEventProcessor() {
+    if (addGlobalEventProcessor) {
+        addGlobalEventProcessor(function (event) {
+            event.sdk = __assign(__assign({}, event.sdk), { name: 'sentry.javascript.react', packages: __spread(((event.sdk && event.sdk.packages) || []), [
+                    {
+                        name: 'npm:@sentry/react',
+                        version: SDK_VERSION,
+                    },
+                ]), version: SDK_VERSION });
+            return event;
+        });
+    }
+}
 export * from '@sentry/browser';
-export { Profiler, withProfiler } from './profiler';
+export { Profiler, withProfiler, useProfiler } from './profiler';
+export { ErrorBoundary, withErrorBoundary } from './errorboundary';
+createReactEventProcessor();
 //# sourceMappingURL=index.js.map

esm/profiler.d.ts

@@ -0,16 +1,49 @@
+import { Span } from '@sentry/types';
 import * as React from 'react';
 export declare const UNKNOWN_COMPONENT = "unknown";
-interface ProfilerProps {
-    componentDisplayName?: string;
-}
+export declare type ProfilerProps = {
+    name: string;
+    disabled?: boolean;
+    hasRenderSpan?: boolean;
+    hasUpdateSpan?: boolean;
+    updateProps: {
+        [key: string]: any;
+    };
+};
+/**
+ * The Profiler component leverages Sentry's Tracing integration to generate
+ * spans based on component lifecycles.
+ */
 declare class Profiler extends React.Component<ProfilerProps> {
-    activity: number | null;
+    mountActivity: number | null;
+    mountSpan: Span | undefined;
+    renderSpan: Span | undefined;
+    static defaultProps: Partial<ProfilerProps>;
     constructor(props: ProfilerProps);
     componentDidMount(): void;
+    componentDidUpdate({ updateProps, hasUpdateSpan }: ProfilerProps): void;
     componentWillUnmount(): void;
-    finishProfile: () => void;
     render(): React.ReactNode;
 }
-declare function withProfiler<P extends object>(WrappedComponent: React.ComponentType<P>): React.FC<P>;
-export { withProfiler, Profiler };
+/**
+ * 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 object>(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 };
 //# sourceMappingURL=profiler.d.ts.map

esm/profiler.js

@@ -1,4 +0,4 @@
-import { __assign, __extends } from "tslib";
+import { __assign, __extends, __read } from "tslib";
 import { getCurrentHub } from '@sentry/browser';
-import { logger } from '@sentry/utils';
+import { logger, timestampWithMs } from '@sentry/utils';
 import * as hoistNonReactStatic from 'hoist-non-react-statics';
@@ -10,42 +10,61 @@ import * as React from 'react';
 };
+var globalTracingIntegration = null;
+var getTracingIntegration = function () {
+    if (globalTracingIntegration) {
+        return globalTracingIntegration;
+    }
+    globalTracingIntegration = getCurrentHub().getIntegration(TRACING_GETTER);
+    return globalTracingIntegration;
+};
 /**
- *
- * Based on implementation from Preact:
- * https:github.com/preactjs/preact/blob/9a422017fec6dab287c77c3aef63c7b2fef0c7e1/hooks/src/index.js#L301-L313
- *
- * Schedule a callback to be invoked after the browser has a chance to paint a new frame.
- * Do this by combining requestAnimationFrame (rAF) + setTimeout to invoke a callback after
- * the next browser frame.
- *
- * Also, schedule a timeout in parallel to the the rAF to ensure the callback is invoked
- * even if RAF doesn't fire (for example if the browser tab is not visible)
- *
- * This is what we use to tell if a component activity has finished
- *
+ * Warn if tracing integration not configured. Will only warn once.
  */
-function afterNextFrame(callback) {
-    var timeout;
-    var raf;
-    var done = function () {
-        window.clearTimeout(timeout);
-        window.cancelAnimationFrame(raf);
-        window.setTimeout(callback);
-    };
-    raf = window.requestAnimationFrame(done);
-    timeout = window.setTimeout(done, 100);
+function warnAboutTracing(name) {
+    if (globalTracingIntegration === null) {
+        logger.warn("Unable to profile component " + name + " due to invalid Tracing Integration. Please make sure the Tracing integration is setup properly.");
+    }
 }
-var getInitActivity = function (componentDisplayName) {
-    var tracingIntegration = getCurrentHub().getIntegration(TRACING_GETTER);
-    if (tracingIntegration !== null) {
-        // tslint:disable-next-line:no-unsafe-any
-        var activity = tracingIntegration.constructor.pushActivity(componentDisplayName, {
-            description: "<" + componentDisplayName + ">",
-            op: 'react',
-        });
-        // tslint:disable-next-line: no-unsafe-any
-        return activity;
+/**
+ * pushActivity creates an new react activity.
+ * Is a no-op if Tracing integration is not valid
+ * @param name displayName of component that started activity
+ */
+function pushActivity(name, op) {
+    if (globalTracingIntegration === null) {
+        return null;
     }
-    logger.warn("Unable to profile component " + componentDisplayName + " due to invalid Tracing Integration. Please make sure to setup the Tracing integration.");
-    return null;
-};
+    // tslint:disable-next-line:no-unsafe-any
+    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
+ */
+function popActivity(activity) {
+    if (activity === null || globalTracingIntegration === null) {
+        return;
+    }
+    // tslint:disable-next-line:no-unsafe-any
+    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
+ */
+function getActivitySpan(activity) {
+    if (activity === null || globalTracingIntegration === null) {
+        return undefined;
+    }
+    // tslint:disable-next-line:no-unsafe-any
+    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) {
@@ -55,22 +74,66 @@ __extends(Profiler, _super);
         var _this = _super.call(this, props) || this;
-        _this.finishProfile = function () {
-            if (!_this.activity) {
-                return;
-            }
-            var tracingIntegration = getCurrentHub().getIntegration(TRACING_GETTER);
-            if (tracingIntegration !== null) {
-                // tslint:disable-next-line:no-unsafe-any
-                tracingIntegration.constructor.popActivity(_this.activity);
-                _this.activity = null;
-            }
-        };
-        var _a = _this.props.componentDisplayName, componentDisplayName = _a === void 0 ? UNKNOWN_COMPONENT : _a;
-        _this.activity = getInitActivity(componentDisplayName);
+        // The activity representing how long it takes to mount a component.
+        _this.mountActivity = null;
+        // The span of the mount activity
+        _this.mountSpan = undefined;
+        // The span of the render
+        _this.renderSpan = undefined;
+        var _a = _this.props, name = _a.name, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
+        if (disabled) {
+            return _this;
+        }
+        if (getTracingIntegration()) {
+            _this.mountActivity = pushActivity(name, 'mount');
+        }
+        else {
+            warnAboutTracing(name);
+        }
         return _this;
     }
+    // If a component mounted, we can finish the mount activity.
     Profiler.prototype.componentDidMount = function () {
-        afterNextFrame(this.finishProfile);
+        this.mountSpan = getActivitySpan(this.mountActivity);
+        popActivity(this.mountActivity);
+        this.mountActivity = null;
     };
+    Profiler.prototype.componentDidUpdate = function (_a) {
+        var _this = this;
+        var updateProps = _a.updateProps, _b = _a.hasUpdateSpan, hasUpdateSpan = _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 (hasUpdateSpan && 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 () {
-        afterNextFrame(this.finishProfile);
+        var _a = this.props, name = _a.name, _b = _a.hasRenderSpan, hasRenderSpan = _b === void 0 ? true : _b;
+        if (this.mountSpan && hasRenderSpan) {
+            // 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,
+            });
+        }
     };
@@ -80,7 +143,22 @@ Profiler.prototype.render = function () {
     };
+    Profiler.defaultProps = {
+        disabled: false,
+        hasRenderSpan: true,
+        hasUpdateSpan: true,
+    };
     return Profiler;
 }(React.Component));
-function withProfiler(WrappedComponent) {
-    var componentDisplayName = WrappedComponent.displayName || WrappedComponent.name || UNKNOWN_COMPONENT;
-    var Wrapped = function (props) { return (React.createElement(Profiler, { componentDisplayName: componentDisplayName },
+/**
+ * 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)))); };
@@ -93,3 +171,40 @@ Wrapped.displayName = "profiler(" + componentDisplayName + ")";
 }
-export { withProfiler, Profiler };
+/**
+ *
+ * `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 null;
+        }
+        if (getTracingIntegration()) {
+            return pushActivity(name, 'mount');
+        }
+        warnAboutTracing(name);
+        return null;
+    }), 1), mountActivity = _a[0];
+    React.useEffect(function () {
+        var mountSpan = getActivitySpan(mountActivity);
+        popActivity(mountActivity);
+        return function () {
+            if (mountSpan && options.hasRenderSpan) {
+                mountSpan.startChild({
+                    description: "<" + name + ">",
+                    endTimestamp: timestampWithMs(),
+                    op: "react.render",
+                    startTimestamp: mountSpan.endTimestamp,
+                });
+            }
+        };
+    }, []);
+}
+export { withProfiler, Profiler, useProfiler };
 //# sourceMappingURL=profiler.js.map

package.json

 {
   "name": "@sentry/react",
-  "version": "5.17.0",
+  "version": "5.18.0",
   "description": "Offical Sentry SDK for React.js",
@@ -19,5 +19,5 @@ "repository": "git://github.com/getsentry/sentry-javascript.git",
   "dependencies": {
-    "@sentry/browser": "5.17.0",
-    "@sentry/types": "5.17.0",
-    "@sentry/utils": "5.17.0",
+    "@sentry/browser": "5.18.0",
+    "@sentry/types": "5.18.0",
+    "@sentry/utils": "5.18.0",
     "hoist-non-react-statics": "^3.3.2",
@@ -31,6 +31,8 @@ "tslib": "^1.9.3"
   "devDependencies": {
+    "@testing-library/react": "^10.0.6",
+    "@testing-library/react-hooks": "^3.3.0",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/react": "^16.9.35",
-    "@types/react-test-renderer": "^16.9.2",
     "jest": "^24.7.1",
+    "jsdom": "^16.2.2",
     "npm-run-all": "^4.1.2",
@@ -45,2 +47,3 @@ "prettier": "^1.17.0",
     "tslint-react": "^5.0.0",
+    "tslint-react-hooks": "^2.2.2",
     "typescript": "^3.5.1"
@@ -47,0 +50,0 @@ },

README.md

@@ -14,1 +14,80 @@ <p align="center">
 - [TypeDoc](http://getsentry.github.io/sentry-javascript/)
+
+## General
+
+This package is a wrapper around `@sentry/browser`, with added functionality related to React. All methods available in
+`@sentry/browser` can be imported from `@sentry/react`.
+
+To use this SDK, call `Sentry.init(options)` before you mount your React component.
+
+```javascript
+import React from 'react';
+import ReactDOM from "react-dom";
+import * as Sentry from '@sentry/react';
+
+Sentry.init({
+  dsn: '__DSN__',
+  // ...
+});
+
+// ...
+
+ReactDOM.render(<App />, rootNode);
+
+// Can also use with React Concurrent Mode
+// ReactDOM.createRoot(rootNode).render(<App />);
+```
+
+### ErrorBoundary
+
+`@sentry/react` exports an ErrorBoundary component that will automatically send Javascript errors from inside a
+component tree to Sentry, and set a fallback UI. Requires React version >= 16.
+
+> app.js
+```javascript
+import React from 'react';
+import * as Sentry from '@sentry/react';
+
+function FallbackComponent() {
+  return (
+    <div>An error has occured</div>
+  )
+}
+
+class App extends React.Component {
+  render() {
+    return (
+      <Sentry.ErrorBoundary fallback={FallbackComponent} showDialog>
+        <OtherComponents />
+      </Sentry.ErrorBoundary>
+    )
+  }
+}
+
+export default App;
+```
+
+### Profiler
+
+`@sentry/react` exports a Profiler component that leverages the `@sentry/apm` Tracing integration to add React related
+spans to transactions. If the Tracing integration is not enabled, the Profiler component will not work. The Profiler
+tracks component mount, render duration and updates. Requires React version >= 15.
+
+> app.js
+```javascript
+import React from 'react';
+import * as Sentry from '@sentry/react';
+
+class App extends React.Component {
+  render() {
+    return (
+      <FancyComponent>
+        <InsideComponent someProp={2} />
+        <AnotherComponent />
+      </FancyComponent>
+    )
+  }
+}
+
+export default Sentry.withProfiler(App);
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

90949

increased by218.23%

Number of package files

27

increased by42.11%

Lines of code

831

increased by269.33%

Number of lines in readme file

93

increased by564.29%

Worsened metrics

Dev dependency count

17

increased by21.43%

Dependency changes

• + Added@sentry/browser@5.18.0(transitive)

• + Added@sentry/core@5.18.0(transitive)

• + Added@sentry/hub@5.18.0(transitive)

• + Added@sentry/minimal@5.18.0(transitive)

• + Added@sentry/types@5.18.0(transitive)

• + Added@sentry/utils@5.18.0(transitive)

• - Removed@sentry/browser@5.17.0(transitive)

• - Removed@sentry/core@5.17.0(transitive)

• - Removed@sentry/hub@5.17.0(transitive)

• - Removed@sentry/minimal@5.17.0(transitive)

• - Removed@sentry/types@5.17.0(transitive)

• - Removed@sentry/utils@5.17.0(transitive)

• Updated@sentry/browser@5.18.0

• Updated@sentry/types@5.18.0

• Updated@sentry/utils@5.18.0