Merge pull request #4314 from adamdmharvey/techdocs-error500

techdocs: Expose backend 500 errors (mkdocs build) to UI

plugins/techdocs/src/api.ts

@@ -157,14 +157,23 @@ export class TechDocsStorageApi implements TechDocsStorage {
       `${url.endsWith('/') ? url : `${url}/`}index.html`,
     );
 
-    if (request.status === 404) {
-      let errorMessage = 'Page not found. ';
-      // path is empty for the home page of an entity's docs site
-      if (!path) {
-        errorMessage +=
-          'This could be because there is no index.md file in the root of the docs directory of this repository.';
-      }
-      throw new Error(errorMessage);
+    let errorMessage = '';
+    switch (request.status) {
+      case 404:
+        errorMessage = 'Page not found. ';
+        // path is empty for the home page of an entity's docs site
+        if (!path) {
+          errorMessage +=
+            'This could be because there is no index.md file in the root of the docs directory of this repository.';
+        }
+        throw new Error(errorMessage);
+      case 500:
+        errorMessage =
+          'Could not generate documentation or an error in the TechDocs backend. ';
+        throw new Error(errorMessage);
+      default:
+        // Do nothing
+        break;
     }
 
     return request.text();

plugins/techdocs/src/reader/components/Reader.tsx

@@ -155,7 +155,9 @@ export const Reader = ({ entityId, onReady }: Props) => {
   ]);
 
   if (error) {
-    return <TechDocsNotFound errorMessage={error.message} />;
+    // TODO Enhance API call to return customize error objects so we can identify which we ran into
+    // For now this defaults to display error code 404
+    return <TechDocsNotFound statusCode={404} errorMessage={error.message} />;
   }
 
   return (

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

@@ -41,3 +41,20 @@ describe('<TechDocsNotFound errorMessage="This is a custom error message" />', (
     expect(rendered.getByTestId('go-back-link')).toBeDefined();
   });
 });
+
+describe('<TechDocsNotFound statusCode={500} errorMessage="This is a custom error message" />', () => {
+  it('should render with a custom status code, custom error message and go back link', () => {
+    const rendered = render(
+      wrapInTestApp(
+        <TechDocsNotFound
+          statusCode={500}
+          errorMessage="This is a custom error message"
+        />,
+      ),
+    );
+    rendered.getByText(/This is a custom error message/i);
+    rendered.getByText(/500/i);
+    rendered.getByText(/Looks like someone dropped the mic!/i);
+    expect(rendered.getByTestId('go-back-link')).toBeDefined();
+  });
+});

plugins/techdocs/src/reader/components/TechDocsNotFound.tsx

@@ -19,9 +19,10 @@ import { ErrorPage, useApi, configApiRef } from '@backstage/core';
 
 type Props = {
   errorMessage?: string;
+  statusCode?: number;
 };
 
-export const TechDocsNotFound = ({ errorMessage }: Props) => {
+export const TechDocsNotFound = ({ errorMessage, statusCode }: Props) => {
   const techdocsBuilder = useApi(configApiRef).getOptionalString(
     'techdocs.builder',
   );
@@ -37,7 +38,7 @@ export const TechDocsNotFound = ({ errorMessage }: Props) => {
 
   return (
     <ErrorPage
-      status="404"
+      status={statusCode ? statusCode.toString() : '404'}
       statusMessage={errorMessage || 'Documentation not found'}
       additionalInfo={additionalInfo}
     />