#434 - Webview errors are logged in the extension output

CHANGELOG.md

@@ -10,6 +10,7 @@
 
 - [#406](https://github.com/estruyf/vscode-front-matter/issues/406): Added support for single data entries in the data dashboard
 - [#428](https://github.com/estruyf/vscode-front-matter/issues/428): Improved UX for inserting images to your content
+- [#434](https://github.com/estruyf/vscode-front-matter/issues/434): Webview errors are logged in the extension output
 
 ### ⚡️ Optimizations
 

src/commands/Dashboard.ts

@@ -7,7 +7,7 @@ import { Extension } from '../helpers/Extension';
 import { WebviewHelper } from '@estruyf/vscode';
 import { DashboardData } from '../models/DashboardData';
 import { MediaLibrary } from '../helpers/MediaLibrary';
-import { DashboardListener, MediaListener, SettingsListener, TelemetryListener, DataListener, PagesListener, ExtensionListener, SnippetListener, TaxonomyListener } from '../listeners/dashboard';
+import { DashboardListener, MediaListener, SettingsListener, TelemetryListener, DataListener, PagesListener, ExtensionListener, SnippetListener, TaxonomyListener, LogListener } from '../listeners/dashboard';
 import { MediaListener as PanelMediaListener } from '../listeners/panel'
 import { GitListener, ModeListener } from '../listeners/general';
 
@@ -148,6 +148,7 @@ export class Dashboard {
       ModeListener.process(msg);
       GitListener.process(msg);
       TaxonomyListener.process(msg);
+      LogListener.process(msg);
     });
   }
 

src/dashboardWebView/DashboardMessage.ts

@@ -57,4 +57,5 @@ export enum DashboardMessage {
   setState = 'setState',
   runCustomScript = 'runCustomScript',
   sendTelemetry = 'sendTelemetry',
+  logError = 'logError',
 }

src/dashboardWebView/components/App.tsx

@@ -16,6 +16,9 @@ import { Route, Routes, useNavigate } from 'react-router-dom';
 import { routePaths } from '..';
 import { useEffect, useMemo } from 'react';
 import { UnknownView } from './UnknownView';
+import { ErrorBoundary } from '@sentry/react';
+import { ErrorView } from './ErrorView';
+import { DashboardMessage } from '../DashboardMessage';
 
 export interface IAppProps {
   showWelcome: boolean;
@@ -68,23 +71,32 @@ export const App: React.FunctionComponent<IAppProps> = ({showWelcome}: React.Pro
   }
 
   return (
-    <main className={`h-full w-full`}>
-      <Routes>
-        <Route path={routePaths.welcome} element={<WelcomeScreen settings={settings} />} />
-        <Route path={routePaths.contents} element={<Contents pages={pages} loading={loading} />} />
-        <Route path={routePaths.media} element={<Media />} />
-        <Route path={routePaths.snippets} element={<Snippets />} />
-        
-        {
-          allowDataView && <Route path={routePaths.data} element={<DataView />} />
-        }
+    <ErrorBoundary
+      fallback={(<ErrorView />)}
+      onError={(error: Error, componentStack: string, eventId: string) => {
+        Messenger.send(DashboardMessage.logError, `Event ID: ${eventId}
+Message: ${error.message}
 
-        {
-          allowTaxonomyView && <Route path={routePaths.taxonomy} element={<TaxonomyView pages={pages} />} />
-        }
+Stack: ${componentStack}`);
+      }}>
+      <main className={`h-full w-full`}>
+        <Routes>
+          <Route path={routePaths.welcome} element={<WelcomeScreen settings={settings} />} />
+          <Route path={routePaths.contents} element={<Contents pages={pages} loading={loading} />} />
+          <Route path={routePaths.media} element={<Media />} />
+          <Route path={routePaths.snippets} element={<Snippets />} />
+          
+          {
+            allowDataView && <Route path={routePaths.data} element={<DataView />} />
+          }
 
-        <Route path={`*`} element={<UnknownView />} />
-      </Routes>
-    </main>
+          {
+            allowTaxonomyView && <Route path={routePaths.taxonomy} element={<TaxonomyView pages={pages} />} />
+          }
+
+          <Route path={`*`} element={<UnknownView />} />
+        </Routes>
+      </main>
+    </ErrorBoundary>
   );
 };

src/dashboardWebView/components/ErrorView/index.tsx

@@ -0,0 +1,14 @@
+import { ExclamationIcon } from '@heroicons/react/solid';
+import * as React from 'react';
+
+export interface IErrorViewProps {}
+
+export const ErrorView: React.FunctionComponent<IErrorViewProps> = (props: React.PropsWithChildren<IErrorViewProps>) => {
+  return (
+    <main className={`h-full w-full flex flex-col justify-center items-center space-y-2`}>
+      <ExclamationIcon className="w-24 h-24 text-red-500" />
+      <p className='text-xl'>Sorry, something went wrong.</p>
+      <p className='text-base'>Please close the dashboard and try again.</p>
+    </main>
+  );
+};

src/listeners/dashboard/LogListener.ts

@@ -0,0 +1,21 @@
+import { DashboardMessage } from "../../dashboardWebView/DashboardMessage";
+import { Logger } from "../../helpers";
+import { BaseListener } from "./BaseListener";
+
+
+export class LogListener extends BaseListener {
+
+  /**
+   * Process the messages for the dashboard views
+   * @param msg 
+   */
+  public static process(msg: { command: DashboardMessage, data: any }) {
+    super.process(msg);
+
+    switch(msg.command) {
+      case DashboardMessage.logError:
+        Logger.error(msg.data);
+        break;
+    }
+  }
+}

src/listeners/dashboard/index.ts

@@ -8,3 +8,4 @@ export * from './SettingsListener';
 export * from './SnippetListener';
 export * from './TelemetryListener';
 export * from './TaxonomyListener';
+export * from './LogListener';