692 Error monitoring

.changeset/eleven-islands-kiss.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': minor
+---
+
+692 Adds WfoErrorMonitoringProvider for tracing purposes. It exposes 2 methods via the useWfoErrorMonitoring hook. These reporting functions are used within the component library. To start using it, the WfoErrorMonitoringProvider needs to be added to the _app.tsx and the errorMonitoringHandler needs to be implemented. 

packages/orchestrator-ui-components/src/components/WfoForms/UserInputForm.tsx

@@ -34,7 +34,7 @@ import {
 } from '@elastic/eui';
 
 import { ConfirmDialogHandler, ConfirmationDialogContext } from '@/contexts';
-import { useOrchestratorTheme } from '@/hooks';
+import { useOrchestratorTheme, useWfoErrorMonitoring } from '@/hooks';
 import { WfoPlayFill } from '@/icons';
 import { FormValidationError, ValidationError } from '@/types/forms';
 
@@ -429,6 +429,7 @@ export function WfoUserInputForm({
     const [processing, setProcessing] = useState<boolean>(false);
     const [nrOfValidationErrors, setNrOfValidationErrors] = useState<number>(0);
     const [rootErrors, setRootErrors] = useState<string[]>([]);
+    const { reportError } = useWfoErrorMonitoring();
 
     const openLeavePageDialog = (
         leaveAction: ConfirmDialogHandler,
@@ -457,7 +458,7 @@ export function WfoUserInputForm({
                 await validSubmit(userInput);
                 setProcessing(false);
                 return null;
-            } catch (error: unknown) {
+            } catch (error) {
                 setProcessing(false);
                 if (typeof error === 'object' && error !== null) {
                     const validationError = error as FormValidationError;
@@ -485,6 +486,9 @@ export function WfoUserInputForm({
                 }
                 // Let the error escape, so it can be caught by our own onerror handler instead of being silenced by uniforms
                 setTimeout(() => {
+                    reportError(
+                        new Error(`Forms error: ${JSON.stringify({ error })}`),
+                    );
                     throw error;
                 }, 0);
 

packages/orchestrator-ui-components/src/contexts/WfoErrorMonitoringProvider.tsx

@@ -0,0 +1,37 @@
+import React, { FC, ReactNode, createContext } from 'react';
+
+export type WfoErrorMonitoring = {
+    reportError: (error: Error | string) => void;
+    reportMessage: (message: string) => void;
+};
+
+export const emptyWfoErrorMonitoring: WfoErrorMonitoring = {
+    reportError: () => {},
+    reportMessage: () => {},
+};
+
+export const WfoErrorMonitoringContext = createContext<WfoErrorMonitoring>(
+    emptyWfoErrorMonitoring,
+);
+
+export type WfoErrorMonitoringProviderProps = {
+    errorMonitoringHandler?: WfoErrorMonitoring;
+    children: ReactNode;
+};
+
+/**
+ *
+ * @param errorMonitoringHandler for implementing the error monitoring. When not provided, all report calls are no-ops.
+ * @param children
+ */
+export const WfoErrorMonitoringProvider: FC<
+    WfoErrorMonitoringProviderProps
+> = ({ errorMonitoringHandler, children }) => {
+    return (
+        <WfoErrorMonitoringContext.Provider
+            value={errorMonitoringHandler ?? emptyWfoErrorMonitoring}
+        >
+            {children}
+        </WfoErrorMonitoringContext.Provider>
+    );
+};

packages/orchestrator-ui-components/src/contexts/index.ts

@@ -2,3 +2,4 @@ export * from './ConfirmationDialogProvider';
 export * from './OrchestratorConfigContext';
 export * from './PolicyContext';
 export * from './TreeContext';
+export * from './WfoErrorMonitoringProvider';

packages/orchestrator-ui-components/src/hooks/index.ts

@@ -6,5 +6,6 @@ export * from './useDataDisplayParams';
 export * from './useShowToastMessage';
 export * from './useStoredTableConfig';
 export * from './useWithOrchestratorTheme';
+export * from './useWfoErrorMonitoring';
 export * from './useWfoSession';
 export * from './useGetOrchestratorConfig';

packages/orchestrator-ui-components/src/hooks/useWfoErrorMonitoring.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+
+import { WfoErrorMonitoringContext } from '@/contexts';
+
+export const useWfoErrorMonitoring = () =>
+    useContext(WfoErrorMonitoringContext);

packages/orchestrator-ui-components/src/rtk/endpoints/streamMessages.ts

@@ -82,7 +82,7 @@ const streamMessagesApi = orchestratorApi.injectEndpoints({
                             orchestratorApi.util.invalidateTags([cacheTag]);
                         dispatch(cacheInvalidationAction);
                     } else {
-                        console.error(
+                        throw new Error(
                             `Trying to invalidate a cache entry with an unknown tag: ${cacheTag.type}`,
                         );
                     }
@@ -97,9 +97,12 @@ const streamMessagesApi = orchestratorApi.injectEndpoints({
                 const getDebounce = (delay: number) => {
                     return debounce(() => {
                         webSocket.close();
-                        // note: websocket.close doesnt trigger the onclose handler when losing
+                        // note: websocket.close doesn't trigger the onClose handler when losing
                         // internet connection so we call the cleanup event from here to be sure it's called
                         cleanUp();
+                        throw new Error(
+                            'Websocket connection lost: no pong received',
+                        );
                     }, delay);
                 };
 
@@ -157,7 +160,7 @@ const streamMessagesApi = orchestratorApi.injectEndpoints({
                         if (message.name === MessageTypes.invalidateCache) {
                             invalidateTag(message.value);
                         } else {
-                            console.error('Unknown message type', message);
+                            throw new Error(`Unknown message type: ${message}`);
                         }
                     },
                 );