@visulima/vite-overlay 1.2.1 → 1.3.0

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## @visulima/vite-overlay [1.3.0](https://github.com/visulima/visulima/compare/@visulima/vite-overlay@1.2.1...@visulima/vite-overlay@1.3.0) (2025-10-15)
+
+### Features
+
+* enhance error overlay with location extraction and comprehensive docs ([13c6336](https://github.com/visulima/visulima/commit/13c63366c6e4a462f89da56fe10ad4f5d7cf875f))
+
+### Bug Fixes
+
+* enhance linting commands and update package dependencies for improved performance ([cdbda6b](https://github.com/visulima/visulima/commit/cdbda6bd693d0618b58525e8fe10eb45d90eb6f5))
+* update @visulima/packem to 2.0.0-alpha.30 across multiple packages for improved compatibility ([27b346e](https://github.com/visulima/visulima/commit/27b346eaa1c0fb0e420d9a9824482028307f4249))
+* update devDependencies and packem configuration ([db05ef1](https://github.com/visulima/visulima/commit/db05ef1f50c6efa73be2ab8f1362fa90587fafeb))
+
+### Miscellaneous Chores
+
+* update package dependencies across multiple packages for improved compatibility and performance ([9567591](https://github.com/visulima/visulima/commit/9567591c415da3002f3a4fe08f8caf7ce01ca5f7))
+* update package versions in examples and pnpm-lock.yaml for improved compatibility ([af9b5b5](https://github.com/visulima/visulima/commit/af9b5b563c8bcff0ad8da3c51278a13b320cfe96))
+
+### Code Refactoring
+
+* rename forwardClientLogs to forwardConsole in error overlay configuration ([98389e7](https://github.com/visulima/visulima/commit/98389e7e7ef63d8fbbd48fb4595bdeb34c636b37))
+
+
+### Dependencies
+
+* **@visulima/error:** upgraded to 5.0.0
+* **@visulima/path:** upgraded to 2.0.0
+
 ## @visulima/vite-overlay [1.2.1](https://github.com/visulima/visulima/compare/@visulima/vite-overlay@1.2.0...@visulima/vite-overlay@1.2.1) (2025-10-02)
 
 ### Bug Fixes

package/README.md

@@ -34,7 +34,8 @@
 - **Enhanced Error Display** - Rich, interactive error overlays with syntax highlighting
 - **Source Map Integration** - Shows original `.tsx`/`.ts` files instead of compiled paths
 - **Cause Chain Navigation** - Navigate through multi-level error chains with original source locations
-- **Beautiful UI** - Modern, accessible interface with light/dark theme support
+- **Console Method Forwarding** - Intercept and display console.error, console.warn, and other console methods
+- **Beautiful UI** - Modern, accessible interface with light/dark theme support and floating balloon button
 - **Intelligent Solutions** - AI-powered error analysis and suggested fixes
 - **Real-time Updates** - Hot Module Replacement (HMR) integration for instant error feedback
 - **Comprehensive Testing** - Extensive e2e test coverage for reliability
@@ -78,13 +79,25 @@ export default defineConfig({
     plugins: [
         errorOverlay({
             // Whether to log/display client-side runtime errors (default: true)
-            logClientRuntimeError: true,
+            forwardConsole: true,
+
+            // Array of console method names to forward (default: ["error"])
+            forwardedConsoleMethods: ["error", "warn"],
 
             // Custom React plugin name for detection (optional)
             reactPluginName: "@vitejs/plugin-react",
 
+            // Custom Vue plugin name for detection (optional)
+            vuePluginName: "@vitejs/plugin-vue",
+
+            // Whether to show the balloon button in the overlay (default: true)
+            showBallonButton: true,
+
             // Custom solution finder functions (optional)
             solutionFinders: [],
+
+            // @deprecated Use forwardConsole instead
+            logClientRuntimeError: true,
         }),
     ],
 });
@@ -92,11 +105,15 @@ export default defineConfig({
 
 #### Options
 
-| Option                  | Type               | Default     | Description                                                              |
-| ----------------------- | ------------------ | ----------- | ------------------------------------------------------------------------ |
-| `logClientRuntimeError` | `boolean`          | `true`      | Enable/disable client-side runtime error logging and overlay display     |
-| `reactPluginName`       | `string`           | `undefined` | Custom React plugin name for detection (useful for custom React plugins) |
-| `solutionFinders`       | `SolutionFinder[]` | `[]`        | Array of custom solution finder functions for enhanced error analysis    |
+| Option                    | Type               | Default     | Description                                                              |
+| ------------------------- | ------------------ | ----------- | ------------------------------------------------------------------------ |
+| `forwardConsole`       | `boolean`          | `true`      | Enable/disable client-side runtime error logging and overlay display     |
+| `forwardedConsoleMethods` | `string[]`         | `["error"]` | Array of console method names to intercept and forward to overlay        |
+| `reactPluginName`         | `string`           | `undefined` | Custom React plugin name for detection (useful for custom React plugins) |
+| `vuePluginName`           | `string`           | `undefined` | Custom Vue plugin name for detection (useful for custom Vue plugins)     |
+| `showBallonButton`        | `boolean`          | `true`      | Whether to show the floating balloon button for error navigation         |
+| `solutionFinders`         | `SolutionFinder[]` | `[]`        | Array of custom solution finder functions for enhanced error analysis    |
+| `logClientRuntimeError`   | `boolean`          | `undefined` | **@deprecated** Use `forwardConsole` instead                          |
 
 ## Error Handling
 
@@ -106,6 +123,7 @@ The plugin automatically handles various types of errors:
 
 - Runtime JavaScript errors
 - Unhandled promise rejections
+- Console method interception (configurable via `forwardedConsoleMethods`)
 - React component errors (when React plugin is detected)
 - Async context errors
 
@@ -125,6 +143,16 @@ The plugin automatically handles various types of errors:
 
 ## User Interface
 
+### Floating Balloon Button
+
+When errors occur, a floating balloon button appears in the bottom-right corner of the screen. Click it to:
+
+- View the most recent error details
+- Navigate through multiple errors
+- Access error overlay controls
+
+The balloon button can be disabled by setting `showBallonButton: false` in the plugin options.
+
 ### Keyboard Shortcuts
 
 - `ESC` - Close error overlay (client-side errors only)
@@ -180,6 +208,34 @@ export default defineConfig({
 });
 ```
 
+### Vue Plugin Detection
+
+Similar to React detection, you can specify a custom Vue plugin name:
+
+```typescript
+export default defineConfig({
+    plugins: [
+        errorOverlay({
+            vuePluginName: "my-custom-vue-plugin",
+        }),
+    ],
+});
+```
+
+### Console Method Forwarding
+
+By default, only `console.error` calls are intercepted and displayed in the overlay. You can customize which console methods to forward:
+
+```typescript
+export default defineConfig({
+    plugins: [
+        errorOverlay({
+            forwardedConsoleMethods: ["error", "warn", "log"],
+        }),
+    ],
+});
+```
+
 ## Theming
 
 The error overlay uses a custom design system with CSS custom properties:

package/dist/index.d.ts

@@ -2,6 +2,8 @@ import { SolutionFinder } from '@visulima/error/solution';
 import { Plugin } from 'vite';
 
 declare const errorOverlayPlugin: (options?: {
+    forwardConsole?: boolean;
+    forwardedConsoleMethods?: string[];
     logClientRuntimeError?: boolean;
     reactPluginName?: string;
     showBallonButton?: boolean;