Better error message and error handling for data plane gateway

.eslintrc.js

@@ -9,7 +9,7 @@ module.exports = {
         project: './tsconfig.json',
         tsconfigRootDir: __dirname,
     },
-    plugins: ['unused-imports', 'import'],
+    plugins: ['formatjs', 'unused-imports', 'import'],
     rules: {
         // Want to make sure imports and exports are always formatted correctly
         'unused-imports/no-unused-imports': 'error',
@@ -39,6 +39,9 @@ module.exports = {
         // Just do not agree with this one
         'no-negated-condition': 'off',
 
+        'formatjs/enforce-placeholders': 'error',
+        // 'formatjs/no-literal-string-in-jsx': 'error',
+
         'react/iframe-missing-sandbox': 'error',
         'react/jsx-no-leaked-render': 'error',
         'no-constant-binary-expression': 'error',

.licensee.json

@@ -31,7 +31,10 @@
         "react-universal-interface": "0.6.2",
 
         "// MIT and CC 3.0 License": "0.0.0",
-        "spdx-ranges": "2.1.1"
+        "spdx-ranges": "2.1.1",
+
+        "// Public Domain": "0.0.0",
+        "jsonify": "0.0.1"
     },
     "ignore": [{ "prefix": "@estuary" }]
 }

package.json

@@ -115,6 +115,7 @@
         "@vitejs/plugin-react": "^4.1.1",
         "@vitest/ui": "^0.34.6",
         "eslint-config-kentcdodds": "^20.3.1",
+        "eslint-plugin-formatjs": "^4.11.3",
         "eslint-plugin-react": "^7.32.2",
         "eslint-plugin-unused-imports": "^2.0.0",
         "husky": "^8.0.3",

src/components/shared/Error/Message.tsx

@@ -1,18 +1,28 @@
 import { Box, Stack, Typography } from '@mui/material';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { logRocketConsole, retryAfterFailure } from 'services/shared';
+import {
+    logRocketConsole,
+    logRocketEvent,
+    retryAfterFailure,
+} from 'services/shared';
+import { CustomEvents } from 'services/types';
 import Instructions from './Instructions';
 import { ErrorDetails } from './types';
 
 interface Props {
     error?: ErrorDetails;
 }
 
+const FALLBACK = 'error.fallBack';
+
 function Message({ error }: Props) {
+    // We fire an event AND log so we can find these but LR
+    //  does not allow unbounded data to be passed into an event
+    //  so the logging allows us to see what error was passed in
+    logRocketEvent(CustomEvents.ERROR_DISPLAYED);
     logRocketConsole('Error message displayed', error);
 
     const intl = useIntl();
-
     const failedAfterRetry = retryAfterFailure(error?.message ?? error);
 
     // Check if we have retried making the call or if we think the message object
@@ -25,10 +35,17 @@ function Message({ error }: Props) {
         (typeof error === 'object' && error.hasOwnProperty('code')) ||
         failedAfterRetry;
 
+    // There is a small chance this can happen so adding custom event to track it
+    // Happened before when journal data hook wasn't catching errors
+    const id = error.message ?? FALLBACK;
+    if (id === FALLBACK) {
+        logRocketEvent(CustomEvents.ERROR_MISSING_MESSAGE);
+    }
+
     // We do not need to translate messages from Supabase as they comeback readable
     const message = displayErrorOnly
         ? error.message
-        : intl.formatMessage({ id: error.message });
+        : intl.formatMessage({ id });
 
     if (!displayErrorOnly) {
         return (

src/hooks/journals/useJournalData.ts

@@ -10,13 +10,10 @@ import useGatewayAuthToken from 'hooks/useGatewayAuthToken';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useCounter } from 'react-use';
 import useSWR from 'swr';
-
-enum ErrorFlags {
-    // TOKEN_PARSING_ISSUE = 'parsing jwt:', // useful for testing just add it to the onError
-    TOKEN_NOT_FOUND = 'Unauthenticated',
-    TOKEN_INVALID = 'Authentication failed',
-    OPERATION_INVALID = 'Unauthorized',
-}
+import {
+    dataPlaneFetcher_list,
+    shouldRefreshToken,
+} from 'utils/dataPlane-utils';
 
 const errorRetryCount = 2;
 
@@ -41,18 +38,28 @@ const useJournalsForCollection = (collectionName: string | undefined) => {
     }, [gatewayConfig]);
 
     const fetcher = useCallback(
-        (_url: string) => {
+        async (_url: string) => {
             if (journalClient && collectionName) {
                 const journalSelector = new JournalSelector().collection(
                     collectionName
                 );
-                return journalClient.list(journalSelector).then((result) => {
-                    const journals = result.unwrap();
 
-                    return {
-                        journals: journals.length > 0 ? journals : [],
-                    };
-                });
+                const dataPlaneListResponse = await dataPlaneFetcher_list(
+                    journalClient,
+                    journalSelector,
+                    'JournalData'
+                );
+
+                if (!Array.isArray(dataPlaneListResponse)) {
+                    return Promise.reject(dataPlaneListResponse);
+                }
+
+                return {
+                    journals:
+                        dataPlaneListResponse.length > 0
+                            ? dataPlaneListResponse
+                            : [],
+                };
             } else {
                 return null;
             }
@@ -76,12 +83,7 @@ const useJournalsForCollection = (collectionName: string | undefined) => {
             onError: async (error) => {
                 incAttempts();
 
-                const errorAsString = `${error}`;
-                if (
-                    session &&
-                    (errorAsString.includes(ErrorFlags.TOKEN_INVALID) ||
-                        errorAsString.includes(ErrorFlags.TOKEN_NOT_FOUND))
-                ) {
+                if (session && shouldRefreshToken(`${error}`)) {
                     await refreshAuthToken();
                     resetAttempts();
                 }

src/hooks/shards/useShardsList.ts

@@ -4,13 +4,10 @@ import useGatewayAuthToken from 'hooks/useGatewayAuthToken';
 import { useMemo } from 'react';
 import { logRocketConsole } from 'services/shared';
 import useSWR from 'swr';
-
-enum ErrorFlags {
-    OPERATION_INVALID = 'Unauthorized',
-    TOKEN_EXPIRED = 'token is expired',
-    TOKEN_INVALID = 'Authentication failed',
-    TOKEN_NOT_FOUND = 'Unauthenticated',
-}
+import {
+    dataPlaneFetcher_list,
+    shouldRefreshToken,
+} from 'utils/dataPlane-utils';
 
 // These status do not change often so checking every 30 seconds is probably enough
 const INTERVAL = 30000;
@@ -41,27 +38,20 @@ const useShardsList = (catalogNames: string[]) => {
             return { shards: [] };
         }
 
-        const result = await shardClient.list(taskSelector);
+        const dataPlaneListResponse = await dataPlaneFetcher_list(
+            shardClient,
+            taskSelector,
+            'ShardsList'
+        );
 
-        // Check for an error
-        if (result.err()) {
-            // Unwrap the error, log the error, and reject the response
-            const error = result.unwrap_err();
-            logRocketConsole('ShardsList : error : ', error);
-            return Promise.reject(error.body);
+        if (!Array.isArray(dataPlaneListResponse)) {
+            return Promise.reject(dataPlaneListResponse);
         }
 
-        try {
-            // No error so should be fine to unwrap
-            const shards = result.unwrap();
-            return {
-                shards: shards.length > 0 ? shards : [],
-            };
-        } catch (error: unknown) {
-            // This is just here to be safe. We'll keep an eye on it and possibly remove
-            logRocketConsole('ShardsList : unwrapError : ', error);
-            return Promise.reject(error);
-        }
+        return {
+            shards:
+                dataPlaneListResponse.length > 0 ? dataPlaneListResponse : [],
+        };
     };
 
     const swrKey = useMemo(
@@ -82,16 +72,11 @@ const useShardsList = (catalogNames: string[]) => {
         onError: async (error: string | Error) => {
             logRocketConsole('useShardsList on error', { error });
 
-            // Try fetching the error message
-            const errorMessage =
-                typeof error === 'object' ? error.message : error;
-
             // Check if we need to refresh the access token before returning the error
             if (
-                errorMessage &&
-                (errorMessage.includes(ErrorFlags.TOKEN_INVALID) ||
-                    errorMessage.includes(ErrorFlags.TOKEN_NOT_FOUND) ||
-                    errorMessage.includes(ErrorFlags.TOKEN_EXPIRED))
+                shouldRefreshToken(
+                    typeof error === 'object' ? error.message : error
+                )
             ) {
                 await refreshAccess();
             }

src/lang/en-US.ts

@@ -183,6 +183,8 @@ const Error: ResolvedIntlConfig['messages'] = {
     'error.hintLabel': `Hint:`,
     'error.descriptionLabel': `Description:`,
     'error.tryAgain': `Try again and if the issue persists please contact support.`,
+
+    'error.fallBack': `no error details to display`,
 };
 
 const ErrorBoundry: ResolvedIntlConfig['messages'] = {

src/services/types.ts

@@ -13,6 +13,8 @@ export enum CustomEvents {
     DIRECTIVE_EXCHANGE_TOKEN = 'Directive:ExchangeToken',
     ERROR_BOUNDARY_DISPLAYED = 'Error_Boundary_Displayed',
     ERROR_BOUNDARY_PAYMENT_METHODS = 'Error_Boundary_Displayed:PaymentMethods',
+    ERROR_DISPLAYED = 'Error_Displayed',
+    ERROR_MISSING_MESSAGE = 'Error_Missing_Message',
     FIELD_SELECTION_REFRESH_AUTO = 'Field_Selection_Refresh:Auto',
     FIELD_SELECTION_REFRESH_MANUAL = 'Field_Selection_Refresh:Manual',
     FULL_PAGE_ERROR_DISPLAYED = 'Full_Page_Error_Displayed',

src/utils/dataPlane-utils.ts

@@ -0,0 +1,67 @@
+import {
+    broker,
+    JournalClient,
+    JournalSelector,
+    ShardClient,
+    ShardSelector,
+} from 'data-plane-gateway';
+import { Shard } from 'data-plane-gateway/types/shard_client';
+import { ResponseError } from 'data-plane-gateway/types/util';
+import { logRocketConsole } from 'services/shared';
+
+export enum ErrorFlags {
+    // DEBUGGING = 'parsing jwt:', // useful for testing just add it to the onError
+    OPERATION_INVALID = 'Unauthorized',
+    TOKEN_EXPIRED = 'token is expired',
+    TOKEN_INVALID = 'Authentication failed',
+    TOKEN_NOT_FOUND = 'Unauthenticated',
+}
+
+export const shouldRefreshToken = (errorMessage?: string | null) => {
+    return (
+        errorMessage &&
+        (errorMessage.includes(ErrorFlags.TOKEN_INVALID) ||
+            errorMessage.includes(ErrorFlags.TOKEN_NOT_FOUND) ||
+            errorMessage.includes(ErrorFlags.TOKEN_EXPIRED))
+    );
+};
+
+type AllowedKeys = 'ShardsList' | 'JournalData';
+export function dataPlaneFetcher_list(
+    client: ShardClient,
+    selector: ShardSelector,
+    key: 'ShardsList'
+): Promise<Shard[] | ResponseError['body']>;
+export function dataPlaneFetcher_list(
+    client: JournalClient,
+    selector: JournalSelector,
+    key: 'JournalData'
+): Promise<broker.ProtocolJournalSpec[] | ResponseError['body']>;
+export async function dataPlaneFetcher_list(
+    client: ShardClient | JournalClient,
+    selector: ShardSelector | JournalSelector,
+    key: AllowedKeys
+): Promise<Shard[] | broker.ProtocolJournalSpec[] | ResponseError['body']> {
+    // This can throw an error! Used within fetchers within SWR that is fine and SWR will handle it
+    // TODO (typing)
+    // I hate this but I need to get the bug finished
+    const result = await client.list(selector as any);
+
+    // Check for an error
+    if (result.err()) {
+        // Unwrap the error, log the error, and reject the response
+        const error = result.unwrap_err();
+        logRocketConsole(`${key} : error : `, error);
+        return Promise.reject(error.body);
+    }
+
+    try {
+        // No error so should be fine to unwrap
+        const unwrappedResponse = result.unwrap();
+        return await Promise.resolve(unwrappedResponse);
+    } catch (error: unknown) {
+        // This is just here to be safe. We'll keep an eye on it and possibly remove
+        logRocketConsole(`${key} : unwrapError : `, error);
+        return Promise.reject(error);
+    }
+}