@sentry/react 7.107.0 → 8.0.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -10
- package/cjs/errorboundary.js +6 -7
- package/cjs/errorboundary.js.map +1 -1
- package/cjs/index.js +10 -7
- package/cjs/index.js.map +1 -1
- package/cjs/profiler.js +24 -16
- package/cjs/profiler.js.map +1 -1
- package/cjs/reactrouter.js +51 -94
- package/cjs/reactrouter.js.map +1 -1
- package/cjs/reactrouterv3.js +38 -85
- package/cjs/reactrouterv3.js.map +1 -1
- package/cjs/reactrouterv6.js +27 -79
- package/cjs/reactrouterv6.js.map +1 -1
- package/cjs/redux.js +1 -1
- package/cjs/redux.js.map +1 -1
- package/esm/errorboundary.js +6 -7
- package/esm/errorboundary.js.map +1 -1
- package/esm/index.js +3 -3
- package/esm/package.json +1 -0
- package/esm/profiler.js +25 -17
- package/esm/profiler.js.map +1 -1
- package/esm/reactrouter.js +53 -94
- package/esm/reactrouter.js.map +1 -1
- package/esm/reactrouterv3.js +39 -85
- package/esm/reactrouterv3.js.map +1 -1
- package/esm/reactrouterv6.js +29 -80
- package/esm/reactrouterv6.js.map +1 -1
- package/esm/redux.js +2 -2
- package/esm/redux.js.map +1 -1
- package/package.json +20 -7
- package/types/errorboundary.d.ts +3 -2
- package/types/errorboundary.d.ts.map +1 -1
- package/types/index.d.ts +3 -3
- package/types/index.d.ts.map +1 -1
- package/types/profiler.d.ts.map +1 -1
- package/types/reactrouter.d.ts +1 -9
- package/types/reactrouter.d.ts.map +1 -1
- package/types/reactrouterv3.d.ts +1 -12
- package/types/reactrouterv3.d.ts.map +1 -1
- package/types/reactrouterv6.d.ts +1 -5
- package/types/reactrouterv6.d.ts.map +1 -1
- package/types/types.d.ts +0 -2
- package/types/types.d.ts.map +1 -1
- package/types-ts3.8/errorboundary.d.ts +3 -2
- package/types-ts3.8/index.d.ts +3 -3
- package/types-ts3.8/reactrouter.d.ts +1 -9
- package/types-ts3.8/reactrouterv3.d.ts +1 -12
- package/types-ts3.8/reactrouterv6.d.ts +1 -5
- package/types-ts3.8/types.d.ts +0 -2
package/README.md
CHANGED
|
@@ -20,7 +20,7 @@ To use this SDK, call `Sentry.init(options)` before you mount your React compone
|
|
|
20
20
|
|
|
21
21
|
```javascript
|
|
22
22
|
import React from 'react';
|
|
23
|
-
import ReactDOM from
|
|
23
|
+
import ReactDOM from 'react-dom';
|
|
24
24
|
import * as Sentry from '@sentry/react';
|
|
25
25
|
|
|
26
26
|
Sentry.init({
|
|
@@ -39,17 +39,16 @@ ReactDOM.render(<App />, rootNode);
|
|
|
39
39
|
### ErrorBoundary
|
|
40
40
|
|
|
41
41
|
`@sentry/react` exports an ErrorBoundary component that will automatically send Javascript errors from inside a
|
|
42
|
-
component tree to Sentry, and set a fallback UI.
|
|
42
|
+
component tree to Sentry, and set a fallback UI.
|
|
43
43
|
|
|
44
44
|
> app.js
|
|
45
|
+
|
|
45
46
|
```javascript
|
|
46
47
|
import React from 'react';
|
|
47
48
|
import * as Sentry from '@sentry/react';
|
|
48
49
|
|
|
49
50
|
function FallbackComponent() {
|
|
50
|
-
return
|
|
51
|
-
<div>An error has occured</div>
|
|
52
|
-
)
|
|
51
|
+
return <div>An error has occured</div>;
|
|
53
52
|
}
|
|
54
53
|
|
|
55
54
|
class App extends React.Component {
|
|
@@ -58,7 +57,7 @@ class App extends React.Component {
|
|
|
58
57
|
<Sentry.ErrorBoundary fallback={FallbackComponent} showDialog>
|
|
59
58
|
<OtherComponents />
|
|
60
59
|
</Sentry.ErrorBoundary>
|
|
61
|
-
)
|
|
60
|
+
);
|
|
62
61
|
}
|
|
63
62
|
}
|
|
64
63
|
|
|
@@ -67,11 +66,12 @@ export default App;
|
|
|
67
66
|
|
|
68
67
|
### Profiler
|
|
69
68
|
|
|
70
|
-
`@sentry/react` exports a Profiler component that leverages the tracing features to add React-related
|
|
71
|
-
|
|
72
|
-
|
|
69
|
+
`@sentry/react` exports a Profiler component that leverages the tracing features to add React-related spans to
|
|
70
|
+
transactions. If tracing is not enabled, the Profiler component will not work. The Profiler tracks component mount,
|
|
71
|
+
render duration and updates.
|
|
73
72
|
|
|
74
73
|
> app.js
|
|
74
|
+
|
|
75
75
|
```javascript
|
|
76
76
|
import React from 'react';
|
|
77
77
|
import * as Sentry from '@sentry/react';
|
|
@@ -83,7 +83,7 @@ class App extends React.Component {
|
|
|
83
83
|
<InsideComponent someProp={2} />
|
|
84
84
|
<AnotherComponent />
|
|
85
85
|
</FancyComponent>
|
|
86
|
-
)
|
|
86
|
+
);
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
package/cjs/errorboundary.js
CHANGED
|
@@ -58,7 +58,7 @@ function setCause(error, cause) {
|
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
/**
|
|
61
|
-
* A ErrorBoundary component that logs errors to Sentry.
|
|
61
|
+
* A ErrorBoundary component that logs errors to Sentry.
|
|
62
62
|
* NOTE: If you are a Sentry user, and you are seeing this stack frame, it means the
|
|
63
63
|
* Sentry React SDK ErrorBoundary caught an error invoking your application code. This
|
|
64
64
|
* is expected behavior and NOT indicative of a bug with the Sentry React SDK.
|
|
@@ -71,11 +71,10 @@ class ErrorBoundary extends React__namespace.Component {
|
|
|
71
71
|
this._openFallbackReportDialog = true;
|
|
72
72
|
|
|
73
73
|
const client = browser.getClient();
|
|
74
|
-
if (client &&
|
|
74
|
+
if (client && props.showDialog) {
|
|
75
75
|
this._openFallbackReportDialog = false;
|
|
76
76
|
client.on('afterSendEvent', event => {
|
|
77
|
-
if (!event.type && event.event_id === this._lastEventId) {
|
|
78
|
-
// eslint-disable-next-line deprecation/deprecation
|
|
77
|
+
if (!event.type && this._lastEventId && event.event_id === this._lastEventId) {
|
|
79
78
|
browser.showReportDialog({ ...props.dialogOptions, eventId: this._lastEventId });
|
|
80
79
|
}
|
|
81
80
|
});
|
|
@@ -162,7 +161,7 @@ class ErrorBoundary extends React__namespace.Component {
|
|
|
162
161
|
if (state.error) {
|
|
163
162
|
let element = undefined;
|
|
164
163
|
if (typeof fallback === 'function') {
|
|
165
|
-
element = fallback
|
|
164
|
+
element = React__namespace.createElement(fallback, {
|
|
166
165
|
error: state.error,
|
|
167
166
|
componentStack: state.componentStack,
|
|
168
167
|
resetError: this.resetErrorBoundary,
|
|
@@ -200,8 +199,8 @@ function withErrorBoundary(
|
|
|
200
199
|
const componentDisplayName = WrappedComponent.displayName || WrappedComponent.name || UNKNOWN_COMPONENT;
|
|
201
200
|
|
|
202
201
|
const Wrapped = (props) => (
|
|
203
|
-
React__namespace.createElement(ErrorBoundary, { ...errorBoundaryOptions, __self: this, __source: {fileName: _jsxFileName, lineNumber:
|
|
204
|
-
, React__namespace.createElement(WrappedComponent, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber:
|
|
202
|
+
React__namespace.createElement(ErrorBoundary, { ...errorBoundaryOptions, __self: this, __source: {fileName: _jsxFileName, lineNumber: 239}}
|
|
203
|
+
, React__namespace.createElement(WrappedComponent, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 240}} )
|
|
205
204
|
)
|
|
206
205
|
);
|
|
207
206
|
|
package/cjs/errorboundary.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"errorboundary.js","sources":["../../src/errorboundary.tsx"],"sourcesContent":["import type { ReportDialogOptions, Scope } from '@sentry/browser';\nimport { captureException, getClient, showReportDialog, withScope } from '@sentry/browser';\nimport { isError, logger } from '@sentry/utils';\nimport hoistNonReactStatics from 'hoist-non-react-statics';\nimport * as React from 'react';\n\nimport { DEBUG_BUILD } from './debug-build';\n\nexport function isAtLeastReact17(version: string): boolean {\n const major = version.match(/^([^.]+)/);\n return major !== null && parseInt(major[0]) >= 17;\n}\n\nexport const UNKNOWN_COMPONENT = 'unknown';\n\nexport type FallbackRender = (errorData: {\n error: Error;\n componentStack: string;\n eventId: string;\n resetError(): void;\n}) => React.ReactElement;\n\nexport type ErrorBoundaryProps = {\n children?: React.ReactNode | (() => React.ReactNode);\n /** If a Sentry report dialog should be rendered on error */\n showDialog?: boolean | undefined;\n /**\n * Options to be passed into the Sentry report dialog.\n * No-op if {@link showDialog} is false.\n */\n // eslint-disable-next-line deprecation/deprecation\n dialogOptions?: Omit<ReportDialogOptions, 'eventId'> | undefined;\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 | undefined;\n /** Called when the error boundary encounters an error */\n onError?: ((error: Error, componentStack: string, eventId: string) => void) | undefined;\n /** Called on componentDidMount() */\n onMount?: (() => void) | undefined;\n /** Called if resetError() is called from the fallback render props function */\n onReset?: ((error: Error | null, componentStack: string | null, eventId: string | null) => void) | undefined;\n /** Called on componentWillUnmount() */\n onUnmount?: ((error: Error | null, componentStack: string | null, eventId: string | null) => void) | undefined;\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) | undefined;\n};\n\ntype ErrorBoundaryState =\n | {\n componentStack: null;\n error: null;\n eventId: null;\n }\n | {\n componentStack: React.ErrorInfo['componentStack'];\n error: Error;\n eventId: string;\n };\n\nconst INITIAL_STATE = {\n componentStack: null,\n error: null,\n eventId: null,\n};\n\nfunction setCause(error: Error & { cause?: Error }, cause: Error): void {\n const seenErrors = new WeakMap<Error, boolean>();\n\n function recurse(error: Error & { cause?: Error }, cause: Error): void {\n // If we've already seen the error, there is a recursive loop somewhere in the error's\n // cause chain. Let's just bail out then to prevent a stack overflow.\n if (seenErrors.has(error)) {\n return;\n }\n if (error.cause) {\n seenErrors.set(error, true);\n return recurse(error.cause, cause);\n }\n error.cause = cause;\n }\n\n recurse(error, cause);\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;\n\n private readonly _openFallbackReportDialog: boolean;\n\n private _lastEventId?: string;\n\n public constructor(props: ErrorBoundaryProps) {\n super(props);\n\n this.state = INITIAL_STATE;\n this._openFallbackReportDialog = true;\n\n const client = getClient();\n if (client && client.on && props.showDialog) {\n this._openFallbackReportDialog = false;\n client.on('afterSendEvent', event => {\n if (!event.type && event.event_id === this._lastEventId) {\n // eslint-disable-next-line deprecation/deprecation\n showReportDialog({ ...props.dialogOptions, eventId: this._lastEventId });\n }\n });\n }\n }\n\n public componentDidCatch(error: Error & { cause?: Error }, { componentStack }: React.ErrorInfo): void {\n const { beforeCapture, onError, showDialog, dialogOptions } = this.props;\n withScope(scope => {\n // If on React version >= 17, create stack trace from componentStack param and links\n // to to the original error using `error.cause` otherwise relies on error param for stacktrace.\n // Linking errors requires the `LinkedErrors` integration be enabled.\n // See: https://reactjs.org/blog/2020/08/10/react-v17-rc.html#native-component-stacks\n //\n // Although `componentDidCatch` is typed to accept an `Error` object, it can also be invoked\n // with non-error objects. This is why we need to check if the error is an error-like object.\n // See: https://github.com/getsentry/sentry-javascript/issues/6167\n if (isAtLeastReact17(React.version) && isError(error)) {\n const errorBoundaryError = new Error(error.message);\n errorBoundaryError.name = `React ErrorBoundary ${error.name}`;\n errorBoundaryError.stack = componentStack;\n\n // Using the `LinkedErrors` integration to link the errors together.\n setCause(error, errorBoundaryError);\n }\n\n if (beforeCapture) {\n beforeCapture(scope, error, componentStack);\n }\n\n const eventId = captureException(error, {\n captureContext: {\n contexts: { react: { componentStack } },\n },\n // If users provide a fallback component we can assume they are handling the error.\n // Therefore, we set the mechanism depending on the presence of the fallback prop.\n mechanism: { handled: !!this.props.fallback },\n });\n\n if (onError) {\n onError(error, componentStack, eventId);\n }\n if (showDialog) {\n this._lastEventId = eventId;\n if (this._openFallbackReportDialog) {\n showReportDialog({ ...dialogOptions, eventId });\n }\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 state = this.state;\n\n if (state.error) {\n let element: React.ReactElement | undefined = undefined;\n if (typeof fallback === 'function') {\n element = fallback({\n error: state.error,\n componentStack: state.componentStack,\n resetError: this.resetErrorBoundary,\n eventId: state.eventId,\n });\n } else {\n element = fallback;\n }\n\n if (React.isValidElement(element)) {\n return element;\n }\n\n if (fallback) {\n DEBUG_BUILD && 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 as () => React.ReactNode)();\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 // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\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 // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\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"],"names":["React","getClient","showReportDialog","withScope","isError","captureException","DEBUG_BUILD","logger","hoistNonReactStatics"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"errorboundary.js","sources":["../../src/errorboundary.tsx"],"sourcesContent":["import type { ReportDialogOptions } from '@sentry/browser';\nimport { captureException, getClient, showReportDialog, withScope } from '@sentry/browser';\nimport type { Scope } from '@sentry/types';\nimport { isError, logger } from '@sentry/utils';\nimport hoistNonReactStatics from 'hoist-non-react-statics';\nimport * as React from 'react';\n\nimport { DEBUG_BUILD } from './debug-build';\n\nexport function isAtLeastReact17(version: string): boolean {\n const major = version.match(/^([^.]+)/);\n return major !== null && parseInt(major[0]) >= 17;\n}\n\nexport const UNKNOWN_COMPONENT = 'unknown';\n\nexport type FallbackRender = (errorData: {\n error: Error;\n componentStack: string;\n eventId: string;\n resetError(): void;\n}) => React.ReactElement;\n\nexport type ErrorBoundaryProps = {\n children?: React.ReactNode | (() => React.ReactNode);\n /** If a Sentry report dialog should be rendered on error */\n showDialog?: boolean | undefined;\n /**\n * Options to be passed into the Sentry report dialog.\n * No-op if {@link showDialog} is false.\n */\n dialogOptions?: Omit<ReportDialogOptions, 'eventId'> | undefined;\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 | undefined;\n /** Called when the error boundary encounters an error */\n onError?: ((error: Error, componentStack: string, eventId: string) => void) | undefined;\n /** Called on componentDidMount() */\n onMount?: (() => void) | undefined;\n /** Called if resetError() is called from the fallback render props function */\n onReset?: ((error: Error | null, componentStack: string | null, eventId: string | null) => void) | undefined;\n /** Called on componentWillUnmount() */\n onUnmount?: ((error: Error | null, componentStack: string | null, eventId: string | null) => void) | undefined;\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) | undefined;\n};\n\ntype ErrorBoundaryState =\n | {\n componentStack: null;\n error: null;\n eventId: null;\n }\n | {\n componentStack: React.ErrorInfo['componentStack'];\n error: Error;\n eventId: string;\n };\n\nconst INITIAL_STATE = {\n componentStack: null,\n error: null,\n eventId: null,\n};\n\nfunction setCause(error: Error & { cause?: Error }, cause: Error): void {\n const seenErrors = new WeakMap<Error, boolean>();\n\n function recurse(error: Error & { cause?: Error }, cause: Error): void {\n // If we've already seen the error, there is a recursive loop somewhere in the error's\n // cause chain. Let's just bail out then to prevent a stack overflow.\n if (seenErrors.has(error)) {\n return;\n }\n if (error.cause) {\n seenErrors.set(error, true);\n return recurse(error.cause, cause);\n }\n error.cause = cause;\n }\n\n recurse(error, cause);\n}\n\n/**\n * A ErrorBoundary component that logs errors to Sentry.\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;\n\n private readonly _openFallbackReportDialog: boolean;\n\n private _lastEventId?: string;\n\n public constructor(props: ErrorBoundaryProps) {\n super(props);\n\n this.state = INITIAL_STATE;\n this._openFallbackReportDialog = true;\n\n const client = getClient();\n if (client && props.showDialog) {\n this._openFallbackReportDialog = false;\n client.on('afterSendEvent', event => {\n if (!event.type && this._lastEventId && event.event_id === this._lastEventId) {\n showReportDialog({ ...props.dialogOptions, eventId: this._lastEventId });\n }\n });\n }\n }\n\n public componentDidCatch(error: Error & { cause?: Error }, { componentStack }: React.ErrorInfo): void {\n const { beforeCapture, onError, showDialog, dialogOptions } = this.props;\n withScope(scope => {\n // If on React version >= 17, create stack trace from componentStack param and links\n // to to the original error using `error.cause` otherwise relies on error param for stacktrace.\n // Linking errors requires the `LinkedErrors` integration be enabled.\n // See: https://reactjs.org/blog/2020/08/10/react-v17-rc.html#native-component-stacks\n //\n // Although `componentDidCatch` is typed to accept an `Error` object, it can also be invoked\n // with non-error objects. This is why we need to check if the error is an error-like object.\n // See: https://github.com/getsentry/sentry-javascript/issues/6167\n if (isAtLeastReact17(React.version) && isError(error)) {\n const errorBoundaryError = new Error(error.message);\n errorBoundaryError.name = `React ErrorBoundary ${error.name}`;\n errorBoundaryError.stack = componentStack;\n\n // Using the `LinkedErrors` integration to link the errors together.\n setCause(error, errorBoundaryError);\n }\n\n if (beforeCapture) {\n beforeCapture(scope, error, componentStack);\n }\n\n const eventId = captureException(error, {\n captureContext: {\n contexts: { react: { componentStack } },\n },\n // If users provide a fallback component we can assume they are handling the error.\n // Therefore, we set the mechanism depending on the presence of the fallback prop.\n mechanism: { handled: !!this.props.fallback },\n });\n\n if (onError) {\n onError(error, componentStack, eventId);\n }\n if (showDialog) {\n this._lastEventId = eventId;\n if (this._openFallbackReportDialog) {\n showReportDialog({ ...dialogOptions, eventId });\n }\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 state = this.state;\n\n if (state.error) {\n let element: React.ReactElement | undefined = undefined;\n if (typeof fallback === 'function') {\n element = React.createElement(fallback, {\n error: state.error,\n componentStack: state.componentStack,\n resetError: this.resetErrorBoundary,\n eventId: state.eventId,\n });\n } else {\n element = fallback;\n }\n\n if (React.isValidElement(element)) {\n return element;\n }\n\n if (fallback) {\n DEBUG_BUILD && 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 as () => React.ReactNode)();\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 // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\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 // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\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"],"names":["React","getClient","showReportDialog","withScope","isError","captureException","DEBUG_BUILD","logger","hoistNonReactStatics"],"mappings":"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"}
|
package/cjs/index.js
CHANGED
|
@@ -19,18 +19,21 @@ exports.ErrorBoundary = errorboundary.ErrorBoundary;
|
|
|
19
19
|
exports.withErrorBoundary = errorboundary.withErrorBoundary;
|
|
20
20
|
exports.createReduxEnhancer = redux.createReduxEnhancer;
|
|
21
21
|
exports.reactRouterV3BrowserTracingIntegration = reactrouterv3.reactRouterV3BrowserTracingIntegration;
|
|
22
|
-
exports.reactRouterV3Instrumentation = reactrouterv3.reactRouterV3Instrumentation;
|
|
23
22
|
exports.reactRouterV4BrowserTracingIntegration = reactrouter.reactRouterV4BrowserTracingIntegration;
|
|
24
|
-
exports.reactRouterV4Instrumentation = reactrouter.reactRouterV4Instrumentation;
|
|
25
23
|
exports.reactRouterV5BrowserTracingIntegration = reactrouter.reactRouterV5BrowserTracingIntegration;
|
|
26
|
-
exports.reactRouterV5Instrumentation = reactrouter.reactRouterV5Instrumentation;
|
|
27
24
|
exports.withSentryRouting = reactrouter.withSentryRouting;
|
|
28
25
|
exports.reactRouterV6BrowserTracingIntegration = reactrouterv6.reactRouterV6BrowserTracingIntegration;
|
|
29
|
-
exports.reactRouterV6Instrumentation = reactrouterv6.reactRouterV6Instrumentation;
|
|
30
26
|
exports.withSentryReactRouterV6Routing = reactrouterv6.withSentryReactRouterV6Routing;
|
|
31
27
|
exports.wrapCreateBrowserRouter = reactrouterv6.wrapCreateBrowserRouter;
|
|
32
28
|
exports.wrapUseRoutes = reactrouterv6.wrapUseRoutes;
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
29
|
+
Object.prototype.hasOwnProperty.call(browser, '__proto__') &&
|
|
30
|
+
!Object.prototype.hasOwnProperty.call(exports, '__proto__') &&
|
|
31
|
+
Object.defineProperty(exports, '__proto__', {
|
|
32
|
+
enumerable: true,
|
|
33
|
+
value: browser['__proto__']
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
Object.keys(browser).forEach(k => {
|
|
37
|
+
if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = browser[k];
|
|
38
|
+
});
|
|
36
39
|
//# sourceMappingURL=index.js.map
|
package/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/cjs/profiler.js
CHANGED
|
@@ -60,8 +60,10 @@ class Profiler extends React__namespace.Component {
|
|
|
60
60
|
name: `<${name}>`,
|
|
61
61
|
onlyIfParent: true,
|
|
62
62
|
op: constants.REACT_MOUNT_OP,
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
attributes: {
|
|
64
|
+
[core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.react.profiler',
|
|
65
|
+
'ui.component_name': name,
|
|
66
|
+
},
|
|
65
67
|
});
|
|
66
68
|
}
|
|
67
69
|
|
|
@@ -87,9 +89,9 @@ class Profiler extends React__namespace.Component {
|
|
|
87
89
|
name: `<${this.props.name}>`,
|
|
88
90
|
onlyIfParent: true,
|
|
89
91
|
op: constants.REACT_UPDATE_OP,
|
|
90
|
-
|
|
91
|
-
startTimestamp: now,
|
|
92
|
+
startTime: now,
|
|
92
93
|
attributes: {
|
|
94
|
+
[core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.react.profiler',
|
|
93
95
|
'ui.component_name': this.props.name,
|
|
94
96
|
'ui.react.changed_props': changedProps,
|
|
95
97
|
},
|
|
@@ -115,15 +117,17 @@ class Profiler extends React__namespace.Component {
|
|
|
115
117
|
const { name, includeRender = true } = this.props;
|
|
116
118
|
|
|
117
119
|
if (this._mountSpan && includeRender) {
|
|
118
|
-
const
|
|
120
|
+
const startTime = core.spanToJSON(this._mountSpan).timestamp;
|
|
119
121
|
core.withActiveSpan(this._mountSpan, () => {
|
|
120
122
|
const renderSpan = browser.startInactiveSpan({
|
|
121
123
|
onlyIfParent: true,
|
|
122
124
|
name: `<${name}>`,
|
|
123
125
|
op: constants.REACT_RENDER_OP,
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
126
|
+
startTime,
|
|
127
|
+
attributes: {
|
|
128
|
+
[core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.react.profiler',
|
|
129
|
+
'ui.component_name': name,
|
|
130
|
+
},
|
|
127
131
|
});
|
|
128
132
|
if (renderSpan) {
|
|
129
133
|
// Have to cast to Span because the type of _mountSpan is Span | undefined
|
|
@@ -157,8 +161,8 @@ function withProfiler(
|
|
|
157
161
|
(options && options.name) || WrappedComponent.displayName || WrappedComponent.name || UNKNOWN_COMPONENT;
|
|
158
162
|
|
|
159
163
|
const Wrapped = (props) => (
|
|
160
|
-
React__namespace.createElement(Profiler, { ...options, name: componentDisplayName, updateProps: props, __self: this, __source: {fileName: _jsxFileName, lineNumber:
|
|
161
|
-
, React__namespace.createElement(WrappedComponent, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber:
|
|
164
|
+
React__namespace.createElement(Profiler, { ...options, name: componentDisplayName, updateProps: props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 163}}
|
|
165
|
+
, React__namespace.createElement(WrappedComponent, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 164}} )
|
|
162
166
|
)
|
|
163
167
|
);
|
|
164
168
|
|
|
@@ -193,8 +197,10 @@ function useProfiler(
|
|
|
193
197
|
name: `<${name}>`,
|
|
194
198
|
onlyIfParent: true,
|
|
195
199
|
op: constants.REACT_MOUNT_OP,
|
|
196
|
-
|
|
197
|
-
|
|
200
|
+
attributes: {
|
|
201
|
+
[core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.react.profiler',
|
|
202
|
+
'ui.component_name': name,
|
|
203
|
+
},
|
|
198
204
|
});
|
|
199
205
|
});
|
|
200
206
|
|
|
@@ -205,16 +211,18 @@ function useProfiler(
|
|
|
205
211
|
|
|
206
212
|
return () => {
|
|
207
213
|
if (mountSpan && options.hasRenderSpan) {
|
|
208
|
-
const
|
|
214
|
+
const startTime = core.spanToJSON(mountSpan).timestamp;
|
|
209
215
|
const endTimestamp = utils.timestampInSeconds();
|
|
210
216
|
|
|
211
217
|
const renderSpan = browser.startInactiveSpan({
|
|
212
218
|
name: `<${name}>`,
|
|
213
219
|
onlyIfParent: true,
|
|
214
220
|
op: constants.REACT_RENDER_OP,
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
221
|
+
startTime,
|
|
222
|
+
attributes: {
|
|
223
|
+
[core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.react.profiler',
|
|
224
|
+
'ui.component_name': name,
|
|
225
|
+
},
|
|
218
226
|
});
|
|
219
227
|
if (renderSpan) {
|
|
220
228
|
// Have to cast to Span because the type of _mountSpan is Span | undefined
|
package/cjs/profiler.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profiler.js","sources":["../../src/profiler.tsx"],"sourcesContent":["import { startInactiveSpan } from '@sentry/browser';\nimport { spanToJSON, withActiveSpan } from '@sentry/core';\nimport type { Span } from '@sentry/types';\nimport { timestampInSeconds } 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 // Component that is being profiled.\n children?: React.ReactNode;\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;\n /**\n * The span that represents the duration of time between shouldComponentUpdate and componentDidUpdate\n */\n protected _updateSpan: Span | 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 this._mountSpan = startInactiveSpan({\n name: `<${name}>`,\n onlyIfParent: true,\n op: REACT_MOUNT_OP,\n origin: 'auto.ui.react.profiler',\n attributes: { 'ui.component_name': name },\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.end();\n }\n }\n\n public shouldComponentUpdate({ updateProps, includeUpdates = true }: ProfilerProps): boolean {\n // Only generate an update span if includeUpdates 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 const now = timestampInSeconds();\n this._updateSpan = withActiveSpan(this._mountSpan, () => {\n return startInactiveSpan({\n name: `<${this.props.name}>`,\n onlyIfParent: true,\n op: REACT_UPDATE_OP,\n origin: 'auto.ui.react.profiler',\n startTimestamp: now,\n attributes: {\n 'ui.component_name': this.props.name,\n 'ui.react.changed_props': changedProps,\n },\n });\n });\n }\n }\n\n return true;\n }\n\n public componentDidUpdate(): void {\n if (this._updateSpan) {\n this._updateSpan.end();\n this._updateSpan = undefined;\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 endTimestamp = timestampInSeconds();\n const { name, includeRender = true } = this.props;\n\n if (this._mountSpan && includeRender) {\n const startTimestamp = spanToJSON(this._mountSpan).timestamp;\n withActiveSpan(this._mountSpan, () => {\n const renderSpan = startInactiveSpan({\n onlyIfParent: true,\n name: `<${name}>`,\n op: REACT_RENDER_OP,\n origin: 'auto.ui.react.profiler',\n startTimestamp,\n attributes: { 'ui.component_name': name },\n });\n if (renderSpan) {\n // Have to cast to Span because the type of _mountSpan is Span | undefined\n // and not getting narrowed properly\n renderSpan.end(endTimestamp);\n }\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 */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\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' | 'children'>>,\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 return startInactiveSpan({\n name: `<${name}>`,\n onlyIfParent: true,\n op: REACT_MOUNT_OP,\n origin: 'auto.ui.react.profiler',\n attributes: { 'ui.component_name': name },\n });\n });\n\n React.useEffect(() => {\n if (mountSpan) {\n mountSpan.end();\n }\n\n return (): void => {\n if (mountSpan && options.hasRenderSpan) {\n const startTimestamp = spanToJSON(mountSpan).timestamp;\n const endTimestamp = timestampInSeconds();\n\n const renderSpan = startInactiveSpan({\n name: `<${name}>`,\n onlyIfParent: true,\n op: REACT_RENDER_OP,\n origin: 'auto.ui.react.profiler',\n startTimestamp,\n attributes: { 'ui.component_name': name },\n });\n if (renderSpan) {\n // Have to cast to Span because the type of _mountSpan is Span | undefined\n // and not getting narrowed properly\n renderSpan.end(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"],"names":["React","startInactiveSpan","REACT_MOUNT_OP","timestampInSeconds","withActiveSpan","REACT_UPDATE_OP","spanToJSON","REACT_RENDER_OP","hoistNonReactStatics"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"profiler.js","sources":["../../src/profiler.tsx"],"sourcesContent":["import { startInactiveSpan } from '@sentry/browser';\nimport { SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, spanToJSON, withActiveSpan } from '@sentry/core';\nimport type { Span } from '@sentry/types';\nimport { timestampInSeconds } 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 // Component that is being profiled.\n children?: React.ReactNode;\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;\n /**\n * The span that represents the duration of time between shouldComponentUpdate and componentDidUpdate\n */\n protected _updateSpan: Span | 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 this._mountSpan = startInactiveSpan({\n name: `<${name}>`,\n onlyIfParent: true,\n op: REACT_MOUNT_OP,\n attributes: {\n [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.react.profiler',\n 'ui.component_name': name,\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.end();\n }\n }\n\n public shouldComponentUpdate({ updateProps, includeUpdates = true }: ProfilerProps): boolean {\n // Only generate an update span if includeUpdates 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 const now = timestampInSeconds();\n this._updateSpan = withActiveSpan(this._mountSpan, () => {\n return startInactiveSpan({\n name: `<${this.props.name}>`,\n onlyIfParent: true,\n op: REACT_UPDATE_OP,\n startTime: now,\n attributes: {\n [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.react.profiler',\n 'ui.component_name': this.props.name,\n 'ui.react.changed_props': changedProps,\n },\n });\n });\n }\n }\n\n return true;\n }\n\n public componentDidUpdate(): void {\n if (this._updateSpan) {\n this._updateSpan.end();\n this._updateSpan = undefined;\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 endTimestamp = timestampInSeconds();\n const { name, includeRender = true } = this.props;\n\n if (this._mountSpan && includeRender) {\n const startTime = spanToJSON(this._mountSpan).timestamp;\n withActiveSpan(this._mountSpan, () => {\n const renderSpan = startInactiveSpan({\n onlyIfParent: true,\n name: `<${name}>`,\n op: REACT_RENDER_OP,\n startTime,\n attributes: {\n [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.react.profiler',\n 'ui.component_name': name,\n },\n });\n if (renderSpan) {\n // Have to cast to Span because the type of _mountSpan is Span | undefined\n // and not getting narrowed properly\n renderSpan.end(endTimestamp);\n }\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 */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\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' | 'children'>>,\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 return startInactiveSpan({\n name: `<${name}>`,\n onlyIfParent: true,\n op: REACT_MOUNT_OP,\n attributes: {\n [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.react.profiler',\n 'ui.component_name': name,\n },\n });\n });\n\n React.useEffect(() => {\n if (mountSpan) {\n mountSpan.end();\n }\n\n return (): void => {\n if (mountSpan && options.hasRenderSpan) {\n const startTime = spanToJSON(mountSpan).timestamp;\n const endTimestamp = timestampInSeconds();\n\n const renderSpan = startInactiveSpan({\n name: `<${name}>`,\n onlyIfParent: true,\n op: REACT_RENDER_OP,\n startTime,\n attributes: {\n [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.react.profiler',\n 'ui.component_name': name,\n },\n });\n if (renderSpan) {\n // Have to cast to Span because the type of _mountSpan is Span | undefined\n // and not getting narrowed properly\n renderSpan.end(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"],"names":["React","startInactiveSpan","REACT_MOUNT_OP","SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN","timestampInSeconds","withActiveSpan","REACT_UPDATE_OP","spanToJSON","REACT_RENDER_OP","hoistNonReactStatics"],"mappings":"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"}
|
package/cjs/reactrouter.js
CHANGED
|
@@ -26,8 +26,6 @@ const _jsxFileName = "/home/runner/work/sentry-javascript/sentry-javascript/pack
|
|
|
26
26
|
// We need to disable eslint no-explict-any because any is required for the
|
|
27
27
|
// react-router typings.
|
|
28
28
|
|
|
29
|
-
let activeTransaction;
|
|
30
|
-
|
|
31
29
|
/**
|
|
32
30
|
* A browser tracing integration that uses React Router v4 to instrument navigations.
|
|
33
31
|
* Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
|
|
@@ -48,22 +46,15 @@ function reactRouterV4BrowserTracingIntegration(
|
|
|
48
46
|
afterAllSetup(client) {
|
|
49
47
|
integration.afterAllSetup(client);
|
|
50
48
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
// eslint-disable-next-line deprecation/deprecation
|
|
62
|
-
const instrumentation = reactRouterV4Instrumentation(history, routes, matchPath);
|
|
63
|
-
|
|
64
|
-
// Now instrument page load & navigation with correct settings
|
|
65
|
-
instrumentation(startPageloadCallback, instrumentPageLoad, false);
|
|
66
|
-
instrumentation(startNavigationCallback, false, instrumentNavigation);
|
|
49
|
+
instrumentReactRouter(
|
|
50
|
+
client,
|
|
51
|
+
instrumentPageLoad,
|
|
52
|
+
instrumentNavigation,
|
|
53
|
+
history,
|
|
54
|
+
'reactrouter_v4',
|
|
55
|
+
routes,
|
|
56
|
+
matchPath,
|
|
57
|
+
);
|
|
67
58
|
},
|
|
68
59
|
};
|
|
69
60
|
}
|
|
@@ -81,56 +72,30 @@ function reactRouterV5BrowserTracingIntegration(
|
|
|
81
72
|
instrumentNavigation: false,
|
|
82
73
|
});
|
|
83
74
|
|
|
84
|
-
const { history, routes, matchPath } = options;
|
|
75
|
+
const { history, routes, matchPath, instrumentPageLoad = true, instrumentNavigation = true } = options;
|
|
85
76
|
|
|
86
77
|
return {
|
|
87
78
|
...integration,
|
|
88
79
|
afterAllSetup(client) {
|
|
89
80
|
integration.afterAllSetup(client);
|
|
90
81
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
// eslint-disable-next-line deprecation/deprecation
|
|
102
|
-
const instrumentation = reactRouterV5Instrumentation(history, routes, matchPath);
|
|
103
|
-
|
|
104
|
-
// Now instrument page load & navigation with correct settings
|
|
105
|
-
instrumentation(startPageloadCallback, options.instrumentPageLoad, false);
|
|
106
|
-
instrumentation(startNavigationCallback, false, options.instrumentNavigation);
|
|
82
|
+
instrumentReactRouter(
|
|
83
|
+
client,
|
|
84
|
+
instrumentPageLoad,
|
|
85
|
+
instrumentNavigation,
|
|
86
|
+
history,
|
|
87
|
+
'reactrouter_v5',
|
|
88
|
+
routes,
|
|
89
|
+
matchPath,
|
|
90
|
+
);
|
|
107
91
|
},
|
|
108
92
|
};
|
|
109
93
|
}
|
|
110
94
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
history,
|
|
116
|
-
routes,
|
|
117
|
-
matchPath,
|
|
118
|
-
) {
|
|
119
|
-
return createReactRouterInstrumentation(history, 'reactrouter_v4', routes, matchPath);
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
/**
|
|
123
|
-
* @deprecated Use `browserTracingReactRouterV5()` instead.
|
|
124
|
-
*/
|
|
125
|
-
function reactRouterV5Instrumentation(
|
|
126
|
-
history,
|
|
127
|
-
routes,
|
|
128
|
-
matchPath,
|
|
129
|
-
) {
|
|
130
|
-
return createReactRouterInstrumentation(history, 'reactrouter_v5', routes, matchPath);
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
function createReactRouterInstrumentation(
|
|
95
|
+
function instrumentReactRouter(
|
|
96
|
+
client,
|
|
97
|
+
instrumentPageLoad,
|
|
98
|
+
instrumentNavigation,
|
|
134
99
|
history,
|
|
135
100
|
instrumentationName,
|
|
136
101
|
allRoutes = [],
|
|
@@ -170,12 +135,11 @@ function createReactRouterInstrumentation(
|
|
|
170
135
|
return [pathname, 'url'];
|
|
171
136
|
}
|
|
172
137
|
|
|
173
|
-
|
|
138
|
+
if (instrumentPageLoad) {
|
|
174
139
|
const initPathName = getInitPathName();
|
|
175
|
-
|
|
176
|
-
if (startTransactionOnPageLoad && initPathName) {
|
|
140
|
+
if (initPathName) {
|
|
177
141
|
const [name, source] = normalizeTransactionName(initPathName);
|
|
178
|
-
|
|
142
|
+
browser.startBrowserTracingPageLoadSpan(client, {
|
|
179
143
|
name,
|
|
180
144
|
attributes: {
|
|
181
145
|
[core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
|
|
@@ -184,27 +148,23 @@ function createReactRouterInstrumentation(
|
|
|
184
148
|
},
|
|
185
149
|
});
|
|
186
150
|
}
|
|
151
|
+
}
|
|
187
152
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
});
|
|
204
|
-
}
|
|
205
|
-
});
|
|
206
|
-
}
|
|
207
|
-
};
|
|
153
|
+
if (instrumentNavigation && history.listen) {
|
|
154
|
+
history.listen((location, action) => {
|
|
155
|
+
if (action && (action === 'PUSH' || action === 'POP')) {
|
|
156
|
+
const [name, source] = normalizeTransactionName(location.pathname);
|
|
157
|
+
browser.startBrowserTracingNavigationSpan(client, {
|
|
158
|
+
name,
|
|
159
|
+
attributes: {
|
|
160
|
+
[core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
|
|
161
|
+
[core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.react.${instrumentationName}`,
|
|
162
|
+
[core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
|
|
163
|
+
},
|
|
164
|
+
});
|
|
165
|
+
}
|
|
166
|
+
});
|
|
167
|
+
}
|
|
208
168
|
}
|
|
209
169
|
|
|
210
170
|
/**
|
|
@@ -249,15 +209,19 @@ function withSentryRouting(Route) {
|
|
|
249
209
|
const activeRootSpan = getActiveRootSpan();
|
|
250
210
|
|
|
251
211
|
const WrappedRoute = (props) => {
|
|
252
|
-
if (
|
|
253
|
-
|
|
254
|
-
|
|
212
|
+
if (props && props.computedMatch && props.computedMatch.isExact) {
|
|
213
|
+
core.getCurrentScope().setTransactionName(props.computedMatch.path);
|
|
214
|
+
|
|
215
|
+
if (activeRootSpan) {
|
|
216
|
+
activeRootSpan.updateName(props.computedMatch.path);
|
|
217
|
+
activeRootSpan.setAttribute(core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
|
|
218
|
+
}
|
|
255
219
|
}
|
|
256
220
|
|
|
257
221
|
// @ts-expect-error Setting more specific React Component typing for `R` generic above
|
|
258
222
|
// will break advanced type inference done by react router params:
|
|
259
223
|
// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/13dc4235c069e25fe7ee16e11f529d909f9f3ff8/types/react-router/index.d.ts#L154-L164
|
|
260
|
-
return React__namespace.createElement(Route, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber:
|
|
224
|
+
return React__namespace.createElement(Route, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 242}} );
|
|
261
225
|
};
|
|
262
226
|
|
|
263
227
|
WrappedRoute.displayName = `sentryRoute(${componentDisplayName})`;
|
|
@@ -270,13 +234,8 @@ function withSentryRouting(Route) {
|
|
|
270
234
|
/* eslint-enable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access */
|
|
271
235
|
|
|
272
236
|
function getActiveRootSpan() {
|
|
273
|
-
// Legacy behavior for "old" react router instrumentation
|
|
274
|
-
if (activeTransaction) {
|
|
275
|
-
return activeTransaction;
|
|
276
|
-
}
|
|
277
|
-
|
|
278
237
|
const span = core.getActiveSpan();
|
|
279
|
-
const rootSpan = span
|
|
238
|
+
const rootSpan = span && core.getRootSpan(span);
|
|
280
239
|
|
|
281
240
|
if (!rootSpan) {
|
|
282
241
|
return undefined;
|
|
@@ -289,8 +248,6 @@ function getActiveRootSpan() {
|
|
|
289
248
|
}
|
|
290
249
|
|
|
291
250
|
exports.reactRouterV4BrowserTracingIntegration = reactRouterV4BrowserTracingIntegration;
|
|
292
|
-
exports.reactRouterV4Instrumentation = reactRouterV4Instrumentation;
|
|
293
251
|
exports.reactRouterV5BrowserTracingIntegration = reactRouterV5BrowserTracingIntegration;
|
|
294
|
-
exports.reactRouterV5Instrumentation = reactRouterV5Instrumentation;
|
|
295
252
|
exports.withSentryRouting = withSentryRouting;
|
|
296
253
|
//# sourceMappingURL=reactrouter.js.map
|