feat: format zod parsing errors

packages/client-api/src/init-element.ts

@@ -5,14 +5,13 @@ import {
   runWithOwner,
 } from 'solid-js';
 import { createStore } from 'solid-js/store';
-import { message } from '@tauri-apps/plugin-dialog';
+import { message as messageDialog } from '@tauri-apps/plugin-dialog';
 
 import {
   getStyleBuilder,
   getParsedElementConfig,
   getChildConfigs,
   type GlobalConfig,
-  TemplatePropertyError,
 } from './user-config';
 import { getElementProviders } from './providers';
 import type { ElementContext } from './element-context.model';
@@ -107,17 +106,13 @@ export async function initElement(
 
     return elementContext as ElementContext;
   } catch (err) {
-    logger.error(
-      'Error initializing window:',
-      //@ts-ignore
-      Object.keys(err),
-      err instanceof TemplatePropertyError,
-      err,
-    );
-    message((err as Error).message, {
-      title: 'Encountered an error!',
+    logger.error('Failed to initialize element:', err);
+
+    messageDialog((err as Error)?.message ?? 'Unknown reason.', {
+      title: 'Failed to initialize element!',
       type: 'error',
     });
+
     throw err;
   }
 }

packages/client-api/src/init-window.ts

@@ -7,6 +7,7 @@ import {
   type UserConfig,
   getUserConfig,
   getStyleBuilder,
+  parseWithSchema,
 } from './user-config';
 import {
   getOpenWindowArgs,
@@ -57,7 +58,8 @@ export async function initWindowAsync(): Promise<WindowContext> {
       );
     }
 
-    const globalConfig = GlobalConfigSchema.strip().parse(
+    const globalConfig = parseWithSchema(
+      GlobalConfigSchema.strip(),
       (config as UserConfig)?.global ?? {},
     );
 
@@ -110,12 +112,13 @@ export async function initWindowAsync(): Promise<WindowContext> {
   } catch (err) {
     logger.error('Failed to initialize window:', err);
 
-    let message = (err as Error)?.message
-      ? `Failed to initialize window.\n\n${(err as Error).message}`
-      : `Failed to initialize window.`;
+    messageDialog((err as Error)?.message ?? 'Unknown reason.', {
+      title: 'Failed to initialize window!',
+      type: 'error',
+    });
 
-    // Show error dialog and exit.
-    messageDialog(message, { title: 'Fatal error :(', type: 'error' });
+    // Error during window initialization is unrecoverable, so we close
+    // the window.
     await getCurrentWindow().close();
 
     throw err;

packages/client-api/src/providers/get-element-providers.ts

@@ -7,7 +7,7 @@ import {
 } from 'solid-js';
 import { createStore } from 'solid-js/store';
 
-import { ProvidersConfigSchema } from '~/user-config';
+import { ProvidersConfigSchema, parseWithSchema } from '~/user-config';
 import type { ElementContext } from '~/element-context.model';
 import { createProvider } from './create-provider';
 import type { PickPartial } from '~/utils';
@@ -35,7 +35,8 @@ export async function getElementProviders(
    * Get map of element providers.
    */
   async function getElementProviders() {
-    const providerConfigs = ProvidersConfigSchema.parse(
+    const providerConfigs = parseWithSchema(
+      ProvidersConfigSchema,
       (elementContext.rawConfig as Record<string, unknown>)?.providers ??
         [],
     );

packages/client-api/src/user-config/get-parsed-element-config.ts

@@ -9,6 +9,7 @@ import {
   TemplateConfigSchema,
   WindowConfigSchemaP1,
   TemplatePropertyError,
+  parseWithSchema,
 } from '~/user-config';
 import type { PickPartial } from '~/utils';
 
@@ -66,7 +67,7 @@ export function getParsedElementConfig(
     // TODO: Add logging for updated config here.
     const newConfig = Object.fromEntries(newConfigEntries);
 
-    return schema.parse(newConfig);
+    return parseWithSchema(schema, newConfig);
   }
 
   return parsedConfig;

packages/client-api/src/user-config/get-user-config.ts

@@ -29,11 +29,6 @@ export async function getUserConfig() {
 
     return configObj;
   } catch (err) {
-    console.log('err', err.constructor.name);
-    if (err instanceof YAMLParseError) {
-      err.
-    }
-
     throw new Error(
       `Problem reading config file: ${(err as Error).message}`,
     );

packages/client-api/src/user-config/index.ts

@@ -2,6 +2,7 @@ export * from './get-parsed-element-config';
 export * from './get-style-builder';
 export * from './get-user-config';
 export * from './global-config.model';
+export * from './parse-with-schema';
 export * from './shared';
 export * from './user-config.model';
 export * from './window';

packages/client-api/src/user-config/parse-with-schema.ts

@@ -0,0 +1,26 @@
+import { ZodError, type z } from 'zod';
+
+/**
+ * Parse a value with error formatting.
+ */
+export function parseWithSchema<T extends z.ZodType>(
+  schema: T,
+  value: unknown,
+): z.infer<T> {
+  try {
+    return schema.parse(value);
+  } catch (err) {
+    if (err instanceof ZodError && err.errors.length) {
+      const [firstError] = err.errors;
+      const { message, path } = firstError!;
+      const fullPath = path.join('.');
+
+      throw new Error(
+        `Property '${fullPath}' in config isn't valid.\n` +
+          `⚠️ ${message}`,
+      );
+    }
+
+    throw new Error('Failed to parse config.');
+  }
+}