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(rum-react): respect active flag in react integration #392

Merged
merged 4 commits into from
Aug 30, 2019
Merged

fix(rum-react): respect active flag in react integration #392

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2448e68
fix(rum-react): respect active flag in react integration
vigneshshanmugam Aug 26, 2019
9f429db
remove logging when inactive
vigneshshanmugam Aug 28, 2019
31f44db
add check for same component
vigneshshanmugam Aug 29, 2019
046b640
use apm.init instead of config init
vigneshshanmugam Aug 29, 2019
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
5 changes: 5 additions & 0 deletions packages/rum-react/src/get-with-transaction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,11 @@ function isReactClassComponent(Component) {
function getWithTransaction(apm) {
return function withTransaction(name, type) {
return function(Component) {
const configService = apm.serviceFactory.getService('ConfigService')
if (!configService.isActive()) {
return Component
}

if (!Component) {
const loggingService = apm.serviceFactory.getService('LoggingService')
loggingService.warn(
Expand Down
19 changes: 16 additions & 3 deletions packages/rum-react/test/specs/get-apm-route.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,29 @@ import { MemoryRouter as Router, Route } from 'react-router-dom'
import { ApmBase } from '@elastic/apm-rum'
import { createServiceFactory } from '@elastic/apm-rum-core'
import { getApmRoute } from '../../src/get-apm-route'
import { getGlobalConfig } from '../../../../dev-utils/test-config'

function Component(props) {
return <h1>Testing, {props.name}</h1>
}

describe('ApmRoute', function() {
const { serverUrl, serviceName } = getGlobalConfig().agentConfig
let serviceFactory, apmBase

beforeEach(() => {
serviceFactory = createServiceFactory()
apmBase = new ApmBase(serviceFactory, false)
apmBase.init({
active: true,
serverUrl,
serviceName,
disableInstrumentations: ['page-load', 'error']
})
})

it('should work Route component', function() {
const ApmRoute = getApmRoute(new ApmBase(createServiceFactory()))
const ApmRoute = getApmRoute(apmBase)

const rendered = mount(
<div>
Expand All @@ -67,8 +82,6 @@ describe('ApmRoute', function() {
})

it('should work with Route render and log warning', function() {
const serviceFactory = createServiceFactory()
const apmBase = new ApmBase(serviceFactory)
const loggingService = serviceFactory.getService('LoggingService')
const ApmRoute = getApmRoute(apmBase)

Expand Down
54 changes: 38 additions & 16 deletions packages/rum-react/test/specs/get-with-transaction.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ Enzyme.configure({ adapter: new Adapter() })
import { getWithTransaction } from '../../src/get-with-transaction'
import { ApmBase } from '@elastic/apm-rum'
import { createServiceFactory } from '@elastic/apm-rum-core'
import { getGlobalConfig } from '../../../../dev-utils/test-config'

function TestComponent(apm) {
const withTransaction = getWithTransaction(apm)
Expand All @@ -51,26 +52,30 @@ function TestComponent(apm) {
}

describe('withTransaction', function() {
const { serverUrl, serviceName } = getGlobalConfig().agentConfig
let apmBase, serviceFactory

beforeEach(() => {
serviceFactory = createServiceFactory()
apmBase = new ApmBase(serviceFactory, false)
apmBase.init({
active: true,
vigneshshanmugam marked this conversation as resolved.
Show resolved Hide resolved
serverUrl,
serviceName,
disableInstrumentations: ['page-load', 'error']
})
})

it('should work if apm is disabled or not initialized', function() {
TestComponent(new ApmBase(createServiceFactory(), true))
TestComponent(new ApmBase(createServiceFactory(), false))
TestComponent(new ApmBase(serviceFactory, true))
Copy link
Contributor

Choose a reason for hiding this comment

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

This might be not related to this PR, but I'm not sure why this test passes. We probably should investigate why when we pass disable = true to ApmBase, it still calls startTransaction.

Do you happen to know?
Either way we can address that separately if you prefer.

Copy link
Member Author

@vigneshshanmugam vigneshshanmugam Aug 29, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

I guess it does not matter, component should get rendered if APM is enabled/disabled and we don't check if startTransaction is called or not. So I am not sure what is the issue here?

Copy link
Contributor

Choose a reason for hiding this comment

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

We probably can improve this test a bit, let's do it separately!

TestComponent(apmBase)
})

it('should start transaction for components', function() {
const serviceFactory = createServiceFactory()
const transactionService = serviceFactory.getService('TransactionService')

var apm = new ApmBase(serviceFactory, false)
apm.init({
debug: true,
serverUrl: 'http://localhost:8200',
serviceName: 'apm-agent-rum-react-integration-unit-test',
sendPageLoadTransaction: false
})

spyOn(transactionService, 'startTransaction')

TestComponent(apm)
TestComponent(apmBase)
expect(transactionService.startTransaction).toHaveBeenCalledWith(
'test-transaction',
'test-type',
Expand All @@ -79,16 +84,33 @@ describe('withTransaction', function() {
})

it('should return WrappedComponent on falsy value and log warning', function() {
const serviceFactory = createServiceFactory()
const loggingService = serviceFactory.getService('LoggingService')

spyOn(loggingService, 'warn')

const withTransaction = getWithTransaction(new ApmBase(serviceFactory))
const withTransaction = getWithTransaction(apmBase)
const comp = withTransaction('test-name', 'test-type')(undefined)
expect(comp).toBe(undefined)
expect(loggingService.warn).toHaveBeenCalledWith(
'test-name is not instrumented since component property is not provided'
)
})

it('should not instrument the route when rum is inactive', () => {
const transactionService = serviceFactory.getService('TransactionService')
spyOn(transactionService, 'startTransaction')

apmBase.config({ active: false })
TestComponent(apmBase)

function Component() {
return <h2>Component</h2>
}
const withTransaction = getWithTransaction(apmBase)

const WrappedComponent = withTransaction('test-transaction', 'test-type')(
Component
)
expect(WrappedComponent).toEqual(Component)
expect(transactionService.startTransaction).not.toHaveBeenCalled()
vigneshshanmugam marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Contributor

Choose a reason for hiding this comment

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

transactionService.startTransaction won't be called unless the component is rendered, so this probably always passes regardless of the test!

Copy link
Member Author

@vigneshshanmugam vigneshshanmugam Aug 29, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

I added the component to get rendered as well in previous line for double checking.

apm-agent-rum-js/packages/rum-react/test/specs/get-with-transaction.spec.js

Line 103 in 046b640

TestComponent(apmBase)

if you comment out the config.isActive check in the source, this test would fail which is expected.

Copy link
Contributor

@hmdhk hmdhk Aug 30, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

Ok, I thought maybe you intended to test with the component that you created in the test instead instead of the one created in TestComponent. Might be a bit better to group the code together so it's clear which checks are intended for those parts, but it's not very important.

})
})