#777 - Show error when front matter parsing failed

CHANGELOG.md

@@ -9,6 +9,7 @@
 ### 🎨 Enhancements
 
 - [#773](https://github.com/estruyf/vscode-front-matter/issues/773): Added the ability to rename content files
+- [#777](https://github.com/estruyf/vscode-front-matter/issues/777): Show an error in the metadata panel if something went wrong while parsing the front matter
 
 ### ⚡️ Optimizations
 

l10n/bundle.l10n.json

@@ -466,6 +466,7 @@
   "panel.globalSettings.action.server.placeholder": "Example: {0}",
 
   "panel.metadata.title": "Metadata",
+  "panel.metadata.focusProblems": "Check the problems view for more information",
 
   "panel.otherActions.title": "Other actions",
   "panel.otherActions.writingSettings.enabled": "Writing settings enabled",
@@ -768,6 +769,7 @@
   "listeners.panel.dataListener.aiSuggestTaxonomy.noEditor.error": "No active editor",
   "listeners.panel.dataListener.aiSuggestTaxonomy.noData.error": "No article data",
   "listeners.panel.dataListener.getDataFileEntries.noDataFiles.error": "Couldn't find data file entries",
+  "listeners.panel.dataListener.pushMetadata.frontMatter.error": "Something went wrong while parsing your front matter. Please check the contents of your file.",
 
 
   "listeners.panel.taxonomyListener.aiSuggestTaxonomy.noEditor.error": "No active editor",

src/listeners/panel/DataListener.ts

@@ -28,7 +28,7 @@ import {
   SETTING_TAXONOMY_CONTENT_TYPES
 } from '../../constants';
 import { Article, Preview } from '../../commands';
-import { ParsedFrontMatter } from '../../parsers';
+import { FrontMatterParser, ParsedFrontMatter } from '../../parsers';
 import { Field, Mode, PostMessageData, ContentType as IContentType } from '../../models';
 import { encodeEmoji, fieldWhenClause } from '../../utils';
 import { PanelProvider } from '../../panelWebView/PanelProvider';
@@ -198,6 +198,26 @@ export class DataListener extends BaseListener {
     try {
       if (filePath) {
         articleDetails = await ArticleHelper.getDetails(filePath);
+
+        if (!articleDetails) {
+          try {
+            const contents = await ArticleHelper.getContents(filePath);
+            if (contents) {
+              FrontMatterParser.fromFile(contents);
+            }
+          } catch (e) {
+            this.sendMsg(Command.metadata, {
+              fmError: l10n.t(
+                LocalizationKey.listenersPanelDataListenerPushMetadataFrontMatterError
+              ),
+              fmErrorMessage: (e as Error).message
+            });
+            return;
+          }
+        }
+      } else {
+        this.sendMsg(Command.metadata, undefined);
+        return;
       }
     } catch (e) {
       Logger.error(`DataListener::pushMetadata: ${(e as Error).message}`);

src/localization/localization.enum.ts

@@ -1504,6 +1504,10 @@ export enum LocalizationKey {
    * Metadata
    */
   panelMetadataTitle = 'panel.metadata.title',
+  /**
+   * Check the output for more information
+   */
+  panelMetadataFocusProblems = 'panel.metadata.focusProblems',
   /**
    * Other actions
    */
@@ -2536,6 +2540,10 @@ export enum LocalizationKey {
    * Couldn't find data file entries
    */
   listenersPanelDataListenerGetDataFileEntriesNoDataFilesError = 'listeners.panel.dataListener.getDataFileEntries.noDataFiles.error',
+  /**
+   * Something went wrong while parsing your front matter. Please check the contents of your file.
+   */
+  listenersPanelDataListenerPushMetadataFrontMatterError = 'listeners.panel.dataListener.pushMetadata.frontMatter.error',
   /**
    * No active editor
    */

src/panelWebView/ViewPanel.tsx

@@ -86,7 +86,7 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (
     return <Spinner />;
   }
 
-  if (!metadata || Object.keys(metadata || {}).length === 0) {
+  if (!metadata) {
     return <BaseView mode={mode} settings={settings} folderAndFiles={folderAndFiles} />;
   }
 

src/panelWebView/components/Metadata.tsx

@@ -8,7 +8,7 @@ import useContentType from '../../hooks/useContentType';
 import { WrapperField } from './Fields/WrapperField';
 import { ContentTypeValidator } from './ContentType/ContentTypeValidator';
 import { FeatureFlag } from '../../components/features/FeatureFlag';
-import { FEATURE_FLAG } from '../../constants';
+import { FEATURE_FLAG, GeneralCommands } from '../../constants';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../localization';
@@ -33,6 +33,12 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({
 }: React.PropsWithChildren<IMetadataProps>) => {
   const contentType = useContentType(settings, metadata);
 
+  const focusProblems = () => {
+    Messenger.send(GeneralCommands.toVSCode.runCommand, {
+      command: `workbench.panel.markers.view.focus`
+    });
+  }
+
   const onSendUpdate = React.useCallback((field: string | undefined, value: any, parents: string[]) => {
     if (!field) {
       return;
@@ -93,7 +99,20 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({
         <ContentTypeValidator fields={contentType?.fields || []} metadata={metadata} />
       </FeatureFlag>
 
-      {allFields}
+      {
+        metadata.fmError && metadata.fmErrorMessage ? (
+          <div className={`space-y-4`}>
+            <p className={`text-[var(--vscode-errorForeground)]`}>{metadata.fmError}</p>
+
+            <button
+              title={l10n.t(LocalizationKey.panelMetadataFocusProblems)}
+              onClick={focusProblems}
+              type={`button`}>
+              {l10n.t(LocalizationKey.panelMetadataFocusProblems)}
+            </button>
+          </div>
+        ) : allFields
+      }
     </Collapsible>
   );
 };