chore: update lazy documentation

Author: vigneshshanmugam

docs/react-integration.asciidoc

@@ -99,9 +99,14 @@ If these parameters are not provided, the defaults documented in <<transaction-a
 [float]
 ===== Instrumenting lazy loaded routes
 
-When the route is rendered lazily with components using `React.lazy` or a similar API, it is currently not possible to
-auto instrument the components dependencies via `ApmRoute`. To instrument these lazy rendered routes and capture the spans 
-associated with the components, you'll need to manually instrument the code with the `withTransaction` API.
+When the route is rendered lazily with components using `React.lazy` or a
+similar API, it is currently not possible to auto instrument the components
+dependencies(JavaScript bundles, API calls, etc) via `ApmRoute` because React
+suspends the underlying component until the required dependencies are available
+which means our transaction is not started till React starts rendering the
+underlying component. To instrument these lazy rendered routes and capture the
+spans associated with the components, you'll need to manually instrument the
+code with the `withTransaction` API.
 
 [source,js]
 ----

packages/rum-react/test/e2e/components/lazy-component.js

@@ -27,7 +27,7 @@ const { waitForApmServerCalls } = require('../../../../../dev-utils/webdriver')
 
 describe('Using Switch component of react router', function() {
  it('should render the react app on route change', function() {
- browser.url('/test/e2e/with-router/switch.html')
+ beforeAll(() => browser.url('/test/e2e/with-router/switch.html'))
  browser.waitUntil(
  () => {
  /**
@@ -58,36 +58,4 @@ describe('Using Switch component of react router', function() {
  expect(routeTransaction.spans.length).toBe(1)
  expect(routeTransaction.spans[0].name).toBe('GET /test/e2e/data.json')
  })
-
- it('should capture spans inside lazy rendered components', function() {
- browser.url('/test/e2e/with-router/switch.html')
- browser.waitUntil(
- () => {
- $('#lazy-func').click()
- const componentContainer = $('#lazy-container')
- return componentContainer.getText().indexOf('/lazy') !== -1
- },
- 5000,
- 'expected functional component to be rendered'
- )
-
- const { sendEvents } = waitForApmServerCalls(0, 2)
- const { transactions } = sendEvents
- expect(transactions.length).toBe(2)
-
- const pageLoadTransaction = transactions[0]
- expect(pageLoadTransaction.type).toBe('page-load')
- expect(pageLoadTransaction.name).toBe('/notfound')
-
- const routeTransaction = transactions[1]
- expect(routeTransaction.name).toBe('/lazy')
- expect(routeTransaction.type).toBe('route-change')
-
- /**
- * 2 Spans
- * 1 lazy loaded component JS with 'resource' type
- * 1 Fetch call with 'external' type
- */
- expect(routeTransaction.spans.length).toBe(2)
- })
 })

packages/rum-react/test/e2e/with-router/switch.e2e-spec.js

@@ -25,15 +25,13 @@
 
 import '@babel/polyfill'
 import 'whatwg-fetch'
-import React, { Suspense, lazy } from 'react'
+import React, { Suspense } from 'react'
 import { render } from 'react-dom'
 import { BrowserRouter, Link, Switch } from 'react-router-dom'
 import FunctionalComponent from '../components/func-component'
 import { ApmRoute } from '../../../src'
 import createApmBase from '..'
 
-const LazyFuncComponent = lazy(() => import('../components/lazy-component'))
-
 const apm = createApmBase({
  logLevel: 'debug',
  serviceName: 'apm-agent-rum-switch-e2e-react',
@@ -51,15 +49,9 @@ function App() {
  Functional
  </Link>
  </li>
- <li>
- <Link id="lazy-func" to="/lazy">
- Lazy
- </Link>
- </li>
  </ul>
  <Suspense fallback={<div>Loading...</div>}>
  <Switch>
- <ApmRoute path="/lazy" component={LazyFuncComponent} />
  <ApmRoute path="/func" component={FunctionalComponent} />
  <ApmRoute component={NotFound} />
  </Switch>