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.test.tsx b/plugins/scaffolder/src/components/Router/Router.test.tsx
index 9c752ed3c1..871e9f7632 100644
--- a/plugins/scaffolder/src/components/Router/Router.test.tsx
+++ b/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(, {
+ routeEntries: ['/foonotfounderror'],
+ }),
+ ).rejects.toThrow('Reached NotFound Page');
+ });
});
describe('/templates/:templateName', () => {
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) => {
const outlet = useOutlet() || props.children;
const customFieldExtensions =
useCustomFieldExtensions(outlet);
+ const app = useApp();
+ const { NotFoundErrorPage } = app.getComponents();
const fieldExtensions = [
...customFieldExtensions,
@@ -237,10 +239,7 @@ export const Router = (props: PropsWithChildren) => {
}
/>
- }
- />
+ } />
);
};
diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.test.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.test.tsx
index 3c6756e058..a22e5e917d 100644
--- a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.test.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/TechDocsReaderPageContent.test.tsx
@@ -126,20 +126,19 @@ describe('', () => {
useTechDocsReaderDom.mockReturnValue(document.createElement('html'));
useReaderState.mockReturnValue({ state: 'cached' });
- const rendered = await renderInTestApp(
-
-
- ,
- );
+ await expect(
+ renderInTestApp(
+
+
+ ,
+ ),
+ ).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 () => {
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 ;
+ return ;
// Do not return content until dom is ready; instead, render a state
// indicator, which handles progress and content errors on our behalf.