Merge pull request #28625 from stephenglass/fix-custom-error-page-1

.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

plugins/scaffolder/src/components/Router/Router.test.tsx

@@ -76,6 +76,14 @@ describe('Router', () => {
       expect(getByText('foobar')).toBeInTheDocument();
       expect(TemplateListPage).not.toHaveBeenCalled();
     });
+
+    it('should render not found error page', async () => {
+      await expect(
+        wrapInApisAndRender(<Router />, {
+          routeEntries: ['/foonotfounderror'],
+        }),
+      ).rejects.toThrow('Reached NotFound Page');
+    });
   });
 
   describe('/templates/:templateName', () => {

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>
   );
 };

plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.test.tsx

@@ -126,20 +126,19 @@ describe('<TechDocsReaderPageContent />', () => {
     useTechDocsReaderDom.mockReturnValue(document.createElement('html'));
     useReaderState.mockReturnValue({ state: 'cached' });
 
-    const rendered = await renderInTestApp(
-      <Wrapper>
-        <TechDocsReaderPageContent withSearch={false} />
-      </Wrapper>,
-    );
+    await expect(
+      renderInTestApp(
+        <Wrapper>
+          <TechDocsReaderPageContent withSearch={false} />
+        </Wrapper>,
+      ),
+    ).rejects.toThrow('Reached NotFound Page');
 
-    await waitFor(() => {
-      expect(
-        rendered.queryByTestId('techdocs-native-shadowroot'),
-      ).not.toBeInTheDocument();
-      expect(
-        rendered.getByText('ERROR 404: PAGE NOT FOUND'),
-      ).toBeInTheDocument();
-    });
+    // Check the global document for the absence of the shadow root
+    const shadowRoot = document.querySelector(
+      '[data-testid="techdocs-native-shadowroot"]',
+    );
+    expect(shadowRoot).not.toBeInTheDocument();
   });
 
   it('should render 404 if there is no dom and reader state is not found', async () => {

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.