Merge pull request #124 from danyeaw/logging

Enhanced Frontend Logging System

Author: ericsnekbytes

.gitignore

@@ -71,6 +71,7 @@ coverage.xml
 *.cover
 .hypothesis/
 .pytest_cache/
+junit.xml
 
 # Translations
 *.mo

CONTRIBUTING.md

@@ -82,3 +82,92 @@ More information are provided within the [ui-tests](./ui-tests/README.md) README
 ### Packaging the extension
 
 See [RELEASE](RELEASE.md)
+
+### Logging
+
+The extension uses a configurable logging system that supports different
+verbosity levels. When developing or debugging, you can adjust the log level to
+see more or less detailed information.
+
+#### Log Levels
+
+The following log levels are available (in order of increasing verbosity):
+
+- `NONE` (0): No logs
+- `ERROR` (1): Only error messages
+- `WARN` (2): Warnings and errors
+- `INFO` (3): Informational messages, warnings, and errors (default)
+- `DEBUG` (4): Debug messages and all above
+
+#### Setting the Log Level During Development
+
+There are several ways to change the log level during development:
+
+1. **Using the JupyterLab Settings UI:**
+
+   - Open JupyterLab
+   - Go to Settings → Settings Editor
+   - Select "jupyter-fsspec" in the left sidebar
+   - Set the `logLevel` value in the User Settings panel on the right:
+     ```json
+     {
+       "logLevel": "debug"
+     }
+     ```
+   - Click "Save Settings"
+
+2. **Programmatically in the browser console:**
+
+   ```javascript
+   // Set to debug level
+   window.jupyterFsspecLogConfig.setLevel(4);
+
+   // Set to error level only
+   window.jupyterFsspecLogConfig.setLevel(1);
+   ```
+
+3. **In your code during development:**
+
+   ```typescript
+   import { Logger } from './logger';
+
+   // Set log level for debugging
+   Logger.setLevel(Logger.DEBUG);
+
+   // Create a logger with context
+   const logger = Logger.getLogger('MyComponent');
+   logger.debug('This is a debug message');
+   ```
+
+#### Best Practices for Logging
+
+When adding logging to your code:
+
+1. Always use a contextual logger:
+
+   ```typescript
+   const logger = Logger.getLogger('ComponentName');
+   ```
+
+2. Choose the appropriate log level:
+
+   - `error`: For failures that prevent functionality
+   - `warn`: For issues that don't break functionality but are concerning
+   - `info`: For important events users should know about
+   - `debug`: For developer-focused details
+
+3. Include relevant data for debugging:
+
+   ```typescript
+   logger.debug('Processing data', {
+     count: items.length,
+     firstItem: items[0]
+   });
+   ```
+
+4. Log at entry/exit points of significant operations:
+   ```typescript
+   logger.info('Starting file upload...');
+   // ... operation code ...
+   logger.info('File upload completed');
+   ```

jest.config.js

@@ -23,6 +23,6 @@ module.exports = {
     '!src/**/.ipynb_checkpoints/*'
   ],
   coverageReporters: ['lcov', 'text'],
-  testRegex: 'src/.*/.*.spec.ts[x]?$',
+  testRegex: 'src/.*/.*.test.ts[x]?$',
   transformIgnorePatterns: [`/node_modules/(?!${esModules}).+`]
 };

schema/plugin.json

@@ -1,9 +1,17 @@
 {
   "jupyter.lab.shortcuts": [],
-  "title": "jupyterFsspec",
-  "description": "jupyterFsspec settings.",
+  "title": "Jupyter Fsspec",
+  "description": "Settings for the jupyter-fsspec extension.",
   "type": "object",
-  "properties": {},
+  "properties": {
+    "logLevel": {
+      "type": "string",
+      "title": "Log Level",
+      "description": "Set the verbosity of logging (none, error, warn, info, debug)",
+      "enum": ["none", "error", "warn", "info", "debug"],
+      "default": "info"
+    }
+  },
   "additionalProperties": false,
   "jupyter.lab.menus": {
     "main": [

src/FssFilesysContextMenu.ts

@@ -1,14 +1,18 @@
 // Right-click/context menu for file items
 import { INotebookTracker } from '@jupyterlab/notebook';
+import { Logger } from './logger';
 
 export class FssFilesysContextMenu {
   root: any;
   clicked = false;
   parentControl: any = null;
   model: any;
   notebookTracker: any;
+  private readonly logger: Logger;
 
   constructor(model: any, notebookTracker: INotebookTracker) {
+    this.logger = Logger.getLogger('FssFilesysContextMenu');
+
     const root = document.createElement('div');
     root.classList.add('jfss-tree-context-menu');
     this.root = root;
@@ -28,6 +32,7 @@ export class FssFilesysContextMenu {
     }
 
     root.addEventListener('mouseleave', this.handleMouseExit.bind(this), false);
+    this.logger.debug('Context menu initialized');
   }
 
   createMenuItem(text: string, cssClass: string, contextType: string) {
@@ -41,6 +46,7 @@ export class FssFilesysContextMenu {
     menuItem.addEventListener('mouseleave', this.handleItemUnhover.bind(this));
 
     this.root.appendChild(menuItem);
+    this.logger.debug('Created menu item', { text, contextType });
 
     return menuItem;
   }
@@ -54,7 +60,14 @@ export class FssFilesysContextMenu {
     if (protocol) {
       const canonical =
         protocol + '/' + this.root.dataset.fss.replace(/^\/+/, () => '');
+      this.logger.debug('Generated path', { path: canonical });
       return canonical;
+    } else {
+      this.logger.warn('Failed to generate path', {
+        reason: 'No protocol found',
+        info: info
+      });
+      return undefined;
     }
   }
 
@@ -65,14 +78,20 @@ export class FssFilesysContextMenu {
       navigator.clipboard.writeText(path).then(
         () => {
           // Success
-          console.log('Copy path: ' + path);
+          this.logger.info('Path copied to clipboard', { path });
           this.root.remove();
         },
-        () => {
-          console.log('Copy path failed: ' + path);
+        error => {
+          this.logger.error('Failed to copy path to clipboard', {
+            path,
+            error
+          });
           this.root.remove();
         }
       );
+    } else {
+      this.logger.error('Cannot copy path', { reason: 'path is undefined' });
+      this.root.remove();
     }
   }
 
@@ -85,36 +104,60 @@ export class FssFilesysContextMenu {
         const cellContent = activeCell.model.sharedModel.getSource();
         const newCellContent = cellContent + '\n' + codeBlock;
         activeCell.model.sharedModel.setSource(newCellContent);
-        console.log('Updated cell content to: ', newCellContent);
+        this.logger.debug('Updated cell content', {
+          oldLength: cellContent.length,
+          newLength: newCellContent.length,
+          notebookType: notebookPanel.content.model.type
+        });
+      } else {
+        this.logger.warn('No active cell found in notebook', {
+          notebookId: notebookPanel.id
+        });
       }
+    } else {
+      this.logger.warn('No active notebook found');
     }
   }
+
   copyOpenCodeBlock() {
     const path = this.copyPath();
 
     if (path) {
       const openCodeBlock = `with fsspec.open("${path}", "rb") as f:\n   ...`;
       navigator.clipboard.writeText(openCodeBlock).then(
         () => {
-          console.log('Copied `open` code block');
-          console.log(openCodeBlock);
+          this.logger.info('Copied code snippet to clipboard', {
+            operation: 'open',
+            path
+          });
+          this.logger.debug('Code block content', { content: openCodeBlock });
           this.root.remove();
         },
-        () => {
-          console.log('Failed to copy `open` code block');
+        error => {
+          this.logger.error('Failed to copy code snippet to clipboard', {
+            operation: 'open',
+            path,
+            error
+          });
           this.root.remove();
         }
       );
 
       this.insertCodeBlock(openCodeBlock);
     } else {
-      console.log('Failed to copy `open` code block');
+      this.logger.error('Failed to copy code snippet', {
+        operation: 'open',
+        reason: 'path not available'
+      });
       this.root.remove();
     }
   }
 
   handleItemClick(event: any) {
-    // TODO multiple menu it
+    this.logger.debug('Menu item clicked', {
+      type: event.target.dataset.fssContextType
+    });
+
     if (event.target.dataset.fssContextType === 'copyPath') {
       this.copyPathToClipboard();
     } else if (event.target.dataset.fssContextType === 'copyOpenCodeBlock') {
@@ -134,6 +177,7 @@ export class FssFilesysContextMenu {
 
   handleMouseExit(event: any) {
     event.preventDefault();
+    this.logger.debug('Context menu closed', { reason: 'mouse exit' });
     this.root.remove();
     return false;
   }