From 9f3cfd9d3a0700b1bd658edce8c36efab84cd526 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Sun, 2 Oct 2022 14:25:11 +0200 Subject: [PATCH 1/2] #434 - Webview errors are logged in the extension output --- CHANGELOG.md | 1 + src/commands/Dashboard.ts | 3 +- src/dashboardWebView/DashboardMessage.ts | 1 + src/dashboardWebView/components/App.tsx | 44 ++++++++++++------- .../components/ErrorView/index.tsx | 14 ++++++ src/listeners/dashboard/LogListener.ts | 21 +++++++++ src/listeners/dashboard/index.ts | 1 + 7 files changed, 68 insertions(+), 17 deletions(-) create mode 100644 src/dashboardWebView/components/ErrorView/index.tsx create mode 100644 src/listeners/dashboard/LogListener.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index bd0190d9..ba79bc65 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/commands/Dashboard.ts b/src/commands/Dashboard.ts index b99c44ee..82758a17 100644 --- a/src/commands/Dashboard.ts +++ b/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); }); } diff --git a/src/dashboardWebView/DashboardMessage.ts b/src/dashboardWebView/DashboardMessage.ts index a261c287..a09ae77d 100644 --- a/src/dashboardWebView/DashboardMessage.ts +++ b/src/dashboardWebView/DashboardMessage.ts @@ -57,4 +57,5 @@ export enum DashboardMessage { setState = 'setState', runCustomScript = 'runCustomScript', sendTelemetry = 'sendTelemetry', + logError = 'logError', } \ No newline at end of file diff --git a/src/dashboardWebView/components/App.tsx b/src/dashboardWebView/components/App.tsx index 36085faf..9c56f034 100644 --- a/src/dashboardWebView/components/App.tsx +++ b/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 = ({showWelcome}: React.Pro } return ( -
- - } /> - } /> - } /> - } /> - - { - allowDataView && } /> - } + )} + onError={(error: Error, componentStack: string, eventId: string) => { + Messenger.send(DashboardMessage.logError, `Event ID: ${eventId} +Message: ${error.message} - { - allowTaxonomyView && } /> - } +Stack: ${componentStack}`); + }}> +
+ + } /> + } /> + } /> + } /> + + { + allowDataView && } /> + } - } /> - -
+ { + allowTaxonomyView && } /> + } + + } /> + +
+ ); }; \ No newline at end of file diff --git a/src/dashboardWebView/components/ErrorView/index.tsx b/src/dashboardWebView/components/ErrorView/index.tsx new file mode 100644 index 00000000..17efb741 --- /dev/null +++ b/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 = (props: React.PropsWithChildren) => { + return ( +
+ +

Sorry, something went wrong.

+

Please close the dashboard and try again.

+
+ ); +}; \ No newline at end of file diff --git a/src/listeners/dashboard/LogListener.ts b/src/listeners/dashboard/LogListener.ts new file mode 100644 index 00000000..2c43f12c --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/src/listeners/dashboard/index.ts b/src/listeners/dashboard/index.ts index a26e99d8..8ede40ed 100644 --- a/src/listeners/dashboard/index.ts +++ b/src/listeners/dashboard/index.ts @@ -8,3 +8,4 @@ export * from './SettingsListener'; export * from './SnippetListener'; export * from './TelemetryListener'; export * from './TaxonomyListener'; +export * from './LogListener'; From 5c9d7eda1763fa11e9ed9e812fd6e1cd0ee7d8a1 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Sun, 2 Oct 2022 20:01:59 +0200 Subject: [PATCH 2/2] #433 - fix title and description rendering if not string --- CHANGELOG.md | 2 ++ .../components/Contents/Item.tsx | 28 +++++++++++++++---- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ba79bc65..2951ed9c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,8 @@ ### 🐞 Fixes +- [#433](https://github.com/estruyf/vscode-front-matter/issues/433): Fix issue with rendering an incorrect title value on the content dashboard + ## [8.1.1] - 2022-09-23 ### 🐞 Fixes diff --git a/src/dashboardWebView/components/Contents/Item.tsx b/src/dashboardWebView/components/Contents/Item.tsx index bfd4becc..3f140774 100644 --- a/src/dashboardWebView/components/Contents/Item.tsx +++ b/src/dashboardWebView/components/Contents/Item.tsx @@ -19,6 +19,22 @@ export const Item: React.FunctionComponent = ({ fmFilePath, date, ti const view = useRecoilValue(ViewSelector); const settings = useRecoilValue(SettingsSelector); const draftField = useMemo(() => settings?.draftField, [settings]); + + const escapedTitle = useMemo(() => { + if (title && typeof title !== 'string') { + return ''; + } + + return title; + }, [title]); + + const escapedDescription = useMemo(() => { + if (description && typeof description !== 'string') { + return ''; + } + + return description; + }, [description]); const openFile = () => { Messenger.send(DashboardMessage.openFile, fmFilePath); @@ -57,7 +73,7 @@ export const Item: React.FunctionComponent = ({ fmFilePath, date, ti + - + { tags && tags.length > 0 && ( @@ -110,13 +126,13 @@ export const Item: React.FunctionComponent = ({ fmFilePath, date, ti