feat: render custom error

src/ReactUnipika/ReactUnipika.tsx

@@ -12,7 +12,7 @@
 
 export interface ReactUnipikaProps {
     settings?: UnipikaSettings;
     value: any;
     inline?: boolean;
     children?: React.ReactNode;
     extraTools?: React.ReactNode;
@@ -25,6 +25,7 @@
     showContainerSize?: boolean;
     initiallyCollapsed?: boolean;
     caseInsensitiveSearch?: boolean;
+    renderError?: (error: unknown) => React.ReactNode;
 }
 
 const defaultUnipikaSettings = {
@@ -51,26 +52,31 @@
     showContainerSize,
     initiallyCollapsed,
     caseInsensitiveSearch,
+    renderError,
 }: ReactUnipikaProps) {
-    const convertedValue = React.useMemo(() => {
-        // TODO: fix me later
-        // The call is required because unipika.format() applies default values to a passed settings inplace.
-        // We have to leave this call without it the behaviour will be broken.
-        if (settings.format === 'raw-json') {
-            unipika.formatRaw(value, settings);
-        } else {
-            unipika.formatFromYSON(value, settings);
-        }
+    const {convertedValue, error} = React.useMemo(() => {
+        try {
+            // TODO: fix me later
+            // The call is required because unipika.format() applies default values to a passed settings inplace.
+            // We have to leave this call without it the behaviour will be broken.
+            if (settings.format === 'raw-json') {
+                unipika.formatRaw(value, settings);
+            } else {
+                unipika.formatFromYSON(value, settings);
+            }
 
-        if (value === undefined) {
-            return '';
-        }
+            if (value === undefined) {
+                return '';
+            }
 
-        if (settings.format === 'raw-json') {
-            return unipika.converters.raw(value, settings);
-        }
+            if (settings.format === 'raw-json') {
+                return unipika.converters.raw(value, settings);
+            }
 
-        return unipika.converters.yson(value, settings);
+            return {convertedValue: unipika.converters.yson(value, settings)};
+        } catch (error) {
+            return {error};
+        }
     }, [value, settings]);
 
     const classes = block(
@@ -80,6 +86,10 @@
         className,
     );
 
+    if (error) {
+        return renderError?.(error);
+    }
+
     function getFormattedTitle() {
         if (!inline) {
             return undefined;

src/ReactUnipika/__stories__/ReactUnipika.stories.tsx

@@ -67,3 +67,15 @@ export const WithContainerSizeYson: StoryObj<ReactUnipikaProps> = {
         showContainerSize: true,
     },
 };
+
+export const WithError: StoryObj<ReactUnipikaProps> = {
+    args: {
+        value: {val: Infinity},
+        renderError: (error: unknown) => {
+            if (error instanceof Error) {
+                return <div>{error.message}</div>;
+            }
+            return 'Unknown error while parsing data';
+        },
+    },
+};

src/ReactUnipika/__tests__/ReactUnipika.visual.test.tsx

@@ -171,3 +171,9 @@ test('ReactUnipika: search in collapsed - navigate forward', async ({
 
     await expectScreenshot({component: page});
 });
+
+test('ReactUnipika: with error', async ({mount, expectScreenshot, page}) => {
+    await mount(<Stories.WithError />, {width: 1280});
+
+    await expectScreenshot({component: page});
+});