@axinom/mosaic-ui 0.33.0-rc.9 → 0.34.0-rc.0

package/src/utils/ErrorMapper/ApolloClient/ApolloErrorMapper.spec.ts

@@ -0,0 +1,32 @@
+import { ErrorType } from '../../../components';
+import { ApolloErrorMapper } from './ApolloErrorMapper';
+
+describe('ApolloErrorMapper', () => {
+  const mockError: ErrorType = {
+    name: 'ApolloError',
+    networkError: { message: 'Network connection lost' },
+  };
+
+  it('should map an Apollo error with a network error', () => {
+    const mappedError = ApolloErrorMapper(mockError);
+    expect(mappedError).toEqual({
+      title: 'A network error occurred',
+      body: expect.any(Object), // You can modify the expectation here based on your needs
+    });
+  });
+
+  it('should not map an error if already mapped by a previous error mapper', () => {
+    const previousMappedError: ErrorType = {
+      title: 'Previous Error',
+      body: 'Previous error message',
+    };
+    const mappedError = ApolloErrorMapper(mockError, previousMappedError);
+    expect(mappedError).toBeUndefined();
+  });
+
+  it('should return undefined if it does not match the conditions', () => {
+    const error: ErrorType = new Error('Some other error');
+    const mappedError = ApolloErrorMapper(error);
+    expect(mappedError).toBeUndefined();
+  });
+});

package/src/utils/ErrorMapper/ApolloClient/ApolloErrorMapper.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ErrorMapper } from '../ErrorMapper.type';
+
+/**
+ * An error mapper that maps errors from the Apollo Client to more user friendly errors.
+ * @param error The error to map
+ * @param mappedError The error that was mapped by a previous error mapper
+ * @returns The mapped error or undefined if the error could not be mapped
+ */
+export const ApolloErrorMapper: ErrorMapper = (error, mappedError) => {
+  if (!mappedError) {
+    const apolloError = error as {
+      networkError?: { message: string };
+      name?: string;
+    };
+
+    if (apolloError.name === 'ApolloError' && apolloError.networkError) {
+      return {
+        title: 'A network error occurred',
+        body: (
+          <>
+            <p>Please check your internet connection and try again.</p>
+            <>
+              <i>Original Error:</i>
+              <pre>{JSON.stringify(error, undefined, 2)}</pre>
+            </>
+          </>
+        ),
+      };
+    }
+    return undefined;
+  }
+};

package/src/utils/ErrorMapper/ErrorMapper.spec.ts

@@ -0,0 +1,67 @@
+import { ErrorType } from '../../components/models';
+import { mapError, setErrorMappers } from './ErrorMapper';
+import { ErrorMapper } from './ErrorMapper.type';
+
+describe('mapError', () => {
+  const errorMapper1: ErrorMapper = (error) => {
+    if (typeof error === 'string') {
+      return { title: 'String Error', body: error };
+    }
+    return undefined;
+  };
+
+  const errorMapper2: ErrorMapper = (error) => {
+    if (typeof error === 'number') {
+      return { title: 'Number Error', body: error.toString() };
+    }
+    return undefined;
+  };
+
+  const errorMapper3: ErrorMapper = (error) => {
+    if (error instanceof Error) {
+      return { title: 'Custom Error', body: error.message };
+    }
+    return undefined;
+  };
+
+  beforeEach(() => {
+    setErrorMappers([errorMapper1, errorMapper2, errorMapper3]);
+  });
+
+  afterEach(() => {
+    setErrorMappers([]);
+  });
+
+  it('should map a string error', () => {
+    const error: ErrorType = 'Something went wrong';
+    const mappedError = mapError(error);
+    expect(mappedError).toEqual({
+      title: 'String Error',
+      body: 'Something went wrong',
+    });
+  });
+
+  it('should map a number error', () => {
+    const error: ErrorType = 42;
+    const mappedError = mapError(error);
+    expect(mappedError).toEqual({ title: 'Number Error', body: '42' });
+  });
+
+  it('should map a custom error', () => {
+    const error: ErrorType = new Error('Custom error message');
+    const mappedError = mapError(error);
+    expect(mappedError).toEqual({
+      title: 'Custom Error',
+      body: 'Custom error message',
+    });
+  });
+
+  it('should return the original error if no mapper can map it', () => {
+    const error: ErrorType = {
+      title: 'Unknown Error',
+      body: 'Something unexpected happened',
+    };
+    const mappedError = mapError(error);
+    expect(mappedError).toBe(error);
+  });
+});

package/src/utils/ErrorMapper/ErrorMapper.ts

@@ -0,0 +1,31 @@
+import { ApolloErrorMapper } from './ApolloClient/ApolloErrorMapper';
+import { ErrorMapper } from './ErrorMapper.type';
+
+let ErrorMappers: ErrorMapper[] = [ApolloErrorMapper];
+
+/**
+ * Sets the error mappers to use for mapping errors.
+ * By default the `ApolloErrorMapper` is registered.
+ * @param mappers an array of error mappers that should be used
+ */
+export const setErrorMappers = (mappers: ErrorMapper[]): void => {
+  ErrorMappers = mappers;
+};
+
+/**
+ * Uses the currently registered error mappers to map the given error.
+ * To register error mappers use the `setErrorMappers` function.
+ * @param error the error to map
+ * @returns the mapped error or the original error if no mapper was able to map the error
+ */
+export const mapError: ErrorMapper = (error) => {
+  const originalError = error;
+  let mappedError = undefined;
+  for (const mapper of ErrorMappers) {
+    const mappingResult = mapper(originalError, mappedError);
+    if (mappingResult !== undefined && mappingResult !== originalError) {
+      mappedError = mappingResult;
+    }
+  }
+  return mappedError ?? originalError;
+};

package/src/utils/ErrorMapper/ErrorMapper.type.ts

@@ -0,0 +1,11 @@
+import { ErrorType } from '../../components/models';
+
+export interface ErrorMapper {
+  /**
+   * Maps the given error to a new error.
+   * @param error the error to map
+   * @param currentlyMappedError the error that was mapped by a previous error mapper
+   * @returns the mapped error or undefined if the error could not be mapped
+   */
+  (error: ErrorType, currentlyMappedError?: ErrorType): ErrorType | undefined;
+}

package/src/utils/ErrorMapper/index.ts

@@ -0,0 +1,3 @@
+export * from './ApolloClient/ApolloErrorMapper';
+export * from './ErrorMapper';
+export * from './ErrorMapper.type';

package/src/utils/ErrorTypeToStationError.spec.tsx

@@ -55,4 +55,16 @@ describe('ErrorTypeToStationError', () => {
     const result = ErrorTypeToStationError(error, 'custom title');
     expect(result.title).toBe('custom title');
   });
+
+  it('uses the apollo mapper by default', () => {
+    const error = {
+      name: 'ApolloError',
+      networkError: { message: 'test error' },
+    };
+    const result = ErrorTypeToStationError(error);
+    expect(result.title).toBe('A network error occurred');
+    const wrapper = render(<>{result.body}</>);
+
+    expect(wrapper.toString()).toContain('test error');
+  });
 });

package/src/utils/ErrorTypeToStationError.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ErrorType, StationError } from '../components/models';
+import { mapError } from './ErrorMapper/ErrorMapper';
 
 /**
  * Converts an `ErrorType` object into a station error.
@@ -9,10 +10,13 @@ import { ErrorType, StationError } from '../components/models';
  * @returns A station error object
  */
 export const ErrorTypeToStationError = (
-  error?: ErrorType,
+  originalError?: ErrorType,
   defaultTitle = 'An error occurred.',
   defaultBody?: string,
 ): StationError => {
+  const error = mapError(
+    originalError ?? { title: defaultTitle, body: defaultBody },
+  );
   let stationError: StationError;
   if (isStationError(error)) {
     // we already got a station error