From eb3d91a351541ba8c78fa9f32dfda74fe08c21fc Mon Sep 17 00:00:00 2001
From: Stephen Glass <stephen@stephen.glass>
Date: Sat, 25 Jan 2025 15:23:10 -0500
Subject: [PATCH] use custom error page

Signed-off-by: Stephen Glass <stephen@stephen.glass>
---
 .changeset/fifty-pandas-destroy.md                       | 6 ++++++
 plugins/scaffolder/src/components/Router/Router.tsx      | 9 ++++-----
 .../TechDocsReaderPageContent.tsx                        | 7 +++++--
 3 files changed, 15 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/fifty-pandas-destroy.md

diff --git a/.changeset/fifty-pandas-destroy.md b/.changeset/fifty-pandas-destroy.md
new file mode 100644
index 0000000000..c07eb89b35
--- /dev/null
+++ b/.changeset/fifty-pandas-destroy.md
@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-scaffolder': patch
+'@backstage/plugin-techdocs': patch
+---
+
+Use the custom error page if provided for displaying errors instead of the default error page
diff --git a/plugins/scaffolder/src/components/Router/Router.tsx b/plugins/scaffolder/src/components/Router/Router.tsx
index 6c06322867..0853ea9438 100644
--- a/plugins/scaffolder/src/components/Router/Router.tsx
+++ b/plugins/scaffolder/src/components/Router/Router.tsx
@@ -42,7 +42,6 @@ import {
   selectedTemplateRouteRef,
   templateFormRouteRef,
 } from '../../routes';
-import { ErrorPage } from '@backstage/core-components';
 
 import { ActionsPage } from '../../components/ActionsPage';
 import { ListTasksPage } from '../../components/ListTasksPage';
@@ -64,6 +63,7 @@ import {
   taskReadPermission,
   templateManagementPermission,
 } from '@backstage/plugin-scaffolder-common/alpha';
+import { useApp } from '@backstage/core-plugin-api';
 
 /**
  * The Props for the Scaffolder Router
@@ -125,6 +125,8 @@ export const Router = (props: PropsWithChildren<RouterProps>) => {
   const outlet = useOutlet() || props.children;
   const customFieldExtensions =
     useCustomFieldExtensions<FieldExtensionOptions>(outlet);
+  const app = useApp();
+  const { NotFoundErrorPage } = app.getComponents();
 
   const fieldExtensions = [
     ...customFieldExtensions,
@@ -237,10 +239,7 @@ export const Router = (props: PropsWithChildren<RouterProps>) => {
           </RequirePermission>
         }
       />
-      <Route
-        path="*"
-        element={<ErrorPage status="404" statusMessage="Page not found" />}
-      />
+      <Route path="*" element={<NotFoundErrorPage />} />
     </Routes>
   );
 };
diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx
index f8b3129feb..9f8a991ba9 100644
--- a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.tsx
@@ -26,7 +26,7 @@ import {
   useTechDocsReaderPage,
 } from '@backstage/plugin-techdocs-react';
 import { CompoundEntityRef } from '@backstage/catalog-model';
-import { Content, ErrorPage, Progress } from '@backstage/core-components';
+import { Content, Progress } from '@backstage/core-components';
 
 import { TechDocsSearch } from '../../../search';
 import { TechDocsStateIndicator } from '../TechDocsStateIndicator';
@@ -37,6 +37,7 @@ import {
   withTechDocsReaderProvider,
 } from '../TechDocsReaderProvider';
 import { TechDocsReaderPageContentAddons } from './TechDocsReaderPageContentAddons';
+import { useApp } from '@backstage/core-plugin-api';
 
 const useStyles = makeStyles({
   search: {
@@ -97,6 +98,8 @@ export const TechDocsReaderPageContent = withTechDocsReaderProvider(
     const hash = window.location.hash;
     const isStyleLoading = useShadowDomStylesLoading(dom);
     const [hashElement] = useShadowRootElements([`[id="${hash.slice(1)}"]`]);
+    const app = useApp();
+    const { NotFoundErrorPage } = app.getComponents();
 
     useEffect(() => {
       if (isStyleLoading) return;
@@ -122,7 +125,7 @@ export const TechDocsReaderPageContent = withTechDocsReaderProvider(
 
     // No entity metadata = 404. Don't render content at all.
     if (entityMetadataLoading === false && !entityMetadata)
-      return <ErrorPage status="404" statusMessage="PAGE NOT FOUND" />;
+      return <NotFoundErrorPage />;
 
     // Do not return content until dom is ready; instead, render a state
     // indicator, which handles progress and content errors on our behalf.