#796 - Webview logging

src/dashboardWebView/components/App.tsx

@@ -10,7 +10,7 @@ import { Media } from './Media/Media';
 import { DataView } from './DataView';
 import { Snippets } from './SnippetsView/Snippets';
 import { FEATURE_FLAG, GeneralCommands } from '../../constants';
-import { Messenger } from '@estruyf/vscode/dist/client';
+import { Messenger, messageHandler } from '@estruyf/vscode/dist/client';
 import { TaxonomyView } from './TaxonomyView';
 import { Route, Routes, useNavigate } from 'react-router-dom';
 import { routePaths } from '..';
@@ -70,6 +70,8 @@ export const App: React.FunctionComponent<IAppProps> = ({
   }
 
   useEffect(() => {
+    messageHandler.send(GeneralCommands.toVSCode.logging.info, `DASHBOARD: loaded with view ${view}`);
+
     if (view && routePaths[view]) {
       navigate(routePaths[view]);
       return;
@@ -78,6 +80,16 @@ export const App: React.FunctionComponent<IAppProps> = ({
     navigate(routePaths[view]);
   }, [view]);
 
+  useEffect(() => {
+    if (settings && Object.keys(settings).length > 0) {
+      messageHandler.send(GeneralCommands.toVSCode.logging.info, `DASHBOARD: settings loaded`);
+    }
+
+    if (pages) {
+      messageHandler.send(GeneralCommands.toVSCode.logging.info, `DASHBOARD: pages loaded - ${pages.length} pages`);
+    }
+  }, [JSON.stringify(settings), JSON.stringify(pages)]);
+
   useEffect(() => {
     checkDevMode();
   }, []);

src/dashboardWebView/components/Contents/Contents.tsx

@@ -8,9 +8,9 @@ import { Spinner } from '../Common/Spinner';
 import { SponsorMsg } from '../Layout/SponsorMsg';
 import usePages from '../../hooks/usePages';
 import { useCallback, useEffect, useState } from 'react';
-import { Messenger } from '@estruyf/vscode/dist/client';
+import { Messenger, messageHandler } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
-import { TelemetryEvent } from '../../../constants';
+import { GeneralCommands, TelemetryEvent } from '../../../constants';
 import { PageLayout } from '../Layout/PageLayout';
 import { FilesProvider } from '../../providers/FilesProvider';
 import { Alert } from '../Modals/Alert';
@@ -59,6 +59,10 @@ export const Contents: React.FunctionComponent<IContentsProps> = ({
     }
   }, [pageItems, selectedItemAction]);
 
+  useEffect(() => {
+    messageHandler.send(GeneralCommands.toVSCode.logging.info, `DASHBOARD: Contents view loaded with ${pageItems.length} pages`);
+  }, [JSON.stringify(pageItems)]);
+
   useEffect(() => {
     Messenger.send(DashboardMessage.sendTelemetry, {
       event: TelemetryEvent.webviewContentsView

src/dashboardWebView/components/DataView/DataView.tsx

@@ -17,7 +17,7 @@ import { Container } from './SortableContainer';
 import { SortableItem } from './SortableItem';
 import { ChevronRightIcon, CircleStackIcon } from '@heroicons/react/24/outline';
 import { DataType } from '../../../models/DataType';
-import { TelemetryEvent, WEBSITE_LINKS } from '../../../constants';
+import { GeneralCommands, TelemetryEvent, WEBSITE_LINKS } from '../../../constants';
 import { NavigationItem } from '../Layout';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
@@ -129,6 +129,8 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
       event: TelemetryEvent.webviewDataView
     });
 
+    Messenger.send(GeneralCommands.toVSCode.logging.info, "DASHBOARD: Data view loaded");
+
     return () => {
       Messenger.unlisten(messageListener);
     };

src/dashboardWebView/components/Media/Media.tsx

@@ -20,7 +20,7 @@ import { DashboardMessage } from '../../DashboardMessage';
 import { FrontMatterIcon } from '../../../panelWebView/components/Icons/FrontMatterIcon';
 import { FolderItem } from './FolderItem';
 import useMedia from '../../hooks/useMedia';
-import { STATIC_FOLDER_PLACEHOLDER, TelemetryEvent } from '../../../constants';
+import { GeneralCommands, STATIC_FOLDER_PLACEHOLDER, TelemetryEvent } from '../../../constants';
 import { PageLayout } from '../Layout/PageLayout';
 import { parseWinPath } from '../../../helpers/parseWinPath';
 import { basename, extname, join } from 'path';
@@ -153,6 +153,8 @@ export const Media: React.FunctionComponent<IMediaProps> = (
     Messenger.send(DashboardMessage.sendTelemetry, {
       event: TelemetryEvent.webviewMediaView
     });
+
+    Messenger.send(GeneralCommands.toVSCode.logging.info, "DASHBOARD: Media view loaded");
   }, []);
 
   const { getRootProps, isDragActive } = useDropzone({

src/dashboardWebView/components/SnippetsView/Snippets.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { FeatureFlag } from '../../../components/features/FeatureFlag';
-import { FEATURE_FLAG, WEBSITE_LINKS } from '../../../constants';
+import { FEATURE_FLAG, GeneralCommands, WEBSITE_LINKS } from '../../../constants';
 import { TelemetryEvent } from '../../../constants/TelemetryEvent';
 import { SnippetParser } from '../../../helpers/SnippetParser';
 import { DashboardMessage } from '../../DashboardMessage';
@@ -84,6 +84,8 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
     Messenger.send(DashboardMessage.sendTelemetry, {
       event: TelemetryEvent.webviewSnippetsView
     });
+
+    Messenger.send(GeneralCommands.toVSCode.logging.info, "DASHBOARD: Snippets view loaded");
   }, []);
 
   return (

src/dashboardWebView/components/TaxonomyView/TaxonomyView.tsx

@@ -3,7 +3,7 @@ import { ChevronRightIcon, ArrowDownTrayIcon } from '@heroicons/react/24/outline
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { TelemetryEvent } from '../../../constants';
+import { GeneralCommands, TelemetryEvent } from '../../../constants';
 import { TaxonomyData } from '../../../models';
 import { DashboardMessage } from '../../DashboardMessage';
 import { Page, PageMappings } from '../../models';
@@ -56,6 +56,8 @@ export const TaxonomyView: React.FunctionComponent<ITaxonomyViewProps> = ({
     Messenger.send(DashboardMessage.sendTelemetry, {
       event: TelemetryEvent.webviewTaxonomyDashboard
     });
+
+    Messenger.send(GeneralCommands.toVSCode.logging.info, "DASHBOARD: Taxonomy view loaded");
   }, []);
 
   return (

src/dashboardWebView/components/WelcomeView/WelcomeScreen.tsx

@@ -1,6 +1,6 @@
 import { BookOpenIcon, HeartIcon, StarIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
-import { DOCUMENTATION_LINK, GITHUB_LINK, REVIEW_LINK, SPONSOR_LINK, TelemetryEvent } from '../../../constants';
+import { DOCUMENTATION_LINK, GITHUB_LINK, GeneralCommands, REVIEW_LINK, SPONSOR_LINK, TelemetryEvent } from '../../../constants';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { FrontMatterIcon } from '../../../panelWebView/components/Icons/FrontMatterIcon';
 import { GitHubIcon } from '../../../panelWebView/components/Icons/GitHubIcon';
@@ -29,6 +29,8 @@ export const WelcomeScreen: React.FunctionComponent<IWelcomeScreenProps> = ({
       event: TelemetryEvent.webviewWelcomeScreen
     });
 
+    Messenger.send(GeneralCommands.toVSCode.logging.info, "DASHBOARD: Welcome view loaded");
+
     const crntState: any = Messenger.getState() || {};
     Messenger.setState({
       ...crntState,

src/dashboardWebView/hooks/useMessages.tsx

@@ -82,7 +82,7 @@ export default function useMessages() {
     return () => {
       Messenger.unlisten(messageListener);
     };
-  }, ['']);
+  }, []);
 
   return {
     loading,

src/listeners/dashboard/BaseListener.ts

@@ -13,7 +13,12 @@ export abstract class BaseListener {
    * @param data
    */
   public static sendMsg(command: DashboardCommand, payload: any) {
-    Logger.info(`Sending message to dashboard: ${command}`);
+    if (command === DashboardCommand.loading) {
+      const loadingType = payload ? `- ${JSON.stringify(payload)}` : '- Turn off';
+      Logger.info(`Sending message to dashboard: ${command} ${loadingType}`);
+    } else {
+      Logger.info(`Sending message to dashboard: ${command}`);
+    }
 
     Dashboard.postWebviewMessage({
       command,

src/listeners/panel/DataListener.ts

@@ -196,7 +196,7 @@ export class DataListener extends BaseListener {
     let articleDetails = null;
 
     try {
-      if (filePath) {
+      if (filePath && !filePath.startsWith('extension-output-eliostruyf')) {
         articleDetails = await ArticleHelper.getDetails(filePath);
 
         if (!articleDetails || articleDetails === 'nodata') {