feat(rum-react): use correct path when route is path array

package.json

@@ -149,8 +149,8 @@
     "puppeteer": "^1.20.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-router": "^4.2.0",
-    "react-router-dom": "^4.2.2",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "regenerator-runtime": "^0.13.3",
     "rimraf": "^3.0.0",
     "serve-index": "^1.9.1",

packages/rum-react/src/get-with-transaction.js

@@ -40,6 +40,19 @@ function isReactClassComponent(Component) {
   return !!(prototype && prototype.isReactComponent)
 }
 
+/**
+ * If the path is given as array, use the computed path
+ * to get the current transaction name
+ */
+function getTransactionName(name, props) {
+  const { match = {} } = props
+
+  if (Array.isArray(name) && match.path) {
+    return match.path
+  }
+  return name
+}
+
 /**
  * Usage:
  *  - Pure function: `withTransaction('name','route-change')(Component)`
@@ -90,7 +103,7 @@ function getWithTransaction(apm) {
            * start the transaction only on component mounting
            */
           const [transaction] = React.useState(() =>
-            apm.startTransaction(name, type, {
+            apm.startTransaction(getTransactionName(name, props), type, {
               managed: true,
               canReuse: true
             })
@@ -127,10 +140,14 @@ function getWithTransaction(apm) {
              * we won't be able to capture what happens in componentDidMount of child
              * components since the parent component is mounted after child
              */
-            this.transaction = apm.startTransaction(name, type, {
-              managed: true,
-              canReuse: true
-            })
+            this.transaction = apm.startTransaction(
+              getTransactionName(name, this.props),
+              type,
+              {
+                managed: true,
+                canReuse: true
+              }
+            )
           }
 
           componentDidMount() {

packages/rum-react/test/specs/get-apm-route.spec.js

@@ -105,6 +105,49 @@ describe('ApmRoute', function() {
     )
   })
 
+  it('should work correctly with path array in props', function() {
+    const ApmRoute = getApmRoute(apmBase)
+
+    const transactionService = serviceFactory.getService('TransactionService')
+    spyOn(transactionService, 'startTransaction')
+
+    const Home = () => 'home'
+    const Topics = () => 'Topics'
+
+    const rendered = mount(
+      <Router initialEntries={['/', '/topic1', '/topic2']}>
+        <ApmRoute path={['/']} component={Home} />
+        <ApmRoute path={['/topic1', '/topic2']} component={Topics} />
+      </Router>
+    )
+    expect(transactionService.startTransaction).toHaveBeenCalledWith(
+      '/',
+      'route-change',
+      {
+        canReuse: true,
+        managed: true
+      }
+    )
+    expect(rendered.text()).toBe('home')
+    const history = rendered.find(Home).props().history
+    history.push({ pathname: '/topic2' })
+
+    expect(transactionService.startTransaction).toHaveBeenCalledWith(
+      '/topic2',
+      'route-change',
+      {
+        canReuse: true,
+        managed: true
+      }
+    )
+    expect(transactionService.startTransaction).toHaveBeenCalledTimes(2)
+    /**
+     * Should not create transaction as component is not rerendered
+     */
+    history.push({ pathname: '/topic1' })
+    expect(transactionService.startTransaction).toHaveBeenCalledTimes(2)
+  })
+
   it('should not trigger full rerender on query change', function() {
     const ApmRoute = getApmRoute(apmBase)
     const transactionService = serviceFactory.getService('TransactionService')