@sentry/react 7.8.1 → 7.11.0
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/cjs/profiler.js +19 -9
- package/cjs/profiler.js.map +1 -1
- package/cjs/reactrouterv6.js +22 -4
- package/cjs/reactrouterv6.js.map +1 -1
- package/cjs/redux.js +1 -1
- package/cjs/redux.js.map +1 -1
- package/esm/profiler.js +19 -9
- package/esm/profiler.js.map +1 -1
- package/esm/reactrouterv6.js +23 -5
- package/esm/reactrouterv6.js.map +1 -1
- package/esm/redux.js +1 -1
- package/esm/redux.js.map +1 -1
- package/package.json +4 -4
- package/types/profiler.d.ts +6 -1
- package/types/profiler.d.ts.map +1 -1
- package/types/reactrouterv6.d.ts +13 -0
- package/types/reactrouterv6.d.ts.map +1 -1
package/cjs/profiler.js
CHANGED
|
@@ -27,6 +27,10 @@ class Profiler extends React__namespace.Component {
|
|
|
27
27
|
* Made protected for the React Native SDK to access
|
|
28
28
|
*/
|
|
29
29
|
__init() {this._mountSpan = undefined;}
|
|
30
|
+
/**
|
|
31
|
+
* The span that represents the duration of time between shouldComponentUpdate and componentDidUpdate
|
|
32
|
+
*/
|
|
33
|
+
__init2() {this._updateSpan = undefined;}
|
|
30
34
|
|
|
31
35
|
static __initStatic() {this.defaultProps = {
|
|
32
36
|
disabled: false,
|
|
@@ -35,7 +39,7 @@ class Profiler extends React__namespace.Component {
|
|
|
35
39
|
};}
|
|
36
40
|
|
|
37
41
|
constructor(props) {
|
|
38
|
-
super(props);Profiler.prototype.__init.call(this);;
|
|
42
|
+
super(props);Profiler.prototype.__init.call(this);Profiler.prototype.__init2.call(this);;
|
|
39
43
|
const { name, disabled = false } = this.props;
|
|
40
44
|
|
|
41
45
|
if (disabled) {
|
|
@@ -58,8 +62,8 @@ class Profiler extends React__namespace.Component {
|
|
|
58
62
|
}
|
|
59
63
|
}
|
|
60
64
|
|
|
61
|
-
|
|
62
|
-
// Only generate an update span if
|
|
65
|
+
shouldComponentUpdate({ updateProps, includeUpdates = true }) {
|
|
66
|
+
// Only generate an update span if includeUpdates is true, if there is a valid mountSpan,
|
|
63
67
|
// and if the updateProps have changed. It is ok to not do a deep equality check here as it is expensive.
|
|
64
68
|
// We are just trying to give baseline clues for further investigation.
|
|
65
69
|
if (includeUpdates && this._mountSpan && updateProps !== this.props.updateProps) {
|
|
@@ -67,20 +71,26 @@ class Profiler extends React__namespace.Component {
|
|
|
67
71
|
// set as data on the span. We just store the prop keys as the values could be potenially very large.
|
|
68
72
|
var changedProps = Object.keys(updateProps).filter(k => updateProps[k] !== this.props.updateProps[k]);
|
|
69
73
|
if (changedProps.length > 0) {
|
|
70
|
-
// The update span is a point in time span with 0 duration, just signifying that the component
|
|
71
|
-
// has been updated.
|
|
72
74
|
var now = utils.timestampWithMs();
|
|
73
|
-
this._mountSpan.startChild({
|
|
75
|
+
this._updateSpan = this._mountSpan.startChild({
|
|
74
76
|
data: {
|
|
75
77
|
changedProps,
|
|
76
78
|
},
|
|
77
79
|
description: `<${this.props.name}>`,
|
|
78
|
-
endTimestamp: now,
|
|
79
80
|
op: constants.REACT_UPDATE_OP,
|
|
80
81
|
startTimestamp: now,
|
|
81
82
|
});
|
|
82
83
|
}
|
|
83
84
|
}
|
|
85
|
+
|
|
86
|
+
return true;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
componentDidUpdate() {
|
|
90
|
+
if (this._updateSpan) {
|
|
91
|
+
this._updateSpan.finish();
|
|
92
|
+
this._updateSpan = undefined;
|
|
93
|
+
}
|
|
84
94
|
}
|
|
85
95
|
|
|
86
96
|
// If a component is unmounted, we can say it is no longer on the screen.
|
|
@@ -122,8 +132,8 @@ function withProfiler(
|
|
|
122
132
|
(options && options.name) || WrappedComponent.displayName || WrappedComponent.name || UNKNOWN_COMPONENT;
|
|
123
133
|
|
|
124
134
|
var Wrapped = (props) => (
|
|
125
|
-
React__namespace.createElement(Profiler, { ...options, name: componentDisplayName, updateProps: props, __self: this, __source: {fileName: _jsxFileName, lineNumber:
|
|
126
|
-
, React__namespace.createElement(WrappedComponent, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber:
|
|
135
|
+
React__namespace.createElement(Profiler, { ...options, name: componentDisplayName, updateProps: props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 143}}
|
|
136
|
+
, React__namespace.createElement(WrappedComponent, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 144}} )
|
|
127
137
|
)
|
|
128
138
|
);
|
|
129
139
|
|
package/cjs/profiler.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profiler.js","sources":["../../src/profiler.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { getCurrentHub, Hub } from '@sentry/browser';\nimport { Span, Transaction } from '@sentry/types';\nimport { timestampWithMs } from '@sentry/utils';\nimport hoistNonReactStatics from 'hoist-non-react-statics';\nimport * as React from 'react';\n\nimport { REACT_MOUNT_OP, REACT_RENDER_OP, REACT_UPDATE_OP } from './constants';\n\nexport const UNKNOWN_COMPONENT = 'unknown';\n\nexport type ProfilerProps = {\n // The name of the component being profiled.\n name: string;\n // If the Profiler is disabled. False by default. This is useful if you want to disable profilers\n // in certain environments.\n disabled?: boolean;\n // If time component is on page should be displayed as spans. True by default.\n includeRender?: boolean;\n // If component updates should be displayed as spans. True by default.\n includeUpdates?: boolean;\n // props given to component being profiled.\n updateProps: { [key: string]: unknown };\n};\n\n/**\n * The Profiler component leverages Sentry's Tracing integration to generate\n * spans based on component lifecycles.\n */\nclass Profiler extends React.Component<ProfilerProps> {\n /**\n * The span of the mount activity\n * Made protected for the React Native SDK to access\n */\n protected _mountSpan: Span | undefined = undefined;\n\n // eslint-disable-next-line @typescript-eslint/member-ordering\n public static defaultProps: Partial<ProfilerProps> = {\n disabled: false,\n includeRender: true,\n includeUpdates: true,\n };\n\n public constructor(props: ProfilerProps) {\n super(props);\n const { name, disabled = false } = this.props;\n\n if (disabled) {\n return;\n }\n\n const activeTransaction = getActiveTransaction();\n if (activeTransaction) {\n this._mountSpan = activeTransaction.startChild({\n description: `<${name}>`,\n op: REACT_MOUNT_OP,\n });\n }\n }\n\n // If a component mounted, we can finish the mount activity.\n public componentDidMount(): void {\n if (this._mountSpan) {\n this._mountSpan.finish();\n }\n }\n\n public
|
|
1
|
+
{"version":3,"file":"profiler.js","sources":["../../src/profiler.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { getCurrentHub, Hub } from '@sentry/browser';\nimport { Span, Transaction } from '@sentry/types';\nimport { timestampWithMs } from '@sentry/utils';\nimport hoistNonReactStatics from 'hoist-non-react-statics';\nimport * as React from 'react';\n\nimport { REACT_MOUNT_OP, REACT_RENDER_OP, REACT_UPDATE_OP } from './constants';\n\nexport const UNKNOWN_COMPONENT = 'unknown';\n\nexport type ProfilerProps = {\n // The name of the component being profiled.\n name: string;\n // If the Profiler is disabled. False by default. This is useful if you want to disable profilers\n // in certain environments.\n disabled?: boolean;\n // If time component is on page should be displayed as spans. True by default.\n includeRender?: boolean;\n // If component updates should be displayed as spans. True by default.\n includeUpdates?: boolean;\n // props given to component being profiled.\n updateProps: { [key: string]: unknown };\n};\n\n/**\n * The Profiler component leverages Sentry's Tracing integration to generate\n * spans based on component lifecycles.\n */\nclass Profiler extends React.Component<ProfilerProps> {\n /**\n * The span of the mount activity\n * Made protected for the React Native SDK to access\n */\n protected _mountSpan: Span | undefined = undefined;\n /**\n * The span that represents the duration of time between shouldComponentUpdate and componentDidUpdate\n */\n protected _updateSpan: Span | undefined = undefined;\n\n // eslint-disable-next-line @typescript-eslint/member-ordering\n public static defaultProps: Partial<ProfilerProps> = {\n disabled: false,\n includeRender: true,\n includeUpdates: true,\n };\n\n public constructor(props: ProfilerProps) {\n super(props);\n const { name, disabled = false } = this.props;\n\n if (disabled) {\n return;\n }\n\n const activeTransaction = getActiveTransaction();\n if (activeTransaction) {\n this._mountSpan = activeTransaction.startChild({\n description: `<${name}>`,\n op: REACT_MOUNT_OP,\n });\n }\n }\n\n // If a component mounted, we can finish the mount activity.\n public componentDidMount(): void {\n if (this._mountSpan) {\n this._mountSpan.finish();\n }\n }\n\n public 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 = timestampWithMs();\n this._updateSpan = this._mountSpan.startChild({\n data: {\n changedProps,\n },\n description: `<${this.props.name}>`,\n op: REACT_UPDATE_OP,\n startTimestamp: now,\n });\n }\n }\n\n return true;\n }\n\n public componentDidUpdate(): void {\n if (this._updateSpan) {\n this._updateSpan.finish();\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 { name, includeRender = true } = this.props;\n\n if (this._mountSpan && includeRender) {\n // If we were able to obtain the spanId of the mount activity, we should set the\n // next activity as a child to the component mount activity.\n this._mountSpan.startChild({\n description: `<${name}>`,\n endTimestamp: timestampWithMs(),\n op: REACT_RENDER_OP,\n startTimestamp: this._mountSpan.endTimestamp,\n });\n }\n }\n\n public render(): React.ReactNode {\n return this.props.children;\n }\n}\n\n/**\n * withProfiler is a higher order component that wraps a\n * component in a {@link Profiler} component. It is recommended that\n * the higher order component be used over the regular {@link Profiler} component.\n *\n * @param WrappedComponent component that is wrapped by Profiler\n * @param options the {@link ProfilerProps} you can pass into the Profiler\n */\nfunction withProfiler<P extends Record<string, any>>(\n WrappedComponent: React.ComponentType<P>,\n // We do not want to have `updateProps` given in options, it is instead filled through the HOC.\n options?: Pick<Partial<ProfilerProps>, Exclude<keyof ProfilerProps, 'updateProps'>>,\n): React.FC<P> {\n const componentDisplayName =\n (options && options.name) || WrappedComponent.displayName || WrappedComponent.name || UNKNOWN_COMPONENT;\n\n const Wrapped: React.FC<P> = (props: P) => (\n <Profiler {...options} name={componentDisplayName} updateProps={props}>\n <WrappedComponent {...props} />\n </Profiler>\n );\n\n Wrapped.displayName = `profiler(${componentDisplayName})`;\n\n // Copy over static methods from Wrapped component to Profiler HOC\n // See: https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over\n hoistNonReactStatics(Wrapped, WrappedComponent);\n return Wrapped;\n}\n\n/**\n *\n * `useProfiler` is a React hook that profiles a React component.\n *\n * Requires React 16.8 or above.\n * @param name displayName of component being profiled\n */\nfunction useProfiler(\n name: string,\n options: { disabled?: boolean; hasRenderSpan?: boolean } = {\n disabled: false,\n hasRenderSpan: true,\n },\n): void {\n const [mountSpan] = React.useState(() => {\n if (options && options.disabled) {\n return undefined;\n }\n\n const activeTransaction = getActiveTransaction();\n if (activeTransaction) {\n return activeTransaction.startChild({\n description: `<${name}>`,\n op: REACT_MOUNT_OP,\n });\n }\n\n return undefined;\n });\n\n React.useEffect(() => {\n if (mountSpan) {\n mountSpan.finish();\n }\n\n return (): void => {\n if (mountSpan && options.hasRenderSpan) {\n mountSpan.startChild({\n description: `<${name}>`,\n endTimestamp: timestampWithMs(),\n op: REACT_RENDER_OP,\n startTimestamp: mountSpan.endTimestamp,\n });\n }\n };\n // We only want this to run once.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n}\n\nexport { withProfiler, Profiler, useProfiler };\n\n/** Grabs active transaction off scope */\nexport function getActiveTransaction<T extends Transaction>(hub: Hub = getCurrentHub()): T | undefined {\n if (hub) {\n const scope = hub.getScope();\n if (scope) {\n return scope.getTransaction() as T | undefined;\n }\n }\n\n return undefined;\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA;;;AA0BA;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6FA;;AAEA;;;;;;;;AAQA;;;;AAIA;;;;;;;;;;;;;;;;AAgBA;;AAEA;;;;;;;AAOA;;;;;;AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA;;AAIA;;;;;;;;;;AAUA;;;;;;"}
|
package/cjs/reactrouterv6.js
CHANGED
|
@@ -75,12 +75,30 @@ function getNormalizedName(
|
|
|
75
75
|
|
|
76
76
|
var branches = matchRoutes(routes, location);
|
|
77
77
|
|
|
78
|
+
let pathBuilder = '';
|
|
78
79
|
if (branches) {
|
|
79
80
|
for (let x = 0; x < branches.length; x++) {
|
|
80
|
-
|
|
81
|
-
|
|
81
|
+
var branch = branches[x];
|
|
82
|
+
var route = branch.route;
|
|
83
|
+
if (route) {
|
|
84
|
+
// Early return if index route
|
|
85
|
+
if (route.index) {
|
|
86
|
+
return [branch.pathname, 'route'];
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
var path = route.path;
|
|
82
90
|
if (path) {
|
|
83
|
-
|
|
91
|
+
var newPath = path[0] === '/' ? path : `/${path}`;
|
|
92
|
+
pathBuilder += newPath;
|
|
93
|
+
if (branch.pathname === location.pathname) {
|
|
94
|
+
// If the route defined on the element is something like
|
|
95
|
+
// <Route path="/stores/:storeId/products/:productId" element={<div>Product</div>} />
|
|
96
|
+
// We should check against the branch.pathname for the number of / seperators
|
|
97
|
+
if (utils.getNumberOfUrlSegments(pathBuilder) !== utils.getNumberOfUrlSegments(branch.pathname)) {
|
|
98
|
+
return [newPath, 'route'];
|
|
99
|
+
}
|
|
100
|
+
return [pathBuilder, 'route'];
|
|
101
|
+
}
|
|
84
102
|
}
|
|
85
103
|
}
|
|
86
104
|
}
|
|
@@ -155,7 +173,7 @@ function withSentryReactRouterV6Routing(Routes) {
|
|
|
155
173
|
|
|
156
174
|
// @ts-ignore Setting more specific React Component typing for `R` generic above
|
|
157
175
|
// will break advanced type inference done by react router params
|
|
158
|
-
return React__default.createElement(Routes, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber:
|
|
176
|
+
return React__default.createElement(Routes, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 211}} );
|
|
159
177
|
};
|
|
160
178
|
|
|
161
179
|
hoistNonReactStatics__default(SentryRoutes, Routes);
|
package/cjs/reactrouterv6.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reactrouterv6.js","sources":["../../src/reactrouterv6.tsx"],"sourcesContent":["// Inspired from Donnie McNeal's solution:\n// https://gist.github.com/wontondon/e8c4bdf2888875e4c755712e99279536\n\nimport { Transaction, TransactionContext, TransactionSource } from '@sentry/types';\nimport { getGlobalObject, logger } from '@sentry/utils';\nimport hoistNonReactStatics from 'hoist-non-react-statics';\nimport React from 'react';\n\nimport { Action, Location } from './types';\n\ninterface RouteObject {\n caseSensitive?: boolean;\n children?: RouteObject[];\n element?: React.ReactNode;\n index?: boolean;\n path?: string;\n}\n\ntype Params<Key extends string = string> = {\n readonly [key in Key]: string | undefined;\n};\n\ninterface RouteMatch<ParamKey extends string = string> {\n params: Params<ParamKey>;\n pathname: string;\n route: RouteObject;\n}\n\ntype UseEffect = (cb: () => void, deps: unknown[]) => void;\ntype UseLocation = () => Location;\ntype UseNavigationType = () => Action;\ntype CreateRoutesFromChildren = (children: JSX.Element[]) => RouteObject[];\ntype MatchRoutes = (routes: RouteObject[], location: Location) => RouteMatch[] | null;\n\nlet activeTransaction: Transaction | undefined;\n\nlet _useEffect: UseEffect;\nlet _useLocation: UseLocation;\nlet _useNavigationType: UseNavigationType;\nlet _createRoutesFromChildren: CreateRoutesFromChildren;\nlet _matchRoutes: MatchRoutes;\nlet _customStartTransaction: (context: TransactionContext) => Transaction | undefined;\nlet _startTransactionOnLocationChange: boolean;\n\nconst global = getGlobalObject<Window>();\n\nconst SENTRY_TAGS = {\n 'routing.instrumentation': 'react-router-v6',\n};\n\nexport function reactRouterV6Instrumentation(\n useEffect: UseEffect,\n useLocation: UseLocation,\n useNavigationType: UseNavigationType,\n createRoutesFromChildren: CreateRoutesFromChildren,\n matchRoutes: MatchRoutes,\n) {\n return (\n customStartTransaction: (context: TransactionContext) => Transaction | undefined,\n startTransactionOnPageLoad = true,\n startTransactionOnLocationChange = true,\n ): void => {\n const initPathName = global && global.location && global.location.pathname;\n if (startTransactionOnPageLoad && initPathName) {\n activeTransaction = customStartTransaction({\n name: initPathName,\n op: 'pageload',\n tags: SENTRY_TAGS,\n metadata: {\n source: 'url',\n },\n });\n }\n\n _useEffect = useEffect;\n _useLocation = useLocation;\n _useNavigationType = useNavigationType;\n _matchRoutes = matchRoutes;\n _createRoutesFromChildren = createRoutesFromChildren;\n\n _customStartTransaction = customStartTransaction;\n _startTransactionOnLocationChange = startTransactionOnLocationChange;\n };\n}\n\nfunction getNormalizedName(\n routes: RouteObject[],\n location: Location,\n matchRoutes: MatchRoutes,\n): [string, TransactionSource] {\n if (!routes || routes.length === 0 || !matchRoutes) {\n return [location.pathname, 'url'];\n }\n\n const branches = matchRoutes(routes, location);\n\n if (branches) {\n // eslint-disable-next-line @typescript-eslint/prefer-for-of\n for (let x = 0; x < branches.length; x++) {\n
|
|
1
|
+
{"version":3,"file":"reactrouterv6.js","sources":["../../src/reactrouterv6.tsx"],"sourcesContent":["// Inspired from Donnie McNeal's solution:\n// https://gist.github.com/wontondon/e8c4bdf2888875e4c755712e99279536\n\nimport { Transaction, TransactionContext, TransactionSource } from '@sentry/types';\nimport { getGlobalObject, getNumberOfUrlSegments, logger } from '@sentry/utils';\nimport hoistNonReactStatics from 'hoist-non-react-statics';\nimport React from 'react';\n\nimport { Action, Location } from './types';\n\ninterface RouteObject {\n caseSensitive?: boolean;\n children?: RouteObject[];\n element?: React.ReactNode;\n index?: boolean;\n path?: string;\n}\n\ntype Params<Key extends string = string> = {\n readonly [key in Key]: string | undefined;\n};\n\n// https://github.com/remix-run/react-router/blob/9fa54d643134cd75a0335581a75db8100ed42828/packages/react-router/lib/router.ts#L114-L134\ninterface RouteMatch<ParamKey extends string = string> {\n /**\n * The names and values of dynamic parameters in the URL.\n */\n params: Params<ParamKey>;\n /**\n * The portion of the URL pathname that was matched.\n */\n pathname: string;\n /**\n * The portion of the URL pathname that was matched before child routes.\n */\n pathnameBase: string;\n /**\n * The route object that was used to match.\n */\n route: RouteObject;\n}\n\ntype UseEffect = (cb: () => void, deps: unknown[]) => void;\ntype UseLocation = () => Location;\ntype UseNavigationType = () => Action;\ntype CreateRoutesFromChildren = (children: JSX.Element[]) => RouteObject[];\ntype MatchRoutes = (routes: RouteObject[], location: Location) => RouteMatch[] | null;\n\nlet activeTransaction: Transaction | undefined;\n\nlet _useEffect: UseEffect;\nlet _useLocation: UseLocation;\nlet _useNavigationType: UseNavigationType;\nlet _createRoutesFromChildren: CreateRoutesFromChildren;\nlet _matchRoutes: MatchRoutes;\nlet _customStartTransaction: (context: TransactionContext) => Transaction | undefined;\nlet _startTransactionOnLocationChange: boolean;\n\nconst global = getGlobalObject<Window>();\n\nconst SENTRY_TAGS = {\n 'routing.instrumentation': 'react-router-v6',\n};\n\nexport function reactRouterV6Instrumentation(\n useEffect: UseEffect,\n useLocation: UseLocation,\n useNavigationType: UseNavigationType,\n createRoutesFromChildren: CreateRoutesFromChildren,\n matchRoutes: MatchRoutes,\n) {\n return (\n customStartTransaction: (context: TransactionContext) => Transaction | undefined,\n startTransactionOnPageLoad = true,\n startTransactionOnLocationChange = true,\n ): void => {\n const initPathName = global && global.location && global.location.pathname;\n if (startTransactionOnPageLoad && initPathName) {\n activeTransaction = customStartTransaction({\n name: initPathName,\n op: 'pageload',\n tags: SENTRY_TAGS,\n metadata: {\n source: 'url',\n },\n });\n }\n\n _useEffect = useEffect;\n _useLocation = useLocation;\n _useNavigationType = useNavigationType;\n _matchRoutes = matchRoutes;\n _createRoutesFromChildren = createRoutesFromChildren;\n\n _customStartTransaction = customStartTransaction;\n _startTransactionOnLocationChange = startTransactionOnLocationChange;\n };\n}\n\nfunction getNormalizedName(\n routes: RouteObject[],\n location: Location,\n matchRoutes: MatchRoutes,\n): [string, TransactionSource] {\n if (!routes || routes.length === 0 || !matchRoutes) {\n return [location.pathname, 'url'];\n }\n\n const branches = matchRoutes(routes, location);\n\n let pathBuilder = '';\n if (branches) {\n // eslint-disable-next-line @typescript-eslint/prefer-for-of\n for (let x = 0; x < branches.length; x++) {\n const branch = branches[x];\n const route = branch.route;\n if (route) {\n // Early return if index route\n if (route.index) {\n return [branch.pathname, 'route'];\n }\n\n const path = route.path;\n if (path) {\n const newPath = path[0] === '/' ? path : `/${path}`;\n pathBuilder += newPath;\n if (branch.pathname === location.pathname) {\n // If the route defined on the element is something like\n // <Route path=\"/stores/:storeId/products/:productId\" element={<div>Product</div>} />\n // We should check against the branch.pathname for the number of / seperators\n if (getNumberOfUrlSegments(pathBuilder) !== getNumberOfUrlSegments(branch.pathname)) {\n return [newPath, 'route'];\n }\n return [pathBuilder, 'route'];\n }\n }\n }\n }\n }\n\n return [location.pathname, 'url'];\n}\n\nexport function withSentryReactRouterV6Routing<P extends Record<string, any>, R extends React.FC<P>>(Routes: R): R {\n if (\n !_useEffect ||\n !_useLocation ||\n !_useNavigationType ||\n !_createRoutesFromChildren ||\n !_matchRoutes ||\n !_customStartTransaction\n ) {\n __DEBUG_BUILD__ &&\n logger.warn('reactRouterV6Instrumentation was unable to wrap Routes because of one or more missing parameters.');\n\n return Routes;\n }\n\n let isBaseLocation: boolean = false;\n let routes: RouteObject[];\n\n const SentryRoutes: React.FC<P> = (props: P) => {\n const location = _useLocation();\n const navigationType = _useNavigationType();\n\n _useEffect(() => {\n // Performance concern:\n // This is repeated when <Routes /> is rendered.\n routes = _createRoutesFromChildren(props.children);\n isBaseLocation = true;\n\n if (activeTransaction) {\n const [name, source] = getNormalizedName(routes, location, _matchRoutes);\n activeTransaction.setName(name);\n activeTransaction.setMetadata({ source });\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [props.children]);\n\n _useEffect(() => {\n if (isBaseLocation) {\n if (activeTransaction) {\n activeTransaction.finish();\n }\n\n return;\n }\n\n if (_startTransactionOnLocationChange && (navigationType === 'PUSH' || navigationType === 'POP')) {\n if (activeTransaction) {\n activeTransaction.finish();\n }\n\n const [name, source] = getNormalizedName(routes, location, _matchRoutes);\n activeTransaction = _customStartTransaction({\n name,\n op: 'navigation',\n tags: SENTRY_TAGS,\n metadata: {\n source,\n },\n });\n }\n }, [props.children, location, navigationType, isBaseLocation]);\n\n isBaseLocation = false;\n\n // @ts-ignore Setting more specific React Component typing for `R` generic above\n // will break advanced type inference done by react router params\n return <Routes {...props} />;\n };\n\n hoistNonReactStatics(SentryRoutes, Routes);\n\n // @ts-ignore Setting more specific React Component typing for `R` generic above\n // will break advanced type inference done by react router params\n return SentryRoutes;\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAAA;;AAgDA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;;;;;;;;AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;;AAEA;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EA;;;"}
|
package/cjs/redux.js
CHANGED
|
@@ -41,7 +41,7 @@ function createReduxEnhancer(enhancerOptions) {
|
|
|
41
41
|
/* Set latest state to scope */
|
|
42
42
|
var transformedState = options.stateTransformer(newState);
|
|
43
43
|
if (typeof transformedState !== 'undefined' && transformedState !== null) {
|
|
44
|
-
scope.setContext('state', { type: 'redux', value: transformedState });
|
|
44
|
+
scope.setContext('state', { state: { type: 'redux', value: transformedState } });
|
|
45
45
|
} else {
|
|
46
46
|
scope.setContext('state', null);
|
|
47
47
|
}
|
package/cjs/redux.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"redux.js","sources":["../../src/redux.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { configureScope } from '@sentry/browser';\nimport { Scope } from '@sentry/types';\n\ninterface Action<T = any> {\n type: T;\n}\n\ninterface AnyAction extends Action {\n [extraProps: string]: any;\n}\n\ntype Reducer<S = any, A extends Action = AnyAction> = (state: S | undefined, action: A) => S;\n\ntype Dispatch<A extends Action = AnyAction> = <T extends A>(action: T, ...extraArgs: any[]) => T;\n\ntype ExtendState<State, Extension> = [Extension] extends [never] ? State : State & Extension;\n\ntype Unsubscribe = () => void;\n\ninterface Store<S = any, A extends Action = AnyAction, StateExt = never, Ext = Record<string, unknown>> {\n dispatch: Dispatch<A>;\n getState(): S;\n subscribe(listener: () => void): Unsubscribe;\n replaceReducer<NewState, NewActions extends Action>(\n nextReducer: Reducer<NewState, NewActions>,\n ): Store<ExtendState<NewState, StateExt>, NewActions, StateExt, Ext> & Ext;\n}\n\ndeclare const $CombinedState: unique symbol;\n\ntype CombinedState<S> = { readonly [$CombinedState]?: undefined } & S;\n\ntype PreloadedState<S> = Required<S> extends {\n [$CombinedState]: undefined;\n}\n ? S extends CombinedState<infer S1>\n ? { [K in keyof S1]?: S1[K] extends Record<string, unknown> ? PreloadedState<S1[K]> : S1[K] }\n : never\n : { [K in keyof S]: S[K] extends string | number | boolean | symbol ? S[K] : PreloadedState<S[K]> };\n\ntype StoreEnhancerStoreCreator<Ext = Record<string, unknown>, StateExt = never> = <\n S = any,\n A extends Action = AnyAction,\n>(\n reducer: Reducer<S, A>,\n preloadedState?: PreloadedState<S>,\n) => Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext;\n\nexport interface SentryEnhancerOptions<S = any> {\n /**\n * Transforms the state before attaching it to an event.\n * Use this to remove any private data before sending it to Sentry.\n * Return null to not attach the state.\n */\n stateTransformer(state: S | undefined): (S & any) | null;\n /**\n * Transforms the action before sending it as a breadcrumb.\n * Use this to remove any private data before sending it to Sentry.\n * Return null to not send the breadcrumb.\n */\n actionTransformer(action: AnyAction): AnyAction | null;\n /**\n * Called on every state update, configure the Sentry Scope with the redux state.\n */\n configureScopeWithState?(scope: Scope, state: S): void;\n}\n\nconst ACTION_BREADCRUMB_CATEGORY = 'redux.action';\nconst ACTION_BREADCRUMB_TYPE = 'info';\n\nconst defaultOptions: SentryEnhancerOptions = {\n actionTransformer: action => action,\n stateTransformer: state => state || null,\n};\n\n/**\n * Creates an enhancer that would be passed to Redux's createStore to log actions and the latest state to Sentry.\n *\n * @param enhancerOptions Options to pass to the enhancer\n */\nfunction createReduxEnhancer(enhancerOptions?: Partial<SentryEnhancerOptions>): any {\n // Note: We return an any type as to not have type conflicts.\n const options = {\n ...defaultOptions,\n ...enhancerOptions,\n };\n\n return (next: StoreEnhancerStoreCreator): StoreEnhancerStoreCreator =>\n <S = any, A extends Action = AnyAction>(reducer: Reducer<S, A>, initialState?: PreloadedState<S>) => {\n const sentryReducer: Reducer<S, A> = (state, action): S => {\n const newState = reducer(state, action);\n\n configureScope(scope => {\n /* Action breadcrumbs */\n const transformedAction = options.actionTransformer(action);\n if (typeof transformedAction !== 'undefined' && transformedAction !== null) {\n scope.addBreadcrumb({\n category: ACTION_BREADCRUMB_CATEGORY,\n data: transformedAction,\n type: ACTION_BREADCRUMB_TYPE,\n });\n }\n\n /* Set latest state to scope */\n const transformedState = options.stateTransformer(newState);\n if (typeof transformedState !== 'undefined' && transformedState !== null) {\n scope.setContext('state', { type: 'redux', value: transformedState });\n } else {\n scope.setContext('state', null);\n }\n\n /* Allow user to configure scope with latest state */\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const { configureScopeWithState } = options;\n if (typeof configureScopeWithState === 'function') {\n configureScopeWithState(scope, newState);\n }\n });\n\n return newState;\n };\n\n return next(sentryReducer, initialState);\n };\n}\n\nexport { createReduxEnhancer };\n"],"names":[],"mappings":";;;;AAoEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;"}
|
|
1
|
+
{"version":3,"file":"redux.js","sources":["../../src/redux.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { configureScope } from '@sentry/browser';\nimport { Scope } from '@sentry/types';\n\ninterface Action<T = any> {\n type: T;\n}\n\ninterface AnyAction extends Action {\n [extraProps: string]: any;\n}\n\ntype Reducer<S = any, A extends Action = AnyAction> = (state: S | undefined, action: A) => S;\n\ntype Dispatch<A extends Action = AnyAction> = <T extends A>(action: T, ...extraArgs: any[]) => T;\n\ntype ExtendState<State, Extension> = [Extension] extends [never] ? State : State & Extension;\n\ntype Unsubscribe = () => void;\n\ninterface Store<S = any, A extends Action = AnyAction, StateExt = never, Ext = Record<string, unknown>> {\n dispatch: Dispatch<A>;\n getState(): S;\n subscribe(listener: () => void): Unsubscribe;\n replaceReducer<NewState, NewActions extends Action>(\n nextReducer: Reducer<NewState, NewActions>,\n ): Store<ExtendState<NewState, StateExt>, NewActions, StateExt, Ext> & Ext;\n}\n\ndeclare const $CombinedState: unique symbol;\n\ntype CombinedState<S> = { readonly [$CombinedState]?: undefined } & S;\n\ntype PreloadedState<S> = Required<S> extends {\n [$CombinedState]: undefined;\n}\n ? S extends CombinedState<infer S1>\n ? { [K in keyof S1]?: S1[K] extends Record<string, unknown> ? PreloadedState<S1[K]> : S1[K] }\n : never\n : { [K in keyof S]: S[K] extends string | number | boolean | symbol ? S[K] : PreloadedState<S[K]> };\n\ntype StoreEnhancerStoreCreator<Ext = Record<string, unknown>, StateExt = never> = <\n S = any,\n A extends Action = AnyAction,\n>(\n reducer: Reducer<S, A>,\n preloadedState?: PreloadedState<S>,\n) => Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext;\n\nexport interface SentryEnhancerOptions<S = any> {\n /**\n * Transforms the state before attaching it to an event.\n * Use this to remove any private data before sending it to Sentry.\n * Return null to not attach the state.\n */\n stateTransformer(state: S | undefined): (S & any) | null;\n /**\n * Transforms the action before sending it as a breadcrumb.\n * Use this to remove any private data before sending it to Sentry.\n * Return null to not send the breadcrumb.\n */\n actionTransformer(action: AnyAction): AnyAction | null;\n /**\n * Called on every state update, configure the Sentry Scope with the redux state.\n */\n configureScopeWithState?(scope: Scope, state: S): void;\n}\n\nconst ACTION_BREADCRUMB_CATEGORY = 'redux.action';\nconst ACTION_BREADCRUMB_TYPE = 'info';\n\nconst defaultOptions: SentryEnhancerOptions = {\n actionTransformer: action => action,\n stateTransformer: state => state || null,\n};\n\n/**\n * Creates an enhancer that would be passed to Redux's createStore to log actions and the latest state to Sentry.\n *\n * @param enhancerOptions Options to pass to the enhancer\n */\nfunction createReduxEnhancer(enhancerOptions?: Partial<SentryEnhancerOptions>): any {\n // Note: We return an any type as to not have type conflicts.\n const options = {\n ...defaultOptions,\n ...enhancerOptions,\n };\n\n return (next: StoreEnhancerStoreCreator): StoreEnhancerStoreCreator =>\n <S = any, A extends Action = AnyAction>(reducer: Reducer<S, A>, initialState?: PreloadedState<S>) => {\n const sentryReducer: Reducer<S, A> = (state, action): S => {\n const newState = reducer(state, action);\n\n configureScope(scope => {\n /* Action breadcrumbs */\n const transformedAction = options.actionTransformer(action);\n if (typeof transformedAction !== 'undefined' && transformedAction !== null) {\n scope.addBreadcrumb({\n category: ACTION_BREADCRUMB_CATEGORY,\n data: transformedAction,\n type: ACTION_BREADCRUMB_TYPE,\n });\n }\n\n /* Set latest state to scope */\n const transformedState = options.stateTransformer(newState);\n if (typeof transformedState !== 'undefined' && transformedState !== null) {\n scope.setContext('state', { state: { type: 'redux', value: transformedState } });\n } else {\n scope.setContext('state', null);\n }\n\n /* Allow user to configure scope with latest state */\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const { configureScopeWithState } = options;\n if (typeof configureScopeWithState === 'function') {\n configureScopeWithState(scope, newState);\n }\n });\n\n return newState;\n };\n\n return next(sentryReducer, initialState);\n };\n}\n\nexport { createReduxEnhancer };\n"],"names":[],"mappings":";;;;AAoEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;"}
|
package/esm/profiler.js
CHANGED
|
@@ -17,6 +17,10 @@ class Profiler extends React.Component {
|
|
|
17
17
|
* Made protected for the React Native SDK to access
|
|
18
18
|
*/
|
|
19
19
|
__init() {this._mountSpan = undefined;}
|
|
20
|
+
/**
|
|
21
|
+
* The span that represents the duration of time between shouldComponentUpdate and componentDidUpdate
|
|
22
|
+
*/
|
|
23
|
+
__init2() {this._updateSpan = undefined;}
|
|
20
24
|
|
|
21
25
|
static __initStatic() {this.defaultProps = {
|
|
22
26
|
disabled: false,
|
|
@@ -25,7 +29,7 @@ class Profiler extends React.Component {
|
|
|
25
29
|
};}
|
|
26
30
|
|
|
27
31
|
constructor(props) {
|
|
28
|
-
super(props);Profiler.prototype.__init.call(this);;
|
|
32
|
+
super(props);Profiler.prototype.__init.call(this);Profiler.prototype.__init2.call(this);;
|
|
29
33
|
const { name, disabled = false } = this.props;
|
|
30
34
|
|
|
31
35
|
if (disabled) {
|
|
@@ -48,8 +52,8 @@ class Profiler extends React.Component {
|
|
|
48
52
|
}
|
|
49
53
|
}
|
|
50
54
|
|
|
51
|
-
|
|
52
|
-
// Only generate an update span if
|
|
55
|
+
shouldComponentUpdate({ updateProps, includeUpdates = true }) {
|
|
56
|
+
// Only generate an update span if includeUpdates is true, if there is a valid mountSpan,
|
|
53
57
|
// and if the updateProps have changed. It is ok to not do a deep equality check here as it is expensive.
|
|
54
58
|
// We are just trying to give baseline clues for further investigation.
|
|
55
59
|
if (includeUpdates && this._mountSpan && updateProps !== this.props.updateProps) {
|
|
@@ -57,20 +61,26 @@ class Profiler extends React.Component {
|
|
|
57
61
|
// set as data on the span. We just store the prop keys as the values could be potenially very large.
|
|
58
62
|
var changedProps = Object.keys(updateProps).filter(k => updateProps[k] !== this.props.updateProps[k]);
|
|
59
63
|
if (changedProps.length > 0) {
|
|
60
|
-
// The update span is a point in time span with 0 duration, just signifying that the component
|
|
61
|
-
// has been updated.
|
|
62
64
|
var now = timestampWithMs();
|
|
63
|
-
this._mountSpan.startChild({
|
|
65
|
+
this._updateSpan = this._mountSpan.startChild({
|
|
64
66
|
data: {
|
|
65
67
|
changedProps,
|
|
66
68
|
},
|
|
67
69
|
description: `<${this.props.name}>`,
|
|
68
|
-
endTimestamp: now,
|
|
69
70
|
op: REACT_UPDATE_OP,
|
|
70
71
|
startTimestamp: now,
|
|
71
72
|
});
|
|
72
73
|
}
|
|
73
74
|
}
|
|
75
|
+
|
|
76
|
+
return true;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
componentDidUpdate() {
|
|
80
|
+
if (this._updateSpan) {
|
|
81
|
+
this._updateSpan.finish();
|
|
82
|
+
this._updateSpan = undefined;
|
|
83
|
+
}
|
|
74
84
|
}
|
|
75
85
|
|
|
76
86
|
// If a component is unmounted, we can say it is no longer on the screen.
|
|
@@ -112,8 +122,8 @@ function withProfiler(
|
|
|
112
122
|
(options && options.name) || WrappedComponent.displayName || WrappedComponent.name || UNKNOWN_COMPONENT;
|
|
113
123
|
|
|
114
124
|
var Wrapped = (props) => (
|
|
115
|
-
React.createElement(Profiler, { ...options, name: componentDisplayName, updateProps: props, __self: this, __source: {fileName: _jsxFileName, lineNumber:
|
|
116
|
-
, React.createElement(WrappedComponent, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber:
|
|
125
|
+
React.createElement(Profiler, { ...options, name: componentDisplayName, updateProps: props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 143}}
|
|
126
|
+
, React.createElement(WrappedComponent, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 144}} )
|
|
117
127
|
)
|
|
118
128
|
);
|
|
119
129
|
|
package/esm/profiler.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profiler.js","sources":["../../src/profiler.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { getCurrentHub, Hub } from '@sentry/browser';\nimport { Span, Transaction } from '@sentry/types';\nimport { timestampWithMs } from '@sentry/utils';\nimport hoistNonReactStatics from 'hoist-non-react-statics';\nimport * as React from 'react';\n\nimport { REACT_MOUNT_OP, REACT_RENDER_OP, REACT_UPDATE_OP } from './constants';\n\nexport const UNKNOWN_COMPONENT = 'unknown';\n\nexport type ProfilerProps = {\n // The name of the component being profiled.\n name: string;\n // If the Profiler is disabled. False by default. This is useful if you want to disable profilers\n // in certain environments.\n disabled?: boolean;\n // If time component is on page should be displayed as spans. True by default.\n includeRender?: boolean;\n // If component updates should be displayed as spans. True by default.\n includeUpdates?: boolean;\n // props given to component being profiled.\n updateProps: { [key: string]: unknown };\n};\n\n/**\n * The Profiler component leverages Sentry's Tracing integration to generate\n * spans based on component lifecycles.\n */\nclass Profiler extends React.Component<ProfilerProps> {\n /**\n * The span of the mount activity\n * Made protected for the React Native SDK to access\n */\n protected _mountSpan: Span | undefined = undefined;\n\n // eslint-disable-next-line @typescript-eslint/member-ordering\n public static defaultProps: Partial<ProfilerProps> = {\n disabled: false,\n includeRender: true,\n includeUpdates: true,\n };\n\n public constructor(props: ProfilerProps) {\n super(props);\n const { name, disabled = false } = this.props;\n\n if (disabled) {\n return;\n }\n\n const activeTransaction = getActiveTransaction();\n if (activeTransaction) {\n this._mountSpan = activeTransaction.startChild({\n description: `<${name}>`,\n op: REACT_MOUNT_OP,\n });\n }\n }\n\n // If a component mounted, we can finish the mount activity.\n public componentDidMount(): void {\n if (this._mountSpan) {\n this._mountSpan.finish();\n }\n }\n\n public
|
|
1
|
+
{"version":3,"file":"profiler.js","sources":["../../src/profiler.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { getCurrentHub, Hub } from '@sentry/browser';\nimport { Span, Transaction } from '@sentry/types';\nimport { timestampWithMs } from '@sentry/utils';\nimport hoistNonReactStatics from 'hoist-non-react-statics';\nimport * as React from 'react';\n\nimport { REACT_MOUNT_OP, REACT_RENDER_OP, REACT_UPDATE_OP } from './constants';\n\nexport const UNKNOWN_COMPONENT = 'unknown';\n\nexport type ProfilerProps = {\n // The name of the component being profiled.\n name: string;\n // If the Profiler is disabled. False by default. This is useful if you want to disable profilers\n // in certain environments.\n disabled?: boolean;\n // If time component is on page should be displayed as spans. True by default.\n includeRender?: boolean;\n // If component updates should be displayed as spans. True by default.\n includeUpdates?: boolean;\n // props given to component being profiled.\n updateProps: { [key: string]: unknown };\n};\n\n/**\n * The Profiler component leverages Sentry's Tracing integration to generate\n * spans based on component lifecycles.\n */\nclass Profiler extends React.Component<ProfilerProps> {\n /**\n * The span of the mount activity\n * Made protected for the React Native SDK to access\n */\n protected _mountSpan: Span | undefined = undefined;\n /**\n * The span that represents the duration of time between shouldComponentUpdate and componentDidUpdate\n */\n protected _updateSpan: Span | undefined = undefined;\n\n // eslint-disable-next-line @typescript-eslint/member-ordering\n public static defaultProps: Partial<ProfilerProps> = {\n disabled: false,\n includeRender: true,\n includeUpdates: true,\n };\n\n public constructor(props: ProfilerProps) {\n super(props);\n const { name, disabled = false } = this.props;\n\n if (disabled) {\n return;\n }\n\n const activeTransaction = getActiveTransaction();\n if (activeTransaction) {\n this._mountSpan = activeTransaction.startChild({\n description: `<${name}>`,\n op: REACT_MOUNT_OP,\n });\n }\n }\n\n // If a component mounted, we can finish the mount activity.\n public componentDidMount(): void {\n if (this._mountSpan) {\n this._mountSpan.finish();\n }\n }\n\n public 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 = timestampWithMs();\n this._updateSpan = this._mountSpan.startChild({\n data: {\n changedProps,\n },\n description: `<${this.props.name}>`,\n op: REACT_UPDATE_OP,\n startTimestamp: now,\n });\n }\n }\n\n return true;\n }\n\n public componentDidUpdate(): void {\n if (this._updateSpan) {\n this._updateSpan.finish();\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 { name, includeRender = true } = this.props;\n\n if (this._mountSpan && includeRender) {\n // If we were able to obtain the spanId of the mount activity, we should set the\n // next activity as a child to the component mount activity.\n this._mountSpan.startChild({\n description: `<${name}>`,\n endTimestamp: timestampWithMs(),\n op: REACT_RENDER_OP,\n startTimestamp: this._mountSpan.endTimestamp,\n });\n }\n }\n\n public render(): React.ReactNode {\n return this.props.children;\n }\n}\n\n/**\n * withProfiler is a higher order component that wraps a\n * component in a {@link Profiler} component. It is recommended that\n * the higher order component be used over the regular {@link Profiler} component.\n *\n * @param WrappedComponent component that is wrapped by Profiler\n * @param options the {@link ProfilerProps} you can pass into the Profiler\n */\nfunction withProfiler<P extends Record<string, any>>(\n WrappedComponent: React.ComponentType<P>,\n // We do not want to have `updateProps` given in options, it is instead filled through the HOC.\n options?: Pick<Partial<ProfilerProps>, Exclude<keyof ProfilerProps, 'updateProps'>>,\n): React.FC<P> {\n const componentDisplayName =\n (options && options.name) || WrappedComponent.displayName || WrappedComponent.name || UNKNOWN_COMPONENT;\n\n const Wrapped: React.FC<P> = (props: P) => (\n <Profiler {...options} name={componentDisplayName} updateProps={props}>\n <WrappedComponent {...props} />\n </Profiler>\n );\n\n Wrapped.displayName = `profiler(${componentDisplayName})`;\n\n // Copy over static methods from Wrapped component to Profiler HOC\n // See: https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over\n hoistNonReactStatics(Wrapped, WrappedComponent);\n return Wrapped;\n}\n\n/**\n *\n * `useProfiler` is a React hook that profiles a React component.\n *\n * Requires React 16.8 or above.\n * @param name displayName of component being profiled\n */\nfunction useProfiler(\n name: string,\n options: { disabled?: boolean; hasRenderSpan?: boolean } = {\n disabled: false,\n hasRenderSpan: true,\n },\n): void {\n const [mountSpan] = React.useState(() => {\n if (options && options.disabled) {\n return undefined;\n }\n\n const activeTransaction = getActiveTransaction();\n if (activeTransaction) {\n return activeTransaction.startChild({\n description: `<${name}>`,\n op: REACT_MOUNT_OP,\n });\n }\n\n return undefined;\n });\n\n React.useEffect(() => {\n if (mountSpan) {\n mountSpan.finish();\n }\n\n return (): void => {\n if (mountSpan && options.hasRenderSpan) {\n mountSpan.startChild({\n description: `<${name}>`,\n endTimestamp: timestampWithMs(),\n op: REACT_RENDER_OP,\n startTimestamp: mountSpan.endTimestamp,\n });\n }\n };\n // We only want this to run once.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n}\n\nexport { withProfiler, Profiler, useProfiler };\n\n/** Grabs active transaction off scope */\nexport function getActiveTransaction<T extends Transaction>(hub: Hub = getCurrentHub()): T | undefined {\n if (hub) {\n const scope = hub.getScope();\n if (scope) {\n return scope.getTransaction() as T | undefined;\n }\n }\n\n return undefined;\n}\n"],"names":[],"mappings":";;;;;;AAAA,2GASA;;;AAiBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAGA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}
|
package/esm/reactrouterv6.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { getGlobalObject, logger } from '@sentry/utils';
|
|
1
|
+
import { getGlobalObject, getNumberOfUrlSegments, logger } from '@sentry/utils';
|
|
2
2
|
import hoistNonReactStatics from 'hoist-non-react-statics';
|
|
3
3
|
import React__default from 'react';
|
|
4
4
|
|
|
@@ -66,12 +66,30 @@ function getNormalizedName(
|
|
|
66
66
|
|
|
67
67
|
var branches = matchRoutes(routes, location);
|
|
68
68
|
|
|
69
|
+
let pathBuilder = '';
|
|
69
70
|
if (branches) {
|
|
70
71
|
for (let x = 0; x < branches.length; x++) {
|
|
71
|
-
|
|
72
|
-
|
|
72
|
+
var branch = branches[x];
|
|
73
|
+
var route = branch.route;
|
|
74
|
+
if (route) {
|
|
75
|
+
// Early return if index route
|
|
76
|
+
if (route.index) {
|
|
77
|
+
return [branch.pathname, 'route'];
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
var path = route.path;
|
|
73
81
|
if (path) {
|
|
74
|
-
|
|
82
|
+
var newPath = path[0] === '/' ? path : `/${path}`;
|
|
83
|
+
pathBuilder += newPath;
|
|
84
|
+
if (branch.pathname === location.pathname) {
|
|
85
|
+
// If the route defined on the element is something like
|
|
86
|
+
// <Route path="/stores/:storeId/products/:productId" element={<div>Product</div>} />
|
|
87
|
+
// We should check against the branch.pathname for the number of / seperators
|
|
88
|
+
if (getNumberOfUrlSegments(pathBuilder) !== getNumberOfUrlSegments(branch.pathname)) {
|
|
89
|
+
return [newPath, 'route'];
|
|
90
|
+
}
|
|
91
|
+
return [pathBuilder, 'route'];
|
|
92
|
+
}
|
|
75
93
|
}
|
|
76
94
|
}
|
|
77
95
|
}
|
|
@@ -146,7 +164,7 @@ function withSentryReactRouterV6Routing(Routes) {
|
|
|
146
164
|
|
|
147
165
|
// @ts-ignore Setting more specific React Component typing for `R` generic above
|
|
148
166
|
// will break advanced type inference done by react router params
|
|
149
|
-
return React__default.createElement(Routes, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber:
|
|
167
|
+
return React__default.createElement(Routes, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 211}} );
|
|
150
168
|
};
|
|
151
169
|
|
|
152
170
|
hoistNonReactStatics(SentryRoutes, Routes);
|
package/esm/reactrouterv6.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reactrouterv6.js","sources":["../../src/reactrouterv6.tsx"],"sourcesContent":["// Inspired from Donnie McNeal's solution:\n// https://gist.github.com/wontondon/e8c4bdf2888875e4c755712e99279536\n\nimport { Transaction, TransactionContext, TransactionSource } from '@sentry/types';\nimport { getGlobalObject, logger } from '@sentry/utils';\nimport hoistNonReactStatics from 'hoist-non-react-statics';\nimport React from 'react';\n\nimport { Action, Location } from './types';\n\ninterface RouteObject {\n caseSensitive?: boolean;\n children?: RouteObject[];\n element?: React.ReactNode;\n index?: boolean;\n path?: string;\n}\n\ntype Params<Key extends string = string> = {\n readonly [key in Key]: string | undefined;\n};\n\ninterface RouteMatch<ParamKey extends string = string> {\n params: Params<ParamKey>;\n pathname: string;\n route: RouteObject;\n}\n\ntype UseEffect = (cb: () => void, deps: unknown[]) => void;\ntype UseLocation = () => Location;\ntype UseNavigationType = () => Action;\ntype CreateRoutesFromChildren = (children: JSX.Element[]) => RouteObject[];\ntype MatchRoutes = (routes: RouteObject[], location: Location) => RouteMatch[] | null;\n\nlet activeTransaction: Transaction | undefined;\n\nlet _useEffect: UseEffect;\nlet _useLocation: UseLocation;\nlet _useNavigationType: UseNavigationType;\nlet _createRoutesFromChildren: CreateRoutesFromChildren;\nlet _matchRoutes: MatchRoutes;\nlet _customStartTransaction: (context: TransactionContext) => Transaction | undefined;\nlet _startTransactionOnLocationChange: boolean;\n\nconst global = getGlobalObject<Window>();\n\nconst SENTRY_TAGS = {\n 'routing.instrumentation': 'react-router-v6',\n};\n\nexport function reactRouterV6Instrumentation(\n useEffect: UseEffect,\n useLocation: UseLocation,\n useNavigationType: UseNavigationType,\n createRoutesFromChildren: CreateRoutesFromChildren,\n matchRoutes: MatchRoutes,\n) {\n return (\n customStartTransaction: (context: TransactionContext) => Transaction | undefined,\n startTransactionOnPageLoad = true,\n startTransactionOnLocationChange = true,\n ): void => {\n const initPathName = global && global.location && global.location.pathname;\n if (startTransactionOnPageLoad && initPathName) {\n activeTransaction = customStartTransaction({\n name: initPathName,\n op: 'pageload',\n tags: SENTRY_TAGS,\n metadata: {\n source: 'url',\n },\n });\n }\n\n _useEffect = useEffect;\n _useLocation = useLocation;\n _useNavigationType = useNavigationType;\n _matchRoutes = matchRoutes;\n _createRoutesFromChildren = createRoutesFromChildren;\n\n _customStartTransaction = customStartTransaction;\n _startTransactionOnLocationChange = startTransactionOnLocationChange;\n };\n}\n\nfunction getNormalizedName(\n routes: RouteObject[],\n location: Location,\n matchRoutes: MatchRoutes,\n): [string, TransactionSource] {\n if (!routes || routes.length === 0 || !matchRoutes) {\n return [location.pathname, 'url'];\n }\n\n const branches = matchRoutes(routes, location);\n\n if (branches) {\n // eslint-disable-next-line @typescript-eslint/prefer-for-of\n for (let x = 0; x < branches.length; x++) {\n
|
|
1
|
+
{"version":3,"file":"reactrouterv6.js","sources":["../../src/reactrouterv6.tsx"],"sourcesContent":["// Inspired from Donnie McNeal's solution:\n// https://gist.github.com/wontondon/e8c4bdf2888875e4c755712e99279536\n\nimport { Transaction, TransactionContext, TransactionSource } from '@sentry/types';\nimport { getGlobalObject, getNumberOfUrlSegments, logger } from '@sentry/utils';\nimport hoistNonReactStatics from 'hoist-non-react-statics';\nimport React from 'react';\n\nimport { Action, Location } from './types';\n\ninterface RouteObject {\n caseSensitive?: boolean;\n children?: RouteObject[];\n element?: React.ReactNode;\n index?: boolean;\n path?: string;\n}\n\ntype Params<Key extends string = string> = {\n readonly [key in Key]: string | undefined;\n};\n\n// https://github.com/remix-run/react-router/blob/9fa54d643134cd75a0335581a75db8100ed42828/packages/react-router/lib/router.ts#L114-L134\ninterface RouteMatch<ParamKey extends string = string> {\n /**\n * The names and values of dynamic parameters in the URL.\n */\n params: Params<ParamKey>;\n /**\n * The portion of the URL pathname that was matched.\n */\n pathname: string;\n /**\n * The portion of the URL pathname that was matched before child routes.\n */\n pathnameBase: string;\n /**\n * The route object that was used to match.\n */\n route: RouteObject;\n}\n\ntype UseEffect = (cb: () => void, deps: unknown[]) => void;\ntype UseLocation = () => Location;\ntype UseNavigationType = () => Action;\ntype CreateRoutesFromChildren = (children: JSX.Element[]) => RouteObject[];\ntype MatchRoutes = (routes: RouteObject[], location: Location) => RouteMatch[] | null;\n\nlet activeTransaction: Transaction | undefined;\n\nlet _useEffect: UseEffect;\nlet _useLocation: UseLocation;\nlet _useNavigationType: UseNavigationType;\nlet _createRoutesFromChildren: CreateRoutesFromChildren;\nlet _matchRoutes: MatchRoutes;\nlet _customStartTransaction: (context: TransactionContext) => Transaction | undefined;\nlet _startTransactionOnLocationChange: boolean;\n\nconst global = getGlobalObject<Window>();\n\nconst SENTRY_TAGS = {\n 'routing.instrumentation': 'react-router-v6',\n};\n\nexport function reactRouterV6Instrumentation(\n useEffect: UseEffect,\n useLocation: UseLocation,\n useNavigationType: UseNavigationType,\n createRoutesFromChildren: CreateRoutesFromChildren,\n matchRoutes: MatchRoutes,\n) {\n return (\n customStartTransaction: (context: TransactionContext) => Transaction | undefined,\n startTransactionOnPageLoad = true,\n startTransactionOnLocationChange = true,\n ): void => {\n const initPathName = global && global.location && global.location.pathname;\n if (startTransactionOnPageLoad && initPathName) {\n activeTransaction = customStartTransaction({\n name: initPathName,\n op: 'pageload',\n tags: SENTRY_TAGS,\n metadata: {\n source: 'url',\n },\n });\n }\n\n _useEffect = useEffect;\n _useLocation = useLocation;\n _useNavigationType = useNavigationType;\n _matchRoutes = matchRoutes;\n _createRoutesFromChildren = createRoutesFromChildren;\n\n _customStartTransaction = customStartTransaction;\n _startTransactionOnLocationChange = startTransactionOnLocationChange;\n };\n}\n\nfunction getNormalizedName(\n routes: RouteObject[],\n location: Location,\n matchRoutes: MatchRoutes,\n): [string, TransactionSource] {\n if (!routes || routes.length === 0 || !matchRoutes) {\n return [location.pathname, 'url'];\n }\n\n const branches = matchRoutes(routes, location);\n\n let pathBuilder = '';\n if (branches) {\n // eslint-disable-next-line @typescript-eslint/prefer-for-of\n for (let x = 0; x < branches.length; x++) {\n const branch = branches[x];\n const route = branch.route;\n if (route) {\n // Early return if index route\n if (route.index) {\n return [branch.pathname, 'route'];\n }\n\n const path = route.path;\n if (path) {\n const newPath = path[0] === '/' ? path : `/${path}`;\n pathBuilder += newPath;\n if (branch.pathname === location.pathname) {\n // If the route defined on the element is something like\n // <Route path=\"/stores/:storeId/products/:productId\" element={<div>Product</div>} />\n // We should check against the branch.pathname for the number of / seperators\n if (getNumberOfUrlSegments(pathBuilder) !== getNumberOfUrlSegments(branch.pathname)) {\n return [newPath, 'route'];\n }\n return [pathBuilder, 'route'];\n }\n }\n }\n }\n }\n\n return [location.pathname, 'url'];\n}\n\nexport function withSentryReactRouterV6Routing<P extends Record<string, any>, R extends React.FC<P>>(Routes: R): R {\n if (\n !_useEffect ||\n !_useLocation ||\n !_useNavigationType ||\n !_createRoutesFromChildren ||\n !_matchRoutes ||\n !_customStartTransaction\n ) {\n __DEBUG_BUILD__ &&\n logger.warn('reactRouterV6Instrumentation was unable to wrap Routes because of one or more missing parameters.');\n\n return Routes;\n }\n\n let isBaseLocation: boolean = false;\n let routes: RouteObject[];\n\n const SentryRoutes: React.FC<P> = (props: P) => {\n const location = _useLocation();\n const navigationType = _useNavigationType();\n\n _useEffect(() => {\n // Performance concern:\n // This is repeated when <Routes /> is rendered.\n routes = _createRoutesFromChildren(props.children);\n isBaseLocation = true;\n\n if (activeTransaction) {\n const [name, source] = getNormalizedName(routes, location, _matchRoutes);\n activeTransaction.setName(name);\n activeTransaction.setMetadata({ source });\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [props.children]);\n\n _useEffect(() => {\n if (isBaseLocation) {\n if (activeTransaction) {\n activeTransaction.finish();\n }\n\n return;\n }\n\n if (_startTransactionOnLocationChange && (navigationType === 'PUSH' || navigationType === 'POP')) {\n if (activeTransaction) {\n activeTransaction.finish();\n }\n\n const [name, source] = getNormalizedName(routes, location, _matchRoutes);\n activeTransaction = _customStartTransaction({\n name,\n op: 'navigation',\n tags: SENTRY_TAGS,\n metadata: {\n source,\n },\n });\n }\n }, [props.children, location, navigationType, isBaseLocation]);\n\n isBaseLocation = false;\n\n // @ts-ignore Setting more specific React Component typing for `R` generic above\n // will break advanced type inference done by react router params\n return <Routes {...props} />;\n };\n\n hoistNonReactStatics(SentryRoutes, Routes);\n\n // @ts-ignore Setting more specific React Component typing for `R` generic above\n // will break advanced type inference done by react router params\n return SentryRoutes;\n}\n"],"names":[],"mappings":";;;;AAAA;;AAgDA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}
|
package/esm/redux.js
CHANGED
|
@@ -39,7 +39,7 @@ function createReduxEnhancer(enhancerOptions) {
|
|
|
39
39
|
/* Set latest state to scope */
|
|
40
40
|
var transformedState = options.stateTransformer(newState);
|
|
41
41
|
if (typeof transformedState !== 'undefined' && transformedState !== null) {
|
|
42
|
-
scope.setContext('state', { type: 'redux', value: transformedState });
|
|
42
|
+
scope.setContext('state', { state: { type: 'redux', value: transformedState } });
|
|
43
43
|
} else {
|
|
44
44
|
scope.setContext('state', null);
|
|
45
45
|
}
|
package/esm/redux.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"redux.js","sources":["../../src/redux.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { configureScope } from '@sentry/browser';\nimport { Scope } from '@sentry/types';\n\ninterface Action<T = any> {\n type: T;\n}\n\ninterface AnyAction extends Action {\n [extraProps: string]: any;\n}\n\ntype Reducer<S = any, A extends Action = AnyAction> = (state: S | undefined, action: A) => S;\n\ntype Dispatch<A extends Action = AnyAction> = <T extends A>(action: T, ...extraArgs: any[]) => T;\n\ntype ExtendState<State, Extension> = [Extension] extends [never] ? State : State & Extension;\n\ntype Unsubscribe = () => void;\n\ninterface Store<S = any, A extends Action = AnyAction, StateExt = never, Ext = Record<string, unknown>> {\n dispatch: Dispatch<A>;\n getState(): S;\n subscribe(listener: () => void): Unsubscribe;\n replaceReducer<NewState, NewActions extends Action>(\n nextReducer: Reducer<NewState, NewActions>,\n ): Store<ExtendState<NewState, StateExt>, NewActions, StateExt, Ext> & Ext;\n}\n\ndeclare const $CombinedState: unique symbol;\n\ntype CombinedState<S> = { readonly [$CombinedState]?: undefined } & S;\n\ntype PreloadedState<S> = Required<S> extends {\n [$CombinedState]: undefined;\n}\n ? S extends CombinedState<infer S1>\n ? { [K in keyof S1]?: S1[K] extends Record<string, unknown> ? PreloadedState<S1[K]> : S1[K] }\n : never\n : { [K in keyof S]: S[K] extends string | number | boolean | symbol ? S[K] : PreloadedState<S[K]> };\n\ntype StoreEnhancerStoreCreator<Ext = Record<string, unknown>, StateExt = never> = <\n S = any,\n A extends Action = AnyAction,\n>(\n reducer: Reducer<S, A>,\n preloadedState?: PreloadedState<S>,\n) => Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext;\n\nexport interface SentryEnhancerOptions<S = any> {\n /**\n * Transforms the state before attaching it to an event.\n * Use this to remove any private data before sending it to Sentry.\n * Return null to not attach the state.\n */\n stateTransformer(state: S | undefined): (S & any) | null;\n /**\n * Transforms the action before sending it as a breadcrumb.\n * Use this to remove any private data before sending it to Sentry.\n * Return null to not send the breadcrumb.\n */\n actionTransformer(action: AnyAction): AnyAction | null;\n /**\n * Called on every state update, configure the Sentry Scope with the redux state.\n */\n configureScopeWithState?(scope: Scope, state: S): void;\n}\n\nconst ACTION_BREADCRUMB_CATEGORY = 'redux.action';\nconst ACTION_BREADCRUMB_TYPE = 'info';\n\nconst defaultOptions: SentryEnhancerOptions = {\n actionTransformer: action => action,\n stateTransformer: state => state || null,\n};\n\n/**\n * Creates an enhancer that would be passed to Redux's createStore to log actions and the latest state to Sentry.\n *\n * @param enhancerOptions Options to pass to the enhancer\n */\nfunction createReduxEnhancer(enhancerOptions?: Partial<SentryEnhancerOptions>): any {\n // Note: We return an any type as to not have type conflicts.\n const options = {\n ...defaultOptions,\n ...enhancerOptions,\n };\n\n return (next: StoreEnhancerStoreCreator): StoreEnhancerStoreCreator =>\n <S = any, A extends Action = AnyAction>(reducer: Reducer<S, A>, initialState?: PreloadedState<S>) => {\n const sentryReducer: Reducer<S, A> = (state, action): S => {\n const newState = reducer(state, action);\n\n configureScope(scope => {\n /* Action breadcrumbs */\n const transformedAction = options.actionTransformer(action);\n if (typeof transformedAction !== 'undefined' && transformedAction !== null) {\n scope.addBreadcrumb({\n category: ACTION_BREADCRUMB_CATEGORY,\n data: transformedAction,\n type: ACTION_BREADCRUMB_TYPE,\n });\n }\n\n /* Set latest state to scope */\n const transformedState = options.stateTransformer(newState);\n if (typeof transformedState !== 'undefined' && transformedState !== null) {\n scope.setContext('state', { type: 'redux', value: transformedState });\n } else {\n scope.setContext('state', null);\n }\n\n /* Allow user to configure scope with latest state */\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const { configureScopeWithState } = options;\n if (typeof configureScopeWithState === 'function') {\n configureScopeWithState(scope, newState);\n }\n });\n\n return newState;\n };\n\n return next(sentryReducer, initialState);\n };\n}\n\nexport { createReduxEnhancer };\n"],"names":[],"mappings":";;AAoEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}
|
|
1
|
+
{"version":3,"file":"redux.js","sources":["../../src/redux.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { configureScope } from '@sentry/browser';\nimport { Scope } from '@sentry/types';\n\ninterface Action<T = any> {\n type: T;\n}\n\ninterface AnyAction extends Action {\n [extraProps: string]: any;\n}\n\ntype Reducer<S = any, A extends Action = AnyAction> = (state: S | undefined, action: A) => S;\n\ntype Dispatch<A extends Action = AnyAction> = <T extends A>(action: T, ...extraArgs: any[]) => T;\n\ntype ExtendState<State, Extension> = [Extension] extends [never] ? State : State & Extension;\n\ntype Unsubscribe = () => void;\n\ninterface Store<S = any, A extends Action = AnyAction, StateExt = never, Ext = Record<string, unknown>> {\n dispatch: Dispatch<A>;\n getState(): S;\n subscribe(listener: () => void): Unsubscribe;\n replaceReducer<NewState, NewActions extends Action>(\n nextReducer: Reducer<NewState, NewActions>,\n ): Store<ExtendState<NewState, StateExt>, NewActions, StateExt, Ext> & Ext;\n}\n\ndeclare const $CombinedState: unique symbol;\n\ntype CombinedState<S> = { readonly [$CombinedState]?: undefined } & S;\n\ntype PreloadedState<S> = Required<S> extends {\n [$CombinedState]: undefined;\n}\n ? S extends CombinedState<infer S1>\n ? { [K in keyof S1]?: S1[K] extends Record<string, unknown> ? PreloadedState<S1[K]> : S1[K] }\n : never\n : { [K in keyof S]: S[K] extends string | number | boolean | symbol ? S[K] : PreloadedState<S[K]> };\n\ntype StoreEnhancerStoreCreator<Ext = Record<string, unknown>, StateExt = never> = <\n S = any,\n A extends Action = AnyAction,\n>(\n reducer: Reducer<S, A>,\n preloadedState?: PreloadedState<S>,\n) => Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext;\n\nexport interface SentryEnhancerOptions<S = any> {\n /**\n * Transforms the state before attaching it to an event.\n * Use this to remove any private data before sending it to Sentry.\n * Return null to not attach the state.\n */\n stateTransformer(state: S | undefined): (S & any) | null;\n /**\n * Transforms the action before sending it as a breadcrumb.\n * Use this to remove any private data before sending it to Sentry.\n * Return null to not send the breadcrumb.\n */\n actionTransformer(action: AnyAction): AnyAction | null;\n /**\n * Called on every state update, configure the Sentry Scope with the redux state.\n */\n configureScopeWithState?(scope: Scope, state: S): void;\n}\n\nconst ACTION_BREADCRUMB_CATEGORY = 'redux.action';\nconst ACTION_BREADCRUMB_TYPE = 'info';\n\nconst defaultOptions: SentryEnhancerOptions = {\n actionTransformer: action => action,\n stateTransformer: state => state || null,\n};\n\n/**\n * Creates an enhancer that would be passed to Redux's createStore to log actions and the latest state to Sentry.\n *\n * @param enhancerOptions Options to pass to the enhancer\n */\nfunction createReduxEnhancer(enhancerOptions?: Partial<SentryEnhancerOptions>): any {\n // Note: We return an any type as to not have type conflicts.\n const options = {\n ...defaultOptions,\n ...enhancerOptions,\n };\n\n return (next: StoreEnhancerStoreCreator): StoreEnhancerStoreCreator =>\n <S = any, A extends Action = AnyAction>(reducer: Reducer<S, A>, initialState?: PreloadedState<S>) => {\n const sentryReducer: Reducer<S, A> = (state, action): S => {\n const newState = reducer(state, action);\n\n configureScope(scope => {\n /* Action breadcrumbs */\n const transformedAction = options.actionTransformer(action);\n if (typeof transformedAction !== 'undefined' && transformedAction !== null) {\n scope.addBreadcrumb({\n category: ACTION_BREADCRUMB_CATEGORY,\n data: transformedAction,\n type: ACTION_BREADCRUMB_TYPE,\n });\n }\n\n /* Set latest state to scope */\n const transformedState = options.stateTransformer(newState);\n if (typeof transformedState !== 'undefined' && transformedState !== null) {\n scope.setContext('state', { state: { type: 'redux', value: transformedState } });\n } else {\n scope.setContext('state', null);\n }\n\n /* Allow user to configure scope with latest state */\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const { configureScopeWithState } = options;\n if (typeof configureScopeWithState === 'function') {\n configureScopeWithState(scope, newState);\n }\n });\n\n return newState;\n };\n\n return next(sentryReducer, initialState);\n };\n}\n\nexport { createReduxEnhancer };\n"],"names":[],"mappings":";;AAoEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sentry/react",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.11.0",
|
|
4
4
|
"description": "Official Sentry SDK for React.js",
|
|
5
5
|
"repository": "git://github.com/getsentry/sentry-javascript.git",
|
|
6
6
|
"homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/react",
|
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
"access": "public"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@sentry/browser": "7.
|
|
20
|
-
"@sentry/types": "7.
|
|
21
|
-
"@sentry/utils": "7.
|
|
19
|
+
"@sentry/browser": "7.11.0",
|
|
20
|
+
"@sentry/types": "7.11.0",
|
|
21
|
+
"@sentry/utils": "7.11.0",
|
|
22
22
|
"hoist-non-react-statics": "^3.3.2",
|
|
23
23
|
"tslib": "^1.9.3"
|
|
24
24
|
},
|
package/types/profiler.d.ts
CHANGED
|
@@ -21,10 +21,15 @@ declare class Profiler extends React.Component<ProfilerProps> {
|
|
|
21
21
|
* Made protected for the React Native SDK to access
|
|
22
22
|
*/
|
|
23
23
|
protected _mountSpan: Span | undefined;
|
|
24
|
+
/**
|
|
25
|
+
* The span that represents the duration of time between shouldComponentUpdate and componentDidUpdate
|
|
26
|
+
*/
|
|
27
|
+
protected _updateSpan: Span | undefined;
|
|
24
28
|
static defaultProps: Partial<ProfilerProps>;
|
|
25
29
|
constructor(props: ProfilerProps);
|
|
26
30
|
componentDidMount(): void;
|
|
27
|
-
|
|
31
|
+
shouldComponentUpdate({ updateProps, includeUpdates }: ProfilerProps): boolean;
|
|
32
|
+
componentDidUpdate(): void;
|
|
28
33
|
componentWillUnmount(): void;
|
|
29
34
|
render(): React.ReactNode;
|
|
30
35
|
}
|
package/types/profiler.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profiler.d.ts","sourceRoot":"","sources":["../../src/profiler.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,GAAG,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGlD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,iBAAiB,YAAY,CAAC;AAE3C,oBAAY,aAAa,GAAG;IAE1B,IAAI,EAAE,MAAM,CAAC;IAGb,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,WAAW,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC;CACzC,CAAC;AAEF;;;GAGG;AACH,cAAM,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IACnD;;;OAGG;IACH,SAAS,CAAC,UAAU,EAAE,IAAI,GAAG,SAAS,CAAa;
|
|
1
|
+
{"version":3,"file":"profiler.d.ts","sourceRoot":"","sources":["../../src/profiler.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,GAAG,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGlD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,iBAAiB,YAAY,CAAC;AAE3C,oBAAY,aAAa,GAAG;IAE1B,IAAI,EAAE,MAAM,CAAC;IAGb,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,WAAW,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC;CACzC,CAAC;AAEF;;;GAGG;AACH,cAAM,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IACnD;;;OAGG;IACH,SAAS,CAAC,UAAU,EAAE,IAAI,GAAG,SAAS,CAAa;IACnD;;OAEG;IACH,SAAS,CAAC,WAAW,EAAE,IAAI,GAAG,SAAS,CAAa;IAGpD,OAAc,YAAY,EAAE,OAAO,CAAC,aAAa,CAAC,CAIhD;gBAEiB,KAAK,EAAE,aAAa;IAkBhC,iBAAiB,IAAI,IAAI;IAMzB,qBAAqB,CAAC,EAAE,WAAW,EAAE,cAAqB,EAAE,EAAE,aAAa,GAAG,OAAO;IAwBrF,kBAAkB,IAAI,IAAI;IAS1B,oBAAoB,IAAI,IAAI;IAe5B,MAAM,IAAI,KAAK,CAAC,SAAS;CAGjC;AAED;;;;;;;GAOG;AACH,iBAAS,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACjD,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EAExC,OAAO,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC,MAAM,aAAa,EAAE,aAAa,CAAC,CAAC,GAClF,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAgBb;AAED;;;;;;GAMG;AACH,iBAAS,WAAW,CAClB,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAA;CAGrD,GACA,IAAI,CAmCN;AAED,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;AAE/C,yCAAyC;AACzC,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,WAAW,EAAE,GAAG,GAAE,GAAqB,GAAG,CAAC,GAAG,SAAS,CASrG"}
|
package/types/reactrouterv6.d.ts
CHANGED
|
@@ -12,8 +12,21 @@ declare type Params<Key extends string = string> = {
|
|
|
12
12
|
readonly [key in Key]: string | undefined;
|
|
13
13
|
};
|
|
14
14
|
interface RouteMatch<ParamKey extends string = string> {
|
|
15
|
+
/**
|
|
16
|
+
* The names and values of dynamic parameters in the URL.
|
|
17
|
+
*/
|
|
15
18
|
params: Params<ParamKey>;
|
|
19
|
+
/**
|
|
20
|
+
* The portion of the URL pathname that was matched.
|
|
21
|
+
*/
|
|
16
22
|
pathname: string;
|
|
23
|
+
/**
|
|
24
|
+
* The portion of the URL pathname that was matched before child routes.
|
|
25
|
+
*/
|
|
26
|
+
pathnameBase: string;
|
|
27
|
+
/**
|
|
28
|
+
* The route object that was used to match.
|
|
29
|
+
*/
|
|
17
30
|
route: RouteObject;
|
|
18
31
|
}
|
|
19
32
|
declare type UseEffect = (cb: () => void, deps: unknown[]) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reactrouterv6.d.ts","sourceRoot":"","sources":["../../src/reactrouterv6.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAqB,MAAM,eAAe,CAAC;AAGnF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAE3C,UAAU,WAAW;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,aAAK,MAAM,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,IAAI;IACzC,QAAQ,EAAE,GAAG,IAAI,GAAG,GAAG,MAAM,GAAG,SAAS;CAC1C,CAAC;
|
|
1
|
+
{"version":3,"file":"reactrouterv6.d.ts","sourceRoot":"","sources":["../../src/reactrouterv6.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAqB,MAAM,eAAe,CAAC;AAGnF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAE3C,UAAU,WAAW;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,aAAK,MAAM,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,IAAI;IACzC,QAAQ,EAAE,GAAG,IAAI,GAAG,GAAG,MAAM,GAAG,SAAS;CAC1C,CAAC;AAGF,UAAU,UAAU,CAAC,QAAQ,SAAS,MAAM,GAAG,MAAM;IACnD;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IACzB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,WAAW,CAAC;CACpB;AAED,aAAK,SAAS,GAAG,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;AAC3D,aAAK,WAAW,GAAG,MAAM,QAAQ,CAAC;AAClC,aAAK,iBAAiB,GAAG,MAAM,MAAM,CAAC;AACtC,aAAK,wBAAwB,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,EAAE,KAAK,WAAW,EAAE,CAAC;AAC3E,aAAK,WAAW,GAAG,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,QAAQ,EAAE,QAAQ,KAAK,UAAU,EAAE,GAAG,IAAI,CAAC;AAkBtF,wBAAgB,4BAA4B,CAC1C,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,wBAAwB,EAAE,wBAAwB,EAClD,WAAW,EAAE,WAAW,gLA4BzB;AA8CD,wBAAgB,8BAA8B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,SAAS,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,CA2EjH"}
|