[APM] Replace EuiErrorBoundary with KibanaErrorBoundary on the APM Error Template (#226884)

jennypavlova · jennypavlova · commit d12e44651da9 · 2025-07-11T13:40:29.000+02:00
PR 1 of 2 ## Summary This PR replaces `EuiErrorBoundary` with `KibanaErrorBoundary` on the APM Error Template. Compared to the infra PRs done in #225972, here we can the change is on the routing level, so we can reproduce it on different pages. ## Testing - Introduce an error in the apm page (maybe a typo, non-existent component, or anything) - it can be in a service overview page, as in the example, or any other page. <img width="1006" alt="code error" src="https://github.com/user-attachments/assets/5cb4e8b8-453a-450b-8a86-c3d7096d02a2" /> - Open `localhost:5601/ftw/app/apm/services/ _your_service_name_ /overview` - The error should be visible, and it should still work as before (but also including telemetry) <img width="1718" alt="apm page error" src="https://github.com/user-attachments/assets/a84e6fb5-b8d0-4a0d-a172-70da9edac04d" /> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit 873e4b4) # Conflicts: # x-pack/plugins/observability_solution/apm/public/components/routing/apm_error_boundary.tsx
diff --git a/x-pack/plugins/observability_solution/apm/public/components/routing/apm_error_boundary.tsx b/x-pack/plugins/observability_solution/apm/public/components/routing/apm_error_boundary.tsx
@@ -5,12 +5,12 @@
  * 2.0.
  */
 import { NotFoundRouteException } from '@kbn/typed-react-router-config';
-import { EuiErrorBoundary } from '@elastic/eui';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import React from 'react';
 import { NotFoundPrompt } from '@kbn/shared-ux-prompt-not-found';
 import { useLocation } from 'react-router-dom';
-import { ApmPluginStartDeps } from '../../plugin';
+import { KibanaErrorBoundary } from '@kbn/shared-ux-error-boundary';
+import type { ApmPluginStartDeps } from '../../plugin';
 
 export function ApmErrorBoundary({ children }: { children?: React.ReactNode }) {
   const location = useLocation();
@@ -65,9 +65,9 @@ function ErrorWithTemplate({ error }: { error: Error }) {
 
   return (
     <ObservabilityPageTemplate pageHeader={pageHeader}>
-      <EuiErrorBoundary>
+      <KibanaErrorBoundary>
         <DummyComponent error={error} />
-      </EuiErrorBoundary>
+      </KibanaErrorBoundary>
     </ObservabilityPageTemplate>
   );
 }
