[APM] Fix missing path in route change transactions (#151333)

This improves APM instrumentation in the APM app so `route-change` transactions are captured with a more specific name than `apm unknown` # Before ![image](https://user-images.githubusercontent.com/209966/219080268-23726882-ac58-4cbc-baa0-a9174fab83c0.png) # After ![image](https://user-images.githubusercontent.com/209966/219080283-bb0438d3-ce82-4fc5-9ac1-0eb40a88d44a.png)
elastic · Feb 21, 2023 · 38f26e7 · 38f26e7
1 parent d92d691
commit 38f26e7
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 17 deletions.
diff --git a/x-pack/plugins/apm/public/components/routing/app_root/index.tsx b/x-pack/plugins/apm/public/components/routing/app_root/index.tsx
@@ -41,6 +41,7 @@ import { ApmErrorBoundary } from '../apm_error_boundary';
 import { apmRouter } from '../apm_route_config';
 import { RedirectDependenciesToDependenciesInventory } from './redirect_dependencies_to_dependencies_inventory';
 import { TrackPageview } from '../track_pageview';
+import { UpdateExecutionContextOnRouteChange } from './update_execution_context_on_route_change';
 
 const storage = new Storage(localStorage);
 
@@ -73,24 +74,26 @@ export function ApmAppRoot({
                       <RedirectWithDefaultDateRange>
                         <RedirectWithOffset>
                           <TrackPageview>
-                            <BreadcrumbsContextProvider>
-                              <UrlParamsProvider>
-                                <LicenseProvider>
-                                  <AnomalyDetectionJobsContextProvider>
-                                    <InspectorContextProvider>
-                                      <ApmThemeProvider>
-                                        <MountApmHeaderActionMenu />
+                            <UpdateExecutionContextOnRouteChange>
+                              <BreadcrumbsContextProvider>
+                                <UrlParamsProvider>
+                                  <LicenseProvider>
+                                    <AnomalyDetectionJobsContextProvider>
+                                      <InspectorContextProvider>
+                                        <ApmThemeProvider>
+                                          <MountApmHeaderActionMenu />
 
-                                        <Route
-                                          component={ScrollToTopOnPathChange}
-                                        />
-                                        <RouteRenderer />
-                                      </ApmThemeProvider>
-                                    </InspectorContextProvider>
-                                  </AnomalyDetectionJobsContextProvider>
-                                </LicenseProvider>
-                              </UrlParamsProvider>
-                            </BreadcrumbsContextProvider>
+                                          <Route
+                                            component={ScrollToTopOnPathChange}
+                                          />
+                                          <RouteRenderer />
+                                        </ApmThemeProvider>
+                                      </InspectorContextProvider>
+                                    </AnomalyDetectionJobsContextProvider>
+                                  </LicenseProvider>
+                                </UrlParamsProvider>
+                              </BreadcrumbsContextProvider>
+                            </UpdateExecutionContextOnRouteChange>
                           </TrackPageview>
                         </RedirectWithOffset>
                       </RedirectWithDefaultDateRange>

diff --git a/...lugins/apm/public/components/routing/app_root/update_execution_context_on_route_change.ts b/...lugins/apm/public/components/routing/app_root/update_execution_context_on_route_change.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useExecutionContext } from '@kbn/kibana-react-plugin/public';
+import { useMatchRoutes } from '@kbn/typed-react-router-config';
+import { last } from 'lodash';
+import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
+
+export function UpdateExecutionContextOnRouteChange({
+  children,
+}: {
+  children: React.ReactElement;
+}) {
+  const { core } = useApmPluginContext();
+  const lastMatch = last(useMatchRoutes());
+
+  useExecutionContext(core.executionContext, {
+    type: 'application',
+    name: 'apm',
+    page: lastMatch?.match?.path,
+  });
+
+  return children;
+}