|
| 1 | +import { getCurrentHub } from '@sentry/browser'; |
| 2 | +import { Integration, IntegrationClass } from '@sentry/types'; |
| 3 | +import { logger } from '@sentry/utils'; |
| 4 | +import * as hoistNonReactStatic from 'hoist-non-react-statics'; |
| 5 | +import * as React from 'react'; |
| 6 | + |
| 7 | +export const UNKNOWN_COMPONENT = 'unknown'; |
| 8 | + |
| 9 | +const TRACING_GETTER = ({ |
| 10 | + id: 'Tracing', |
| 11 | +} as any) as IntegrationClass<Integration>; |
| 12 | + |
| 13 | +/** |
| 14 | + * |
| 15 | + * Based on implementation from Preact: |
| 16 | + * https:github.com/preactjs/preact/blob/9a422017fec6dab287c77c3aef63c7b2fef0c7e1/hooks/src/index.js#L301-L313 |
| 17 | + * |
| 18 | + * Schedule a callback to be invoked after the browser has a chance to paint a new frame. |
| 19 | + * Do this by combining requestAnimationFrame (rAF) + setTimeout to invoke a callback after |
| 20 | + * the next browser frame. |
| 21 | + * |
| 22 | + * Also, schedule a timeout in parallel to the the rAF to ensure the callback is invoked |
| 23 | + * even if RAF doesn't fire (for example if the browser tab is not visible) |
| 24 | + * |
| 25 | + * This is what we use to tell if a component activity has finished |
| 26 | + * |
| 27 | + */ |
| 28 | +function afterNextFrame(callback: Function): void { |
| 29 | + let timeout: number | undefined; |
| 30 | + let raf: number; |
| 31 | + |
| 32 | + const done = () => { |
| 33 | + window.clearTimeout(timeout); |
| 34 | + window.cancelAnimationFrame(raf); |
| 35 | + window.setTimeout(callback); |
| 36 | + }; |
| 37 | + |
| 38 | + raf = window.requestAnimationFrame(done); |
| 39 | + timeout = window.setTimeout(done, 100); |
| 40 | +} |
| 41 | + |
| 42 | +const getInitActivity = (componentDisplayName: string): number | null => { |
| 43 | + const tracingIntegration = getCurrentHub().getIntegration(TRACING_GETTER); |
| 44 | + |
| 45 | + if (tracingIntegration !== null) { |
| 46 | + // tslint:disable-next-line:no-unsafe-any |
| 47 | + const activity = (tracingIntegration as any).constructor.pushActivity(componentDisplayName, { |
| 48 | + description: `<${componentDisplayName}>`, |
| 49 | + op: 'react', |
| 50 | + }); |
| 51 | + |
| 52 | + // tslint:disable-next-line: no-unsafe-any |
| 53 | + return activity; |
| 54 | + } |
| 55 | + |
| 56 | + logger.warn( |
| 57 | + `Unable to profile component ${componentDisplayName} due to invalid Tracing Integration. Please make sure to setup the Tracing integration.`, |
| 58 | + ); |
| 59 | + return null; |
| 60 | +}; |
| 61 | + |
| 62 | +interface ProfilerProps { |
| 63 | + componentDisplayName?: string; |
| 64 | +} |
| 65 | + |
| 66 | +class Profiler extends React.Component<ProfilerProps> { |
| 67 | + public activity: number | null; |
| 68 | + public constructor(props: ProfilerProps) { |
| 69 | + super(props); |
| 70 | + |
| 71 | + const { componentDisplayName = UNKNOWN_COMPONENT } = this.props; |
| 72 | + |
| 73 | + this.activity = getInitActivity(componentDisplayName); |
| 74 | + } |
| 75 | + |
| 76 | + public componentDidMount(): void { |
| 77 | + afterNextFrame(this.finishProfile); |
| 78 | + } |
| 79 | + |
| 80 | + public componentWillUnmount(): void { |
| 81 | + afterNextFrame(this.finishProfile); |
| 82 | + } |
| 83 | + |
| 84 | + public finishProfile = () => { |
| 85 | + if (!this.activity) { |
| 86 | + return; |
| 87 | + } |
| 88 | + |
| 89 | + const tracingIntegration = getCurrentHub().getIntegration(TRACING_GETTER); |
| 90 | + if (tracingIntegration !== null) { |
| 91 | + // tslint:disable-next-line:no-unsafe-any |
| 92 | + (tracingIntegration as any).constructor.popActivity(this.activity); |
| 93 | + this.activity = null; |
| 94 | + } |
| 95 | + }; |
| 96 | + |
| 97 | + public render(): React.ReactNode { |
| 98 | + return this.props.children; |
| 99 | + } |
| 100 | +} |
| 101 | + |
| 102 | +function withProfiler<P extends object>(WrappedComponent: React.ComponentType<P>): React.FC<P> { |
| 103 | + const componentDisplayName = WrappedComponent.displayName || WrappedComponent.name || UNKNOWN_COMPONENT; |
| 104 | + |
| 105 | + const Wrapped: React.FC<P> = (props: P) => ( |
| 106 | + <Profiler componentDisplayName={componentDisplayName}> |
| 107 | + <WrappedComponent {...props} /> |
| 108 | + </Profiler> |
| 109 | + ); |
| 110 | + |
| 111 | + Wrapped.displayName = `profiler(${componentDisplayName})`; |
| 112 | + |
| 113 | + // Copy over static methods from Wrapped component to Profiler HOC |
| 114 | + // See: https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over |
| 115 | + hoistNonReactStatic(Wrapped, WrappedComponent); |
| 116 | + return Wrapped; |
| 117 | +} |
| 118 | + |
| 119 | +export { withProfiler, Profiler }; |
0 commit comments