Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(vue): Don't overwrite custom transaction names of pageload transactions #6060

Merged
merged 2 commits into from Oct 27, 2022
Merged

fix(vue): Don't overwrite custom transaction names of pageload transactions #6060

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
db6b1b3
fix(vue): Don't overwrite custom transaction names of Pageload
Lms24 Oct 27, 2022
9e3beb7
adjust test comment that made no sense :D
Lms24 Oct 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/vue/src/router.ts
View file
Open in desktop
Expand Up @@ -92,7 +92,9 @@ export function vueRouterInstrumentation(router: VueRouter): VueRouterInstrument
if (startTransactionOnPageLoad && isPageLoadNavigation) {
const pageloadTransaction = getActiveTransaction();
if (pageloadTransaction) {
pageloadTransaction.setName(transactionName, transactionSource);
if (pageloadTransaction.metadata.source !== 'custom') {
pageloadTransaction.setName(transactionName, transactionSource);
}
pageloadTransaction.setData('params', data.params);
pageloadTransaction.setData('query', data.query);
Comment on lines +95 to 99
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess there's an argument to be made that if we have a custom source here, we don't need to set the params and query data. Happy to change this if reviewers prefer that.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm generally of the school of thought that (within reason) more data is better. We've been sending it before now, so I vote that we keep doing so.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point. Then I'll keep it as is

}
Expand Down
53 changes: 51 additions & 2 deletions packages/vue/test/router.test.ts
View file
Open in desktop
Expand Up @@ -123,10 +123,11 @@ describe('vueRouterInstrumentation()', () => {
['initialPageloadRoute', 'unmatchedRoute', '/e8733846-20ac-488c-9871-a5cbcb647294', 'url'],
])(
'should return instrumentation that instruments VueRouter.beforeEach(%s, %s) for pageloads',
(fromKey, toKey, _transactionName, _transactionSource) => {
(fromKey, toKey, transactionName, transactionSource) => {
const mockedTxn = {
setName: jest.fn(),
setData: jest.fn(),
metadata: {},
};
const customMockStartTxn = { ...mockStartTransaction }.mockImplementation(_ => {
return mockedTxn;
Expand Down Expand Up @@ -160,14 +161,62 @@ describe('vueRouterInstrumentation()', () => {
beforeEachCallback(to, from, mockNext);
expect(mockVueRouter.beforeEach).toHaveBeenCalledTimes(1);

expect(mockedTxn.setName).toHaveBeenCalledWith(_transactionName, _transactionSource);
expect(mockedTxn.setName).toHaveBeenCalledWith(transactionName, transactionSource);
expect(mockedTxn.setData).toHaveBeenNthCalledWith(1, 'params', to.params);
expect(mockedTxn.setData).toHaveBeenNthCalledWith(2, 'query', to.query);

expect(mockNext).toHaveBeenCalledTimes(1);
},
);

it("doesn't overwrite a pageload transaction name it was set to custom before the router resolved the route", () => {
const mockedTxn = {
setName: jest.fn(),
setData: jest.fn(),
name: '',
metadata: {
source: 'url',
},
};
const customMockStartTxn = { ...mockStartTransaction }.mockImplementation(_ => {
return mockedTxn;
});
jest.spyOn(vueTracing, 'getActiveTransaction').mockImplementation(() => mockedTxn as unknown as Transaction);

// create instrumentation
const instrument = vueRouterInstrumentation(mockVueRouter);

// instrument
instrument(customMockStartTxn, true, true);

// check for transaction start
expect(customMockStartTxn).toHaveBeenCalledTimes(1);
expect(customMockStartTxn).toHaveBeenCalledWith({
name: '/',
metadata: {
source: 'url',
},
op: 'pageload',
tags: {
'routing.instrumentation': 'vue-router',
},
});

// now we simulate a custom route call similar to what would happen if
// users use the `beforeNavigate` hook
Lms24 marked this conversation as resolved.
Show resolved Hide resolved
mockedTxn.name = 'customTxnName';
mockedTxn.metadata.source = 'custom';

const beforeEachCallback = mockVueRouter.beforeEach.mock.calls[0][0];
beforeEachCallback(testRoutes['normalRoute1'], testRoutes['initialPageloadRoute'], mockNext);

expect(mockVueRouter.beforeEach).toHaveBeenCalledTimes(1);

expect(mockedTxn.setName).not.toHaveBeenCalled();
expect(mockedTxn.metadata.source).toEqual('custom');
expect(mockedTxn.name).toEqual('customTxnName');
});

test.each([
[undefined, 1],
[false, 0],
Expand Down