Feat/UI error observability (#6169)

This PR adds an endpoint to Unleash that accepts an error message and
option error stack and logs it as an error. This allows us to leverage
errors in logs observability to catch UI errors consistently.

Considered a test, but this endpoint only accepts and logs input, so I'm
not sure how useful it would be.

frontend/src/component/App.tsx

@@ -1,7 +1,5 @@
 import { Suspense, useEffect } from 'react';
 import { Route, Routes } from 'react-router-dom';
-import { ErrorBoundary } from 'react-error-boundary';
-import { Error as LayoutError } from 'component/layout/Error/Error';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { FeedbackNPS } from 'component/feedback/FeedbackNPS/FeedbackNPS';
 import { LayoutPicker } from 'component/layout/LayoutPicker/LayoutPicker';
@@ -51,7 +49,6 @@ export const App = () => {
     }, [authDetails, user]);
 
     return (
-        <ErrorBoundary FallbackComponent={LayoutError}>
         <SWRProvider>
             <Suspense fallback={<Loader />}>
                 <ConditionallyRender
@@ -111,6 +108,5 @@ export const App = () => {
                 />
             </Suspense>
         </SWRProvider>
-        </ErrorBoundary>
     );
 };

frontend/src/hooks/api/actions/useRecordUIErrorApi/useRecordUiErrorApi.ts

@@ -0,0 +1,31 @@
+import useAPI from '../useApi/useApi';
+
+export interface RecordUIErrorSchema {
+    errorMessage: string;
+    errorStack: string;
+}
+
+export const useRecordUIErrorApi = () => {
+    const { makeRequest, createRequest, errors, loading } = useAPI({
+        propagateErrors: true,
+    });
+
+    const recordUiError = async (
+        payload: RecordUIErrorSchema,
+    ): Promise<number> => {
+        const path = `api/admin/record-ui-error`;
+        const req = createRequest(path, {
+            method: 'POST',
+            body: JSON.stringify(payload),
+        });
+
+        const res = await makeRequest(req.caller, req.id);
+        return res.status;
+    };
+
+    return {
+        loading,
+        errors,
+        recordUiError,
+    };
+};

frontend/src/index.tsx

@@ -20,17 +20,39 @@ import { FeedbackProvider } from 'component/feedbackNew/FeedbackProvider';
 import { PlausibleProvider } from 'component/providers/PlausibleProvider/PlausibleProvider';
 import { Error as LayoutError } from './component/layout/Error/Error';
 import { ErrorBoundary } from 'react-error-boundary';
+import { useRecordUIErrorApi } from 'hooks/api/actions/useRecordUIErrorApi/useRecordUiErrorApi';
+import { useEffect } from 'react';
 
 window.global ||= window;
 
-ReactDOM.render(
+const ApplicationRoot = () => {
+    const { recordUiError } = useRecordUIErrorApi();
+
+    const sendErrorToApi = async (
+        error: Error,
+        info: { componentStack: string },
+    ) => {
+        try {
+            await recordUiError({
+                errorMessage: error.message,
+                errorStack: error.stack || '',
+            });
+        } catch (e) {
+            console.error('Unable to log error');
+        }
+    };
+
+    return (
         <UIProviderContainer>
             <AccessProvider>
                 <BrowserRouter basename={basePath}>
                     <QueryParamProvider adapter={ReactRouter6Adapter}>
                         <ThemeProvider>
                             <AnnouncerProvider>
-                            <ErrorBoundary FallbackComponent={LayoutError}>
+                                <ErrorBoundary
+                                    FallbackComponent={LayoutError}
+                                    onError={sendErrorToApi}
+                                >
                                     <PlausibleProvider>
                                         <FeedbackProvider>
                                             <FeedbackCESProvider>
@@ -49,6 +71,8 @@ ReactDOM.render(
                     </QueryParamProvider>
                 </BrowserRouter>
             </AccessProvider>
-    </UIProviderContainer>,
+        </UIProviderContainer>
-    document.getElementById('app'),
+    );
-);
+};
+
+ReactDOM.render(<ApplicationRoot />, document.getElementById('app'));

src/lib/features/ui-observability-controller/ui-observability-controller.ts

@@ -0,0 +1,57 @@
+import { Request, Response } from 'express';
+import Controller from '../../routes/controller';
+
+import { NONE } from '../../types/permissions';
+import { IUnleashConfig } from '../../types/option';
+import { IUnleashServices } from '../../types/services';
+import { Logger } from '../../logger';
+
+import {
+    emptyResponse,
+    getStandardResponses,
+} from '../../openapi/util/standard-responses';
+import { createRequestSchema } from '../../openapi';
+
+const version = 1;
+
+export class UiObservabilityController extends Controller {
+    private logger: Logger;
+
+    constructor(
+        config: IUnleashConfig,
+        { openApiService }: Pick<IUnleashServices, 'openApiService'>,
+    ) {
+        super(config);
+        this.logger = config.getLogger('/admin-api/ui-observability.js');
+
+        this.route({
+            method: 'post',
+            path: '',
+            handler: this.recordUiError,
+            permission: NONE,
+            middleware: [
+                openApiService.validPath({
+                    tags: ['Admin UI'],
+                    operationId: 'uiObservability',
+                    summary: 'Accepts errors from the UI client',
+                    description:
+                        'This endpoint accepts error reports from the UI client, so that we can add observability on UI errors.',
+                    requestBody: createRequestSchema('recordUiErrorSchema'),
+                    responses: {
+                        204: emptyResponse,
+                        ...getStandardResponses(401, 403),
+                    },
+                }),
+            ],
+        });
+    }
+
+    async recordUiError(req: Request, res: Response): Promise<void> {
+        this.logger.error(
+            `UI Observability Error: ${req.body.errorMessage}`,
+            req.body.errorStack,
+        );
+
+        res.status(204).end();
+    }
+}

src/lib/openapi/index.ts

@@ -174,6 +174,7 @@ import {
     inactiveUserSchema,
     inactiveUsersSchema,
     idsSchema,
+    recordUiErrorSchema,
 } from './spec';
 import { IServerOption } from '../types';
 import { mapValues, omitKeys } from '../util';
@@ -415,6 +416,7 @@ export const schemas: UnleashSchemas = {
     featureSearchResponseSchema,
     inactiveUserSchema,
     inactiveUsersSchema,
+    recordUiErrorSchema,
 };
 
 // Remove JSONSchema keys that would result in an invalid OpenAPI spec.

src/lib/openapi/spec/index.ts

@@ -175,5 +175,6 @@ export * from './feature-type-count-schema';
 export * from './feature-search-response-schema';
 export * from './inactive-user-schema';
 export * from './inactive-users-schema';
+export * from './record-ui-error-schema';
 export * from './project-application-schema';
 export * from './project-applications-schema';

src/lib/openapi/spec/record-ui-error-schema.ts

@@ -0,0 +1,21 @@
+import { FromSchema } from 'json-schema-to-ts';
+
+export const recordUiErrorSchema = {
+    $id: '#/components/schemas/recordUiErrorSchema',
+    type: 'object',
+    components: {},
+    required: ['errorMessage'],
+    description: 'An object representing an error from the UI',
+    properties: {
+        errorMessage: {
+            type: 'string',
+            description: 'The error message',
+        },
+        errorStack: {
+            type: 'string',
+            description: 'The stack trace of the error',
+        },
+    },
+} as const;
+
+export type RecordUiErrorSchema = FromSchema<typeof recordUiErrorSchema>;

src/lib/routes/admin-api/index.ts

@@ -35,6 +35,7 @@ import ExportImportController from '../../features/export-import-toggles/export-
 import { SegmentsController } from '../../features/segment/segment-controller';
 import FeatureSearchController from '../../features/feature-search/feature-search-controller';
 import { InactiveUsersController } from '../../users/inactive/inactive-users-controller';
+import { UiObservabilityController } from '../../features/ui-observability-controller/ui-observability-controller';
 
 class AdminApi extends Controller {
     constructor(config: IUnleashConfig, services: IUnleashServices, db: Db) {
@@ -163,6 +164,11 @@ class AdminApi extends Controller {
             '/search',
             new FeatureSearchController(config, services).router,
         );
+
+        this.app.use(
+            '/record-ui-error',
+            new UiObservabilityController(config, services).router,
+        );
     }
 }