[Profiling] Blank page when an invalid query string is given and when… (#152493)

closes https://github.com/elastic/prodfiler/issues/3049

404:
<img width="1390" alt="Screenshot 2023-03-01 at 1 24 14 PM"
src="https://user-images.githubusercontent.com/55978943/222230441-d670fe14-d372-456e-a98e-0184fb2f68e7.png">

Error boundary:
<img width="1584" alt="Screenshot 2023-03-01 at 1 24 41 PM"
src="https://user-images.githubusercontent.com/55978943/222230511-97997995-cae2-4c8a-906f-2db9bea191af.png">

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/profiling/public/app.tsx

@@ -22,6 +22,7 @@ import { profilingRouter } from './routing';
 import { Services } from './services';
 import { ProfilingPluginPublicSetupDeps, ProfilingPluginPublicStartDeps } from './types';
 import { ProfilingHeaderActionMenu } from './components/profiling_header_action_menu';
+import { RouterErrorBoundary } from './routing/router_error_boundary';
 
 interface Props {
   profilingFetchServices: Services;
@@ -82,21 +83,23 @@ function App({
         <i18nCore.Context>
           <RedirectAppLinks coreStart={coreStart} currentAppId="profiling">
             <RouterProvider router={profilingRouter as any} history={history}>
-              <TimeRangeContextProvider>
-                <ProfilingDependenciesContextProvider value={profilingDependencies}>
-                  <CheckSetup>
-                    <RedirectWithDefaultDateRange>
-                      <RouteBreadcrumbsContextProvider>
-                        <RouteRenderer />
-                      </RouteBreadcrumbsContextProvider>
-                    </RedirectWithDefaultDateRange>
-                  </CheckSetup>
-                  <MountProfilingActionMenu
-                    setHeaderActionMenu={setHeaderActionMenu}
-                    theme$={theme$}
-                  />
-                </ProfilingDependenciesContextProvider>
-              </TimeRangeContextProvider>
+              <RouterErrorBoundary>
+                <TimeRangeContextProvider>
+                  <ProfilingDependenciesContextProvider value={profilingDependencies}>
+                    <CheckSetup>
+                      <RedirectWithDefaultDateRange>
+                        <RouteBreadcrumbsContextProvider>
+                          <RouteRenderer />
+                        </RouteBreadcrumbsContextProvider>
+                      </RedirectWithDefaultDateRange>
+                    </CheckSetup>
+                    <MountProfilingActionMenu
+                      setHeaderActionMenu={setHeaderActionMenu}
+                      theme$={theme$}
+                    />
+                  </ProfilingDependenciesContextProvider>
+                </TimeRangeContextProvider>
+              </RouterErrorBoundary>
             </RouterProvider>
           </RedirectAppLinks>
         </i18nCore.Context>

x-pack/plugins/profiling/public/routing/router_error_boundary.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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 { 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 { i18n } from '@kbn/i18n';
+import { ProfilingPluginPublicStartDeps } from '../types';
+
+export function RouterErrorBoundary({ children }: { children?: React.ReactNode }) {
+  const location = useLocation();
+  return <ErrorBoundary key={location.pathname}>{children}</ErrorBoundary>;
+}
+
+class ErrorBoundary extends React.Component<{ children?: React.ReactNode }, { error?: Error }, {}> {
+  public state: { error?: Error } = {
+    error: undefined,
+  };
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  render() {
+    if (this.state.error) {
+      return <ErrorWithTemplate error={this.state.error} />;
+    }
+
+    return this.props.children;
+  }
+}
+
+const pageHeader = {
+  pageTitle: i18n.translate('xpack.profiling.universalProfiling', {
+    defaultMessage: 'Universal Profiling',
+  }),
+};
+
+function ErrorWithTemplate({ error }: { error: Error }) {
+  const { services } = useKibana<ProfilingPluginPublicStartDeps>();
+  const { observability } = services;
+
+  const ObservabilityPageTemplate = observability.navigation.PageTemplate;
+
+  if (error instanceof NotFoundRouteException) {
+    return (
+      <ObservabilityPageTemplate pageHeader={pageHeader}>
+        <NotFoundPrompt />
+      </ObservabilityPageTemplate>
+    );
+  }
+
+  return (
+    <ObservabilityPageTemplate pageHeader={pageHeader}>
+      <EuiErrorBoundary>
+        <DummyComponent error={error} />
+      </EuiErrorBoundary>
+    </ObservabilityPageTemplate>
+  );
+}
+
+function DummyComponent({ error }: { error: Error }) {
+  throw error;
+  return <div />;
+}

x-pack/plugins/profiling/tsconfig.json

@@ -40,6 +40,7 @@
     "@kbn/core-http-request-handler-context-server",
     "@kbn/spaces-plugin",
     "@kbn/cloud-plugin",
+    "@kbn/shared-ux-prompt-not-found",
     // add references to other TypeScript projects the plugin depends on
 
     // requiredPlugins from ./kibana.json