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.

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

(6) fix(tracing): ReactNativeTracing and initial navigation spans have to be created after integrations setup #4000

Merged
merged 44 commits into from
Aug 14, 2024
Merged
Changes from 1 commit
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
c3dcfd3
chore(tracing): extract app start to a standalone integration
krystofwoldrich Jun 3, 2024
88d6988
Merge branch 'v6' into kw/ref-app-start-integration
krystofwoldrich Jun 11, 2024
fe53af5
fix merge
krystofwoldrich Jun 11, 2024
d4ac89f
fix spans, app start is now reported to Sentry
krystofwoldrich Jun 11, 2024
7c5dcaa
fix uikit init and minimal instrumentation edge cases
krystofwoldrich Jun 12, 2024
0b42472
update js docs
krystofwoldrich Jun 12, 2024
9765eaf
Merge branch 'v6' into kw/ref-app-start-integration
krystofwoldrich Aug 4, 2024
b9e9e9a
Add App Start Integration tests
krystofwoldrich Aug 5, 2024
b334931
Remove app start test from react native tracing
krystofwoldrich Aug 5, 2024
4d16787
clean up app start tests
krystofwoldrich Aug 5, 2024
4d84922
fix test affected by the app start extraction
krystofwoldrich Aug 5, 2024
0ff2020
Add standalone app start
krystofwoldrich Aug 5, 2024
b1eab51
fix
krystofwoldrich Aug 5, 2024
6d1cd70
ref(tracing): Extract NativeFrames as standalone integration
krystofwoldrich Aug 5, 2024
5eaaad2
Add integration handling test
krystofwoldrich Aug 6, 2024
eba6820
Merge branch 'kw/ref-app-start-integration' into kw/ref-native-frames…
krystofwoldrich Aug 6, 2024
91c1eb8
clean up integrations tests
krystofwoldrich Aug 6, 2024
db70c09
move native frames tests
krystofwoldrich Aug 6, 2024
e199244
add changelog
krystofwoldrich Aug 6, 2024
2956344
Merge branch 'kw/ref-app-start-integration' into kw/ref-native-frames…
krystofwoldrich Aug 6, 2024
adb53fc
fix
krystofwoldrich Aug 6, 2024
699fda7
move the app start test to tracing
krystofwoldrich Aug 6, 2024
7a386ab
Merge branch 'kw/ref-app-start-integration' into kw/ref-native-frames…
krystofwoldrich Aug 6, 2024
ad98ac0
fix tests
krystofwoldrich Aug 6, 2024
f2b9abe
add changelog
krystofwoldrich Aug 6, 2024
89b2354
ref(tracing): Extract Stall Tracking to a standalone integration
krystofwoldrich Aug 6, 2024
4f3ca7b
misc(tracing): Remove ReactNativeTracing deprecated options
krystofwoldrich Aug 6, 2024
5c12e5c
fix changelog
krystofwoldrich Aug 6, 2024
a111bdf
ref(tracing): Extract UserInteractionTracing as standalone interaction
krystofwoldrich Aug 6, 2024
92e04ee
Apply suggestions from code review
krystofwoldrich Aug 7, 2024
1168d4e
Revert "fix changelog"
krystofwoldrich Aug 7, 2024
a21e83d
Revert "misc(tracing): Remove ReactNativeTracing deprecated options"
krystofwoldrich Aug 7, 2024
af4c453
tests
krystofwoldrich Aug 7, 2024
3d33c02
fix tests
krystofwoldrich Aug 7, 2024
c71b900
fix tests
krystofwoldrich Aug 7, 2024
e632d53
Merge commit 'c71b9003a8934eca268d524732ab337325bc238d' into kw/ref-u…
krystofwoldrich Aug 7, 2024
474ee37
misc(tracing): Remove ReactNativeTracing deprecated options
krystofwoldrich Aug 6, 2024
07d9f00
fix changelog
krystofwoldrich Aug 6, 2024
6386062
refactor react native tracing to new function style integration
krystofwoldrich Aug 7, 2024
3002393
update changelog
krystofwoldrich Aug 7, 2024
2bbb93a
fix test, changelog and samples
krystofwoldrich Aug 8, 2024
9dd899e
fix(tracing): ReactNativeTracing and initial navigation spans have to…
krystofwoldrich Aug 8, 2024
5d98ded
fix background test
krystofwoldrich Aug 9, 2024
ecd26ed
Merge branch 'v6' into kw/tracing-integrations-independent-order
krystofwoldrich Aug 14, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
tests
  • Loading branch information
krystofwoldrich committed Aug 7, 2024
commit af4c453aeee2b051c86cad1a86821d7a849f6dd7
299 changes: 299 additions & 0 deletions test/tracing/integrations/userInteraction.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,299 @@
import {
getActiveSpan,
getCurrentScope,
SPAN_STATUS_ERROR,
spanToJSON,
startInactiveSpan,
startSpanManual,
} from '@sentry/core';
import type { Span } from '@sentry/types';
import type { AppState, AppStateStatus } from 'react-native';

import {
startUserInteractionSpan,
userInteractionIntegration,
} from '../../../src/js/tracing/integrations/userInteraction';
import {
type ReactNativeTracingIntegration,
reactNativeTracingIntegration,
} from '../../../src/js/tracing/reactnativetracing';
import { NATIVE } from '../../../src/js/wrapper';
import type { TestClient } from '../../mocks/client';
import { setupTestClient } from '../../mocks/client';
import type { MockedRoutingInstrumentation } from '../mockedrountinginstrumention';
import { createMockedRoutingInstrumentation } from '../mockedrountinginstrumention';

type MockAppState = {
setState: (state: AppStateStatus) => void;
listener: (newState: AppStateStatus) => void;
removeSubscription: jest.Func;
};
const mockedAppState: AppState & MockAppState = {
removeSubscription: jest.fn(),
listener: jest.fn(),
isAvailable: true,
currentState: 'active',
addEventListener: (_, listener) => {
mockedAppState.listener = listener;
return {
remove: mockedAppState.removeSubscription,
};
},
setState: (state: AppStateStatus) => {
mockedAppState.currentState = state;
mockedAppState.listener(state);
},
};
jest.mock('react-native/Libraries/AppState/AppState', () => mockedAppState);

jest.mock('../../../src/js/wrapper', () => {
return {
NATIVE: {
fetchNativeAppStart: jest.fn(),
fetchNativeFrames: jest.fn(() => Promise.resolve()),
disableNativeFramesTracking: jest.fn(() => Promise.resolve()),
enableNativeFramesTracking: jest.fn(() => Promise.resolve()),
enableNative: true,
},
};
});

describe('User Interaction Tracing', () => {
let client: TestClient;
let tracing: ReactNativeTracingIntegration;
let mockedUserInteractionId: { elementId: string | undefined; op: string };
let mockedRoutingInstrumentation: MockedRoutingInstrumentation;

beforeEach(() => {
jest.useFakeTimers();
NATIVE.enableNative = true;
mockedAppState.isAvailable = true;
mockedAppState.addEventListener = (_, listener) => {
mockedAppState.listener = listener;
return {
remove: mockedAppState.removeSubscription,
};
};

mockedUserInteractionId = { elementId: 'mockedElementId', op: 'mocked.op' };
client = setupTestClient({
enableUserInteractionTracing: true,
});
mockedRoutingInstrumentation = createMockedRoutingInstrumentation();
});

afterEach(() => {
jest.runOnlyPendingTimers();
jest.useRealTimers();
jest.clearAllMocks();
});

describe('disabled user interaction', () => {
test('User interaction tracing is disabled by default', () => {
client = setupTestClient({});
mockedRoutingInstrumentation = createMockedRoutingInstrumentation();
startUserInteractionSpan(mockedUserInteractionId);

expect(client.getOptions().enableUserInteractionTracing).toBeFalsy();
expect(getActiveSpan()).toBeUndefined();
});
});

describe('enabled user interaction', () => {
beforeEach(() => {
tracing = reactNativeTracingIntegration({
routingInstrumentation: mockedRoutingInstrumentation,
});
client.addIntegration(userInteractionIntegration());
client.addIntegration(tracing);
mockedRoutingInstrumentation.registeredOnConfirmRoute!('mockedRouteName');
});

test('user interaction tracing is enabled and transaction is bound to scope', () => {
startUserInteractionSpan(mockedUserInteractionId);

const actualTransaction = getActiveSpan();
const actualTransactionContext = spanToJSON(actualTransaction!);
expect(client.getOptions().enableUserInteractionTracing).toBeTruthy();
expect(actualTransactionContext).toEqual(
expect.objectContaining({
description: 'mockedRouteName.mockedElementId',
op: 'mocked.op',
}),
);
});

test('UI event transaction not sampled if no child spans', () => {
startUserInteractionSpan(mockedUserInteractionId);
const actualTransaction = getActiveSpan();

jest.runAllTimers();

expect(actualTransaction).toBeDefined();
expect(client.event).toBeUndefined();
});

test('does cancel UI event transaction when app goes to background', () => {
startUserInteractionSpan(mockedUserInteractionId);
const actualTransaction = getActiveSpan();

mockedAppState.setState('background');
jest.runAllTimers();

const actualTransactionContext = spanToJSON(actualTransaction!);
expect(actualTransactionContext).toEqual(
expect.objectContaining({
timestamp: expect.any(Number),
status: 'cancelled',
}),
);
expect(mockedAppState.removeSubscription).toBeCalledTimes(1);
});

test('do not overwrite existing status of UI event transactions', () => {
startUserInteractionSpan(mockedUserInteractionId);
const actualTransaction = getActiveSpan();

actualTransaction?.setStatus({ code: SPAN_STATUS_ERROR, message: 'mocked_status' });

jest.runAllTimers();

const actualTransactionContext = spanToJSON(actualTransaction!);
expect(actualTransactionContext).toEqual(
expect.objectContaining({
timestamp: expect.any(Number),
status: 'mocked_status',
}),
);
});

test('same UI event and same element does not reschedule idle timeout', () => {
const timeoutCloseToActualIdleTimeoutMs = 800;
startUserInteractionSpan(mockedUserInteractionId);
const actualTransaction = getActiveSpan();
jest.advanceTimersByTime(timeoutCloseToActualIdleTimeoutMs);

startUserInteractionSpan(mockedUserInteractionId);
jest.advanceTimersByTime(timeoutCloseToActualIdleTimeoutMs);

expect(spanToJSON(actualTransaction!).timestamp).toEqual(expect.any(Number));
});

test('different UI event and same element finish first and start new transaction', () => {
const timeoutCloseToActualIdleTimeoutMs = 800;
startUserInteractionSpan(mockedUserInteractionId);
const firstTransaction = getActiveSpan();
jest.advanceTimersByTime(timeoutCloseToActualIdleTimeoutMs);
const childFirstTransaction = startInactiveSpan({ name: 'Child Span of the first Tx', op: 'child.op' });

startUserInteractionSpan({ ...mockedUserInteractionId, op: 'different.op' });
const secondTransaction = getActiveSpan();
jest.advanceTimersByTime(timeoutCloseToActualIdleTimeoutMs);
childFirstTransaction?.end();
jest.runAllTimers();

const firstTransactionEvent = client.eventQueue[0];
expect(firstTransaction).toBeDefined();
expect(firstTransactionEvent).toEqual(
expect.objectContaining({
timestamp: expect.any(Number),
contexts: expect.objectContaining({
trace: expect.objectContaining({
op: 'mocked.op',
}),
}),
}),
);

expect(secondTransaction).toBeDefined();
expect(spanToJSON(secondTransaction!)).toEqual(
expect.objectContaining({
timestamp: expect.any(Number),
op: 'different.op',
}),
);
expect(firstTransactionEvent!.timestamp).toBeGreaterThanOrEqual(spanToJSON(secondTransaction!).start_timestamp!);
});

test('different UI event and same element finish first transaction with last span', () => {
const timeoutCloseToActualIdleTimeoutMs = 800;
startUserInteractionSpan(mockedUserInteractionId);
const firstTransaction = getActiveSpan();
jest.advanceTimersByTime(timeoutCloseToActualIdleTimeoutMs);
const childFirstTransaction = startInactiveSpan({ name: 'Child Span of the first Tx', op: 'child.op' });

startUserInteractionSpan({ ...mockedUserInteractionId, op: 'different.op' });
jest.advanceTimersByTime(timeoutCloseToActualIdleTimeoutMs);
childFirstTransaction?.end();
jest.runAllTimers();

const firstTransactionEvent = client.eventQueue[0];
expect(firstTransaction).toBeDefined();
expect(firstTransactionEvent).toEqual(
expect.objectContaining({
timestamp: expect.any(Number),
contexts: expect.objectContaining({
trace: expect.objectContaining({
op: 'mocked.op',
}),
}),
}),
);
});

test('same ui event after UI event transaction finished', () => {
startUserInteractionSpan(mockedUserInteractionId);
const firstTransaction = getActiveSpan();
jest.runAllTimers();

startUserInteractionSpan(mockedUserInteractionId);
const secondTransaction = getActiveSpan();
jest.runAllTimers();

const firstTransactionContext = spanToJSON(firstTransaction!);
const secondTransactionContext = spanToJSON(secondTransaction!);
expect(firstTransactionContext!.timestamp).toEqual(expect.any(Number));
expect(secondTransactionContext!.timestamp).toEqual(expect.any(Number));
expect(firstTransactionContext!.span_id).not.toEqual(secondTransactionContext!.span_id);
});

test('do not start UI event transaction if active transaction on scope', () => {
const activeTransaction = startSpanManual(
{ name: 'activeTransactionOnScope', scope: getCurrentScope() },
(span: Span) => span,
);
expect(activeTransaction).toBeDefined();
expect(activeTransaction).toBe(getActiveSpan());

startUserInteractionSpan(mockedUserInteractionId);
expect(activeTransaction).toBe(getActiveSpan());
});

test('UI event transaction is canceled when routing transaction starts', () => {
const timeoutCloseToActualIdleTimeoutMs = 800;
startUserInteractionSpan(mockedUserInteractionId);
const interactionTransaction = getActiveSpan();
jest.advanceTimersByTime(timeoutCloseToActualIdleTimeoutMs);

const routingTransaction = mockedRoutingInstrumentation.registeredListener!({
name: 'newMockedRouteName',
});
jest.runAllTimers();

const interactionTransactionContext = spanToJSON(interactionTransaction!);
const routingTransactionContext = spanToJSON(routingTransaction!);
expect(interactionTransactionContext).toEqual(
expect.objectContaining({
timestamp: expect.any(Number),
status: 'cancelled',
}),
);
expect(routingTransactionContext).toEqual(
expect.objectContaining({
timestamp: expect.any(Number),
}),
);
expect(interactionTransactionContext!.timestamp).toBeLessThanOrEqual(routingTransactionContext!.start_timestamp!);
});
});
});
Loading
Loading