Handle no project ID being present

Signed-off-by: Karan Shah <karan.shah@simplybusiness.co.uk>

plugins/airbrake/src/api/ProductionApi.ts

@@ -18,10 +18,20 @@ import { Groups } from './airbrakeGroups';
 import { AirbrakeApi } from './AirbrakeApi';
 import { DiscoveryApi } from '@backstage/core-plugin-api';
 
+export class NoProjectIdError extends Error {
+  constructor() {
+    super('Project ID is not present');
+  }
+}
+
 export class ProductionAirbrakeApi implements AirbrakeApi {
   constructor(private readonly discoveryApi: DiscoveryApi) {}
 
   async fetchGroups(projectId: string): Promise<Groups> {
+    if (!projectId) {
+      throw new NoProjectIdError();
+    }
+
     const baseUrl = await this.discoveryApi.getBaseUrl('airbrake');
     const apiUrl = `${baseUrl}/api/v4/projects/${projectId}/groups`;
 

plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.tsx

@@ -29,6 +29,7 @@ import { ErrorApi, errorApiRef, useApi } from '@backstage/core-plugin-api';
 import { airbrakeApiRef } from '../../api';
 import useAsync from 'react-use/lib/useAsync';
 import { AIRBRAKE_PROJECT_ID_ANNOTATION, useProjectId } from '../useProjectId';
+import { NoProjectIdError } from '../../api/ProductionApi';
 
 const useStyles = makeStyles<BackstageTheme>(() => ({
   multilineText: {
@@ -56,14 +57,35 @@ export const EntityAirbrakeWidget = ({ entity }: { entity: Entity }) => {
   useEffect(() => {
     if (!projectId) {
       setComponentState(ComponentState.NoProjectId);
+    } else {
+      setComponentState(ComponentState.Loading);
     }
   }, [projectId]);
 
   const { loading, value, error } = useAsync(async () => {
-    const result = await airbrakeApi.fetchGroups(projectId);
-    setComponentState(ComponentState.Loaded);
-    return result;
-  }, [airbrakeApi, projectId]);
+    try {
+      const result = await airbrakeApi.fetchGroups(projectId);
+      setComponentState(ComponentState.Loaded);
+      return result;
+    } catch (e) {
+      if (e instanceof NoProjectIdError) {
+        setComponentState(ComponentState.NoProjectId);
+      } else {
+        setComponentState(ComponentState.Error);
+      }
+      throw e;
+    }
+  }, [componentState, airbrakeApi, projectId]);
+
+  useEffect(() => {
+    if (
+      componentState === ComponentState.Error &&
+      error &&
+      !(error instanceof NoProjectIdError)
+    ) {
+      errorApi.post(error);
+    }
+  }, [componentState, error, errorApi]);
 
   useEffect(() => {
     if (loading) {
@@ -71,13 +93,6 @@ export const EntityAirbrakeWidget = ({ entity }: { entity: Entity }) => {
     }
   }, [loading]);
 
-  useEffect(() => {
-    if (componentState !== ComponentState.NoProjectId && error) {
-      setComponentState(ComponentState.Error);
-      errorApi.post(error);
-    }
-  }, [componentState, error, errorApi]);
-
   switch (componentState) {
     case ComponentState.Loaded:
       return (