2947 feat improve error logging from the back end to the client (#2955)

packages/client/hmi-client/src/api/api.ts

@@ -1,7 +1,7 @@
-import { ToastSummaries } from '@/services/toast';
 import { logger } from '@/utils/logger';
-import axios, { AxiosHeaders } from 'axios';
+import axios, { AxiosError, AxiosHeaders } from 'axios';
 import { EventSource } from 'extended-eventsource';
+import { ServerError } from '@/types/ServerError';
 import { Ref, ref } from 'vue';
 import useAuthStore from '../stores/auth';
 
@@ -28,28 +28,39 @@ API.interceptors.request.use(
 
 API.interceptors.response.use(
 	(response) => response,
-	(error) => {
-		const msg = error.response.data;
-		const status = error.response.status;
-		switch (status) {
-			case 500:
-				logger.error(msg.toString(), {
-					showToast: false,
-					toastTitle: `${ToastSummaries.SERVICE_UNAVAILABLE} (${status})`
-				});
-				break;
-			default:
-				logger.error(msg.toString(), {
-					showToast: false,
-					toastTitle: `${ToastSummaries.NETWORK_ERROR} (${status})`
-				});
-		}
-		if (status === 401) {
+	(error: AxiosError) => {
+		if (error.status === 401) {
 			// redirect to login
 			const auth = useAuthStore();
 			auth.keycloak?.login({
 				redirectUri: window.location.href
 			});
+		} else {
+			let message = error.message;
+			let title = `${error.response?.statusText} (${error.response?.status})`;
+			if (error?.response?.data) {
+				const responseError: ServerError = error.response.data as ServerError;
+
+				// check to see if the 'message' property is set. If it is, set message to that value.
+				// If not, check the 'trace' property and extract the error from that.
+				// It will be the substring between the first set of quotations marks.
+				if (responseError.message) {
+					message = responseError.message;
+				} else if (responseError.trace) {
+					// extract the substring between the first set of quotation marks and use that
+					const start = responseError.trace.indexOf('"');
+					const end = responseError.trace.indexOf('"', start + 1);
+					message = responseError.trace.substring(start + 1, end);
+				}
+
+				message = message ?? 'An Error occurred';
+				title = `${responseError.error} (${responseError.status})`;
+			}
+
+			logger.error(message, {
+				showToast: true,
+				toastTitle: title
+			});
 		}
 		return null;
 	}

packages/client/hmi-client/src/components/dataset/tera-dataset.vue

@@ -45,7 +45,7 @@
 	</tera-asset>
 </template>
 <script setup lang="ts">
-import { ref, watch, onUpdated, Ref, PropType } from 'vue';
+import { onUpdated, PropType, Ref, ref, watch } from 'vue';
 import * as textUtil from '@/utils/text';
 import { cloneDeep, isString } from 'lodash';
 import { downloadRawFile, getDataset, updateDataset } from '@/services/dataset';
@@ -139,7 +139,6 @@ const optionsMenuItems = ref([
 							project.id
 						);
 						if (response) logger.info(`Added asset to ${project.name}`);
-						else logger.error('Failed to add asset to project');
 					}
 				})) ?? []
 	}
@@ -165,9 +164,9 @@ async function updateAndFetchDataset(ds: Dataset) {
 const fetchDataset = async () => {
 	const datasetTemp: Dataset | null = await getDataset(props.assetId);
 
-	// We are assuming here there is only a single csv file. This may change in the future as the API allows for it.
-	rawContent.value = await downloadRawFile(props.assetId, datasetTemp?.fileNames?.[0] ?? '');
 	if (datasetTemp) {
+		// We are assuming here there is only a single csv file. This may change in the future as the API allows for it.
+		rawContent.value = await downloadRawFile(props.assetId, datasetTemp?.fileNames?.[0] ?? '');
 		Object.entries(datasetTemp).forEach(([key, value]) => {
 			if (isString(value)) {
 				datasetTemp[key] = highlightSearchTerms(value);

packages/client/hmi-client/src/components/documents/tera-document-asset.vue

@@ -148,7 +148,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, onUpdated } from 'vue';
+import { computed, onUpdated, ref, watch } from 'vue';
 import { isEmpty } from 'lodash';
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
@@ -247,7 +247,6 @@ const optionsMenuItems = ref([
 							project.id
 						);
 						if (response) logger.info(`Added asset to ${project.name}`);
-						else logger.error('Failed to add asset to project');
 					}
 				})) ?? []
 	}

packages/client/hmi-client/src/components/model/tera-model.vue

@@ -116,7 +116,6 @@ const optionsMenuItems = computed(() => [
 							project.id
 						);
 						if (response) logger.info(`Added asset to ${project.name}`);
-						else logger.error('Failed to add asset to project');
 					}
 				})) ?? []
 	}

packages/client/hmi-client/src/components/widgets/tera-common-modal-dialogs.vue

@@ -61,8 +61,6 @@ const removeProject = async () => {
 		useProjects().getAll();
 		logger.info(`The project ${name} was removed`, { showToast: true });
 		if (currentRoute.value.name !== RouteName.Home) router.push(RoutePath.Home);
-	} else {
-		logger.error(`Unable to delete the project ${name}`, { showToast: true });
 	}
 };
 </script>

packages/client/hmi-client/src/page/data-explorer/components/tera-search-results-list.vue

@@ -172,12 +172,6 @@ const projectOptions = computed(() => [
 					}
 
 					if (response) logger.info(`Added ${assetName} to ${project.name}`);
-					else {
-						// TODO: 'response' here is just an id, and we've lost the error message by this point. We may want to
-						// eventually pass up the error code and message to this point in the code so that we can show the user
-						// more helpful information than just "failed".
-						logger.error(`Failed adding ${assetName} to ${project.name}`);
-					}
 
 					isAdding.value = false;
 				}

packages/client/hmi-client/src/page/project/components/tera-model-modal.vue

@@ -44,7 +44,6 @@ import {
 } from '@/services/model';
 import { useProjects } from '@/composables/project';
 import { addAsset } from '@/services/project';
-import { logger } from '@/utils/logger';
 import { useToastService } from '@/services/toast';
 
 const props = defineProps<{
@@ -95,7 +94,6 @@ async function updateModelName() {
 	await useProjects().refresh();
 
 	if (!response) {
-		logger.error('Could not save asset to project');
 		return;
 	}
 

packages/client/hmi-client/src/page/project/tera-project.vue

@@ -156,10 +156,8 @@ async function removeAsset(assetRoute: AssetRoute) {
 				openAsset({ assetId: '', pageType: ProjectPages.OVERVIEW });
 			}
 			logger.info(`${assetRoute.assetId} was removed.`, { showToast: true });
-			return;
 		}
 	}
-	logger.error(`Failed to remove ${assetRoute.assetId}`, { showToast: true });
 }
 
 const openWorkflow = async () => {

packages/client/hmi-client/src/services/artifact.ts

@@ -1,7 +1,6 @@
 import type { Artifact } from '@/types/Types';
 import API from '@/api/api';
 import { Ref } from 'vue';
-import { logger } from '@/utils/logger';
 
 /**
  * This is a helper function to take an arbitrary file from a github repo and create a new artifact from it
@@ -38,8 +37,7 @@ async function createNewArtifactFromGithubFile(
 		}
 	);
 
-	if (!urlResponse || urlResponse.status >= 400) {
-		logger.error(`Failed to upload artifact from github: ${urlResponse}`);
+	if (!urlResponse) {
 		return null;
 	}
 
@@ -127,8 +125,7 @@ async function getArtifactFileAsText(artifactId: string, fileName: string): Prom
 		{}
 	);
 
-	if (!response || response.status >= 400) {
-		logger.error('Error getting artifact file as text');
+	if (!response) {
 		return null;
 	}
 
@@ -143,8 +140,7 @@ async function getArtifactArrayBuffer(
 		responseType: 'arraybuffer'
 	});
 
-	if (!response || response.status >= 400) {
-		logger.error('Error getting file download url');
+	if (!response) {
 		return null;
 	}
 

packages/client/hmi-client/src/services/code.ts

@@ -2,13 +2,11 @@ import API from '@/api/api';
 import type { Code } from '@/types/Types';
 import { ProgrammingLanguage } from '@/types/Types';
 import { Ref } from 'vue';
-import { logger } from '@/utils/logger';
 
 async function getCodeAsset(codeAssetId: string): Promise<Code | null> {
 	const response = await API.get(`/code-asset/${codeAssetId}`);
 
-	if (!response || response.status >= 400) {
-		logger.error('Error getting code file as text');
+	if (!response) {
 		return null;
 	}
 
@@ -32,8 +30,7 @@ async function updateCodeAsset(
 	}
 	const response = await API.put(`/code-asset/${code.id}`, code);
 
-	if (!response || response.status >= 400) {
-		logger.error('Error updating code asset');
+	if (!response) {
 		return null;
 	}
 
@@ -46,8 +43,7 @@ async function getCodeFileAsText(codeAssetId: string, fileName: string): Promise
 		{}
 	);
 
-	if (!response || response.status >= 400) {
-		logger.error('Error getting code file as text');
+	if (!response) {
 		return null;
 	}
 
@@ -104,8 +100,7 @@ async function uploadCodeToProjectFromGithub(
 		}
 	);
 
-	if (!urlResponse || urlResponse.status >= 400) {
-		logger.error(`Failed to upload code from github: ${urlResponse}`);
+	if (!urlResponse) {
 		return null;
 	}
 
@@ -137,8 +132,7 @@ async function uploadCodeFromGithubRepo(
 		}
 	);
 
-	if (!urlResponse || urlResponse.status >= 400) {
-		logger.error(`Failed to upload code from github: ${urlResponse}`);
+	if (!urlResponse) {
 		return null;
 	}
 

packages/client/hmi-client/src/services/data.ts

@@ -451,10 +451,6 @@ const getRelatedDocuments = async (docid: string): Promise<Document[]> => {
 		}
 		if (status === 204) {
 			logger.error('Request received successfully, but there are no documents');
-		} else if (status === 400) {
-			logger.error('Query must contain a docid');
-		} else if (status === 500) {
-			logger.error('An error occurred retrieving documents');
 		}
 	}
 	return [] as Document[];

packages/client/hmi-client/src/services/dataset.ts

@@ -206,9 +206,6 @@ async function createDatasetFromSimulationResult(
 		if (response && response.status === 201) {
 			return true;
 		}
-		logger.error(`Unable to create dataset from simulation result ${response.status}`, {
-			toastTitle: 'TDS - Simulation'
-		});
 		return false;
 	} catch (error) {
 		logger.error(

packages/client/hmi-client/src/services/document-assets.ts

@@ -94,7 +94,6 @@ async function createNewDocumentFromGithubFile(
 	);
 
 	if (!urlResponse || urlResponse.status >= 400) {
-		logger.error(`Failed to upload document from github: ${urlResponse}`);
 		return null;
 	}
 
@@ -166,8 +165,7 @@ async function getDocumentFileAsText(documentId: string, fileName: string): Prom
 		{}
 	);
 
-	if (!response || response.status >= 400) {
-		logger.error('Error getting document file as text');
+	if (!response) {
 		return null;
 	}
 
@@ -183,8 +181,7 @@ async function getEquationFromImageUrl(
 		{}
 	);
 
-	if (!response || response.status >= 400) {
-		logger.error('Error getting equation from image url');
+	if (!response) {
 		return null;
 	}
 
@@ -219,8 +216,7 @@ async function createDocumentFromXDD(
 		}
 	);
 
-	if (!response || response.status >= 400) {
-		logger.error('Error upload file from doi');
+	if (!response) {
 		return null;
 	}
 

packages/client/hmi-client/src/services/knowledge.ts

@@ -1,4 +1,4 @@
-import API, { Poller, PollerState, PollResponse, PollerResult } from '@/api/api';
+import API, { Poller, PollerResult, PollerState, PollResponse } from '@/api/api';
 import { AxiosError, AxiosResponse } from 'axios';
 import type { Code, Dataset, ExtractionResponse, Model } from '@/types/Types';
 import { logger } from '@/utils/logger';
@@ -68,7 +68,6 @@ export const equationsToAMR = async (
 				return response.data.result;
 			}
 		}
-		logger.error(`Equations to AMR request failed`, { toastTitle: 'Error - Knowledge Middleware' });
 	} catch (error: unknown) {
 		logger.error(error, { showToast: false });
 	}

packages/client/hmi-client/src/types/ServerError.ts

@@ -0,0 +1,8 @@
+export interface ServerError {
+	timestamp: string;
+	status: number;
+	error: string;
+	message?: string;
+	path: string;
+	trace: string;
+}

packages/client/hmi-client/src/workflow/ops/model-from-document/tera-model-from-document-drilldown.vue

@@ -135,7 +135,6 @@ import Image from 'primevue/image';
 import { equationsToAMR } from '@/services/knowledge';
 import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';
-import { logger } from '@/utils/logger';
 import { generateModelCard, getModel, updateModel } from '@/services/model';
 import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeholder.vue';
 import { useProjects } from '@/composables/project';
@@ -300,7 +299,6 @@ async function onRun() {
 	const res = await equationsToAMR('latex', equations, clonedState.value.modelFramework);
 
 	if (!res) {
-		logger.error('Error creating AMR');
 		return;
 	}