### Install Dependencies and Start Dev Server

Source: https://github.com/instructa/browser-echo/blob/main/example/react-vite-app/README.md

Commands to install project dependencies and start the Vite development server.

```bash
npm install
npm run dev
```

--------------------------------

### Install Dependencies

Source: https://github.com/instructa/browser-echo/blob/main/example/vue-vite-app/README.md

Installs the necessary project dependencies using npm.

```bash
npm install
```

--------------------------------

### Install and Run TanStack.com Locally

Source: https://github.com/instructa/browser-echo/blob/main/example/tanstack-app/README.md

Commands to install project dependencies and start the TanStack.com development server. This allows for local development and hot-reloading of assets.

```sh
pnpm install
pnpm dev
```

--------------------------------

### Install Browser Echo for Vite

Source: https://github.com/instructa/browser-echo/blob/main/example/react-vite-app/README.md

Commands to install the Browser Echo Vite plugin using npm or pnpm.

```bash
npm install -D @browser-echo/vite
# or
pnpm add -D @browser-echo/vite
```

--------------------------------

### Start Development Server

Source: https://github.com/instructa/browser-echo/blob/main/example/vue-vite-app/README.md

Starts the Vite development server to run the Vue application.

```bash
npm run dev
```

--------------------------------

### Install Dependencies

Source: https://github.com/instructa/browser-echo/blob/main/example/nuxt-app/README.md

Installs project dependencies using various package managers (npm, pnpm, yarn, bun). Ensure you have the respective package manager installed.

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

--------------------------------

### Start Development Server

Source: https://github.com/instructa/browser-echo/blob/main/example/nuxt-app/README.md

Starts the Nuxt development server on http://localhost:3000. This command is used for local development and testing.

```bash
# npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev

# bun
bun run dev
```

--------------------------------

### Installation

Source: https://github.com/instructa/browser-echo/blob/main/packages/react/README.md

Installs the @browser-echo/react and @browser-echo/core packages as development dependencies.

```bash
npm install -D @browser-echo/react @browser-echo/core
# or
pnpm add -D @browser-echo/react @browser-echo/core
```

--------------------------------

### Install @browser-echo/vite

Source: https://github.com/instructa/browser-echo/blob/main/packages/vite/README.md

Installs the Vite plugin for browser echo using npm or pnpm.

```bash
npm install -D @browser-echo/vite
# or
pnpm add -D @browser-echo/vite
```

--------------------------------

### Complete Vue App Setup with Browser Echo

Source: https://github.com/instructa/browser-echo/blob/main/packages/vue/README.md

A comprehensive example of setting up the Browser Echo Vue plugin in a Vue application's main file, including custom route, log levels, stack mode, tag, and batching configuration.

```ts
// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { createBrowserEchoVuePlugin } from '@browser-echo/vue';

const app = createApp(App);

if (import.meta.env.DEV) {
  app.use(createBrowserEchoVuePlugin({
    route: '/api/dev-logs',
    include: ['warn', 'error'],
    stackMode: 'condensed',
    tag: '[vue-app]',
    batch: { size: 10, interval: 500 }
  }));
}

app.mount('#app');
```

--------------------------------

### Install @browser-echo/next

Source: https://github.com/instructa/browser-echo/blob/main/packages/next/README.md

Installs the @browser-echo/next package as a development dependency using npm or pnpm.

```bash
npm install -D @browser-echo/next
# or
pnpm add -D @browser-echo/next
```

--------------------------------

### Run TanStack.com with Cloned Project Dependencies

Source: https://github.com/instructa/browser-echo/blob/main/example/tanstack-app/README.md

Instructions to navigate into the cloned TanStack.com directory, install its dependencies, and run the development server. This enables previewing the integrated documentation.

```sh
cd tanstack.com
pnpm i
pnpm dev
```

--------------------------------

### Run Setup Command

Source: https://github.com/instructa/browser-echo/blob/main/packages/next/README.md

Executes the setup command to automatically create the necessary route file for handling client logs in Next.js.

```bash
npx @browser-echo/next setup
# or
pnpm dlx @browser-echo/next setup
```

--------------------------------

### Setup Local Documentation Preview Environment

Source: https://github.com/instructa/browser-echo/blob/main/example/tanstack-app/README.md

Steps to set up a local environment for previewing documentation of other TanStack projects. This involves cloning the main site repository and the target project repository into a shared directory.

```sh
mkdir tanstack
cd tanstack
git clone git@github.com:TanStack/tanstack.com.git
git clone git@github.com:TanStack/form.git
```

--------------------------------

### Install @browser-echo/core

Source: https://github.com/instructa/browser-echo/blob/main/packages/core/README.md

Installs the core client-side package for browser echo using npm or pnpm. This package is intended for development environments.

```bash
npm install -D @browser-echo/core
# or
pnpm add -D @browser-echo/core
```

--------------------------------

### Install @browser-echo/vue and @browser-echo/core

Source: https://github.com/instructa/browser-echo/blob/main/packages/vue/README.md

Installs the necessary packages for the Vue plugin and the core functionality using npm or pnpm.

```bash
npm install -D @browser-echo/vue @browser-echo/core
# or
pnpm add -D @browser-echo/vue @browser-echo/core
```

--------------------------------

### TanStack Start Integration

Source: https://github.com/instructa/browser-echo/blob/main/packages/vite/README.md

Configures the Vite plugin for a TanStack Start project and manually imports the virtual module.

```ts
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import browserEcho from '@browser-echo/vite';

export default defineConfig({
  plugins: [
    react(),
    browserEcho({
      injectHtml: false, // Important: TanStack Start doesn't use index.html
      stackMode: 'condensed',
      fileLog: { enabled: true },
    }),
  ],
});

// src/router.tsx
if (import.meta.env.DEV && typeof window !== 'undefined') {
  void import('virtual:browser-echo');
}
```

--------------------------------

### Run Development Server

Source: https://github.com/instructa/browser-echo/blob/main/example/next-app/README.md

Commands to start the Next.js development server using different package managers. This allows for local development and testing.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Install @browser-echo/nuxt

Source: https://github.com/instructa/browser-echo/blob/main/packages/nuxt/README.md

Installs the @browser-echo/nuxt package as a development dependency using npm or pnpm.

```bash
npm install -D @browser-echo/nuxt
# or
pnpm add -D @browser-echo/nuxt
```

--------------------------------

### Complete Example with Custom Configuration

Source: https://github.com/instructa/browser-echo/blob/main/packages/react/README.md

A comprehensive example showing the BrowserEchoProvider integrated into the application's root with custom configurations for the route, included log levels, stack mode, and a custom tag.

```tsx
// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserEchoProvider } from '@browser-echo/react';
import App from './App';

function Root() {
  return (
    <>
      {process.env.NODE_ENV === 'development' && (
        <BrowserEchoProvider 
          route="/api/dev-logs"
          include={['warn', 'error']}
          stackMode="condensed"
          tag="[react-app]"
        />
      )}
      <App />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')!).render(<Root />);
```

--------------------------------

### Configure Browser Echo Plugin in Vite

Source: https://github.com/instructa/browser-echo/blob/main/example/react-vite-app/README.md

Example configuration for the browser-echo plugin within the vite.config.ts file.

```typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import browserEcho from 'browser-echo'

export default defineConfig({
  plugins: [react(), browserEcho()],
})
```

--------------------------------

### Advanced Nuxt Configuration Example

Source: https://github.com/instructa/browser-echo/blob/main/packages/nuxt/README.md

An advanced example of configuring @browser-echo/nuxt, showcasing custom log inclusion, tag modification, stack mode selection, and batch settings.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@browser-echo/nuxt'],
  
  browserEcho: {
    // Only forward warnings and errors
    include: ['warn', 'error'],
    
    // Custom tag for terminal output
    tag: '[frontend]',
    
    // Reduce noise with condensed stacks
    stackMode: 'condensed',
    
    // Batch settings for performance
    batch: { 
      size: 10,    // Send after 10 logs
      interval: 500 // Or after 500ms
    }
  }
});
```

--------------------------------

### Install @browser-echo/vite for Vite Projects

Source: https://github.com/instructa/browser-echo/blob/main/packages/vue/README.md

Installs the Vite-specific package for integrating browser console logging into Vue projects that use Vite.

```bash
npm install -D @browser-echo/vite
# or
pnpm add -D @browser-echo/vite
```

--------------------------------

### Example Express.js Server Endpoint

Source: https://github.com/instructa/browser-echo/blob/main/packages/react/README.md

Provides an example of a development server endpoint using Express.js that accepts POST requests at '/__client-logs'. It processes incoming log entries, including timestamps, levels, and stack traces, and prints them to the terminal.

```js
// dev-server.js
app.post('/__client-logs', express.json(), (req, res) => {
  const { sessionId, entries } = req.body;
  
  entries.forEach(entry => {
    const timestamp = new Date(entry.time).toISOString();
    const level = entry.level.toUpperCase();
    console.log(`[browser] [${sessionId}] ${level}: ${entry.text}`);
    if (entry.stack) {
      console.log(entry.stack);
    }
  });
  
  res.status(200).end();
});
```

--------------------------------

### Vite Configuration with Browser Echo Plugin

Source: https://github.com/instructa/browser-echo/blob/main/example/vue-vite-app/README.md

Configures the Vite build process to include the browser-echo plugin for enhanced console logging.

```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import browserEcho from 'browser-echo'

export default defineConfig({
  plugins: [vue(), browserEcho()],
})
```

--------------------------------

### Usage Example with Custom Options

Source: https://github.com/instructa/browser-echo/blob/main/packages/next/README.md

Demonstrates how to use the BrowserEchoScript component in a Next.js layout with custom configurations for route, log levels, console preservation, tagging, stack traces, and batching.

```tsx
// app/layout.tsx
import type { ReactNode } from 'react';
import BrowserEchoScript from '@browser-echo/next/BrowserEchoScript';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        {process.env.NODE_ENV === 'development' && (
          <BrowserEchoScript 
            route="/api/client-logs"
            include={['warn', 'error']}
            preserveConsole={true}
            tag="[NextJS Browser]"
            stackMode="condensed"
            showSource={true}
            batch={{ size: 10, interval: 500 }}
          />
        )}
      </head>
      <body>{children}</body>
    </html>
  );
}
```

--------------------------------

### Next.js Page Structure

Source: https://github.com/instructa/browser-echo/blob/main/example/next-app/README.md

Example of a Next.js page file (`app/page.tsx`) that can be modified to update the application's UI. The Next.js development server provides hot reloading.

```typescript
// Modify app/page.tsx to see changes
// The page auto-updates as you edit the file.
```

--------------------------------

### Manual Setup: Add Route Handler

Source: https://github.com/instructa/browser-echo/blob/main/packages/next/README.md

Configures the route handler in Next.js to forward client logs to the development terminal by exporting POST, runtime, and dynamic from the @browser-echo/next/route module.

```typescript
// app/api/client-logs/route.ts
export { POST, runtime, dynamic } from '@browser-echo/next/route';
```

--------------------------------

### Initialize Browser Echo Core Directly

Source: https://github.com/instructa/browser-echo/blob/main/packages/vue/README.md

Shows an alternative to using the Vue plugin by directly initializing the core browser echo functionality in the application's main file, providing a more manual setup approach.

```ts
// main.ts
import { initBrowserEcho } from '@browser-echo/core';

if (import.meta.env.DEV) {
  initBrowserEcho({
    route: '/__client-logs',
    include: ['warn', 'error'],
  });
}
```

--------------------------------

### Manual Setup: Add Early Script

Source: https://github.com/instructa/browser-echo/blob/main/packages/next/README.md

Manually adds the BrowserEchoScript component to the root layout's head section in a Next.js application for development environments.

```tsx
// app/layout.tsx
import type { ReactNode } from 'react';
import BrowserEchoScript from '@browser-echo/next/BrowserEchoScript';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        {process.env.NODE_ENV === 'development' && <BrowserEchoScript />}
      </head>
      <body>{children}</body>
    </html>
  );
}
```

--------------------------------

### Configure Vite with @browser-echo/vite

Source: https://github.com/instructa/browser-echo/blob/main/packages/vue/README.md

Configures the Vite build process by adding the browserEcho plugin to the vite.config.ts file, enabling automatic setup for console log streaming.

```ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import browserEcho from '@browser-echo/vite';

export default defineConfig({
  plugins: [vue(), browserEcho()],
});
```

--------------------------------

### Nuxt Configuration with @browser-echo/nuxt

Source: https://github.com/instructa/browser-echo/blob/main/packages/nuxt/README.md

Demonstrates how to add the @browser-echo/nuxt module to the Nuxt configuration file (nuxt.config.ts) and provides examples of optional configuration settings.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@browser-echo/nuxt'],
  
  // Optional configuration
  browserEcho: {
    route: '/__client-logs',
    include: ['warn', 'error'],
    tag: '[web]',
    batch: { size: 20, interval: 300 },
    preserveConsole: true,
    stackMode: 'condensed', // 'full' | 'condensed' | 'none'
  }
});
```

--------------------------------

### Example Express.js Server Endpoint for Logs

Source: https://github.com/instructa/browser-echo/blob/main/packages/vue/README.md

Sets up a POST endpoint using Express.js to receive browser console logs. It parses the incoming JSON payload and logs the messages to the development terminal, including session IDs and stack traces if available.

```js
// dev-server.js
app.post('/__client-logs', express.json(), (req, res) => {
  const { sessionId, entries } = req.body;
  
  entries.forEach(entry => {
    const timestamp = new Date(entry.time).toISOString();
    const level = entry.level.toUpperCase();
    console.log(`[browser] [${sessionId}] ${level}: ${entry.text}`);
    if (entry.stack) {
      console.log(entry.stack);
    }
  });
  
  res.status(200).end();
});
```

--------------------------------

### Next.js App Router Setup

Source: https://github.com/instructa/browser-echo/blob/main/packages/next/README.md

Integrates Browser Echo into the root layout of a Next.js application. It conditionally renders the BrowserEchoScript component in development mode, specifying the log route and stack trace formatting.

```tsx
// app/layout.tsx
import type { ReactNode } from 'react';
import BrowserEchoScript from '@browser-echo/next/BrowserEchoScript';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        {process.env.NODE_ENV === 'development' && (
          <BrowserEchoScript 
            route="/api/client-logs"
            include={['warn', 'error']}
            stackMode="condensed"
          />
        )}
      </head>
      <body>{children}</body>
    </html>
  );
}
```

--------------------------------

### Build for Production

Source: https://github.com/instructa/browser-echo/blob/main/example/nuxt-app/README.md

Builds the Nuxt application for production deployment. This optimizes the application for performance and size.

```bash
# npm
npm run build

# pnpm
pnpm build

# yarn
yarn build

# bun
bun run build
```

--------------------------------

### Preview Production Build

Source: https://github.com/instructa/browser-echo/blob/main/example/nuxt-app/README.md

Locally previews the production build of the Nuxt application. This allows you to test the production version before deploying.

```bash
# npm
npm run preview

# pnpm
pnpm preview

# yarn
yarn preview

# bun
bun run preview
```

--------------------------------

### Direct Usage with Core Library

Source: https://github.com/instructa/browser-echo/blob/main/packages/react/README.md

Demonstrates an alternative approach using the core library directly (`initBrowserEcho`) if you prefer not to use the React component. This is suitable for non-React or custom initialization scenarios.

```ts
// src/main.tsx
import { initBrowserEcho } from '@browser-echo/core';

if (process.env.NODE_ENV === 'development') {
  initBrowserEcho({
    route: '/__client-logs',
    include: ['warn', 'error'],
  });
}
```

--------------------------------

### InitBrowserEchoOptions Interface

Source: https://github.com/instructa/browser-echo/blob/main/packages/core/README.md

Defines the configuration options available for the `initBrowserEcho` function. These options control how console logs are captured, filtered, batched, and displayed.

```APIDOC
InitBrowserEchoOptions:
  route?: `/${string}`;              // default: '/__client-logs'
  include?: BrowserLogLevel[];       // default: ['log','info','warn','error','debug']
  preserveConsole?: boolean;         // default: true (also keep logging in browser)
  tag?: string;                      // default: '[browser]'
  batch?: { size?: number; interval?: number }; // default: 20 / 300ms
  stackMode?: 'full' | 'condensed' | 'none';    // default: 'condensed'
```

--------------------------------

### Browser Echo API Documentation

Source: https://github.com/instructa/browser-echo/blob/main/README.md

Documentation for Browser Echo's core functionality and configuration. Covers log levels, routing, batching, stack trace options, and server-side configurations like truncation and file logging.

```APIDOC
BrowserEchoOptions:
  enabled: boolean
    - Description: Enables or disables Browser Echo. Defaults to true in development.
    - Type: boolean
    - Default: true

  route: `/${string}`
    - Description: The server route for receiving client logs. Varies by framework.
    - Type: string
    - Default: '/api/client-logs' (Next), '/__client-logs' (others)

  include: BrowserLogLevel[]
    - Description: An array of log levels to include. Available levels: 'log', 'info', 'warn', 'error', 'debug'.
    - Type: Array<string>
    - Default: ['log', 'info', 'warn', 'error', 'debug']

  preserveConsole: boolean
    - Description: If true, logs will also appear in the browser console. Defaults to true.
    - Type: boolean
    - Default: true

  tag: string
    - Description: A tag prepended to log messages in the terminal.
    - Type: string
    - Default: '[browser]'

  stackMode: 'none' | 'condensed' | 'full'
    - Description: Controls the format of stack traces. 'condensed' and 'full' are provider-specific.
    - Type: string (enum)
    - Default: 'full'

  showSource: boolean
    - Description: If true, displays source file and line number when available. Defaults to true.
    - Type: boolean
    - Default: true

  batch:
    - Description: Configuration for batching log posts.
    - Properties:
      - size: number
        - Description: Maximum number of logs per batch. Defaults to 20.
        - Type: number
        - Default: 20
      - interval: number
        - Description: Time interval in milliseconds for sending batches. Defaults to 300ms.
        - Type: number
        - Default: 300

  truncate: number
    - Description: Maximum length of log messages in characters on the server. Implemented in Vite plugin.
    - Type: number
    - Default: 10000

  fileLog:
    - Description: Configuration for file logging. Currently Vite-only.
    - Properties:
      - enabled: boolean
        - Description: Enables file logging.
        - Type: boolean
        - Default: false
      - dir: string
        - Description: Directory to save log files.
        - Type: string
        - Default: undefined
```

--------------------------------

### Configure Browser Echo Vue Plugin Options

Source: https://github.com/instructa/browser-echo/blob/main/packages/vue/README.md

Demonstrates how to pass various configuration options to the createBrowserEchoVuePlugin factory function to customize logging behavior, such as the route, included log levels, and batching.

```ts
const plugin = createBrowserEchoVuePlugin({
  route: '/__client-logs',
  include: ['warn', 'error'],
  preserveConsole: true,
  tag: '[vue-app]',
  batch: { size: 20, interval: 300 },
  stackMode: 'condensed'
});

app.use(plugin);
```

--------------------------------

### BrowserEchoViteOptions Interface

Source: https://github.com/instructa/browser-echo/blob/main/packages/vite/README.md

Defines the configuration options for the Vite plugin, including logging levels, output formatting, and file logging.

```APIDOC
BrowserEchoViteOptions:
  enabled?: boolean;                 // default: true (dev only)
  route?: `/${string}`;              // default: '/__client-logs'
  include?: BrowserLogLevel[];       // default: ['log','info','warn','error','debug']
  preserveConsole?: boolean;         // default: true
  tag?: string;                      // default: '[browser]'
  colors?: boolean;                  // default: true
  injectHtml?: boolean;              // default: true
  stackMode?: 'none' | 'condensed' | 'full'; // default: 'condensed'
  showSource?: boolean;              // default: true
  batch?: { size?: number; interval?: number }; // default: 20 / 300ms
  truncate?: number;                 // default: 10_000 chars
  fileLog?: { enabled?: boolean; dir?: string }; // default: disabled
```

--------------------------------

### BrowserEchoNuxtOptions Interface

Source: https://github.com/instructa/browser-echo/blob/main/packages/nuxt/README.md

Defines the TypeScript interface for configuring the @browser-echo/nuxt module, detailing available options and their default values.

```typescript
interface BrowserEchoNuxtOptions {
  enabled?: boolean;                 // default: true (dev only)
  route?: `/${string}`;              // default: '/__client-logs'
  include?: BrowserLogLevel[];       // default: ['log','info','warn','error','debug']
  preserveConsole?: boolean;         // default: true
  tag?: string;                      // default: '[browser]'
  batch?: { size?: number; interval?: number }; // default: 20 / 300ms
  stackMode?: 'full' | 'condensed' | 'none';    // default: 'condensed'
}
```

--------------------------------

### Initialize Browser Echo

Source: https://github.com/instructa/browser-echo/blob/main/packages/core/README.md

Initializes the browser echo functionality with default or custom options. This function patches the browser's console methods to capture and send logs.

```ts
import { initBrowserEcho } from '@browser-echo/core';

// Initialize with default options
initBrowserEcho();

// Or customize the behavior
initBrowserEcho({
  route: '/__client-logs',
  include: ['warn', 'error'],
  preserveConsole: true,
  tag: '[browser]',
  batch: { size: 20, interval: 300 },
  stackMode: 'condensed'
});
```

--------------------------------

### Next.js API Route Handler

Source: https://github.com/instructa/browser-echo/blob/main/packages/next/README.md

Sets up the server-side API endpoint for receiving client logs in a Next.js application. This file exports the necessary handlers from the Browser Echo Next.js integration package.

```ts
// app/api/client-logs/route.ts
export { POST, runtime, dynamic } from '@browser-echo/next/route';
```

--------------------------------

### Enable File Logging

Source: https://github.com/instructa/browser-echo/blob/main/packages/vite/README.md

Configures the Vite plugin to enable file logging for browser console output, specifying an optional directory.

```ts
browserEcho({
  fileLog: { 
    enabled: true, 
    dir: 'logs/frontend' // default: 'logs/frontend'
  }
})
```

--------------------------------

### Browser Echo Options Interface

Source: https://github.com/instructa/browser-echo/blob/main/README.md

Defines the configuration options for Browser Echo, including log levels, routing, batching, and stack trace formatting. These options can be passed to providers or as component props.

```typescript
type BrowserLogLevel = 'log' | 'info' | 'warn' | 'error' | 'debug';

interface BrowserEchoOptions {
  enabled?: boolean;                 // default: true (dev only)
  route?: `/${string}`;              // default: '/api/client-logs' (Next), '/__client-logs' (others)
  include?: BrowserLogLevel[];       // default: ['log','info','warn','error','debug']
  preserveConsole?: boolean;         // default: true (also keep logging in the browser)
  tag?: string;                      // default: '[browser]'
  // stacks
  stackMode?: 'none' | 'condensed' | 'full'; // default: 'full' (provider-specific; Vite supports all)
  showSource?: boolean;              // default: true (when available)
  // batching
  batch?: { size?: number; interval?: number }; // default: 20 / 300ms
  // server-side
  truncate?: number;                 // default: 10_000 chars (Vite)
  fileLog?: { enabled?: boolean; dir?: string }; // Vite-only
}
```

--------------------------------

### Robots Exclusion Protocol Configuration

Source: https://github.com/instructa/browser-echo/blob/main/example/nuxt-app/public/robots.txt

This snippet defines the rules for web crawlers accessing the browser-echo project. It specifies that all user agents are allowed to access the site, with no specific paths disallowed.

```robots.txt
User-Agent: *
Disallow: 

```

--------------------------------

### React + Vite Integration

Source: https://github.com/instructa/browser-echo/blob/main/packages/vite/README.md

Configures the Vite plugin for a React project to stream browser console logs.

```ts
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import browserEcho from '@browser-echo/vite';

export default defineConfig({
  plugins: [
    react(),
    browserEcho({
      // Optional configuration
      stackMode: 'condensed',
      colors: true,
    }),
  ],
});
```

--------------------------------

### BrowserEchoScript Component Props

Source: https://github.com/instructa/browser-echo/blob/main/packages/next/README.md

Defines the TypeScript interface for BrowserEchoScript component props, outlining available options for configuring log capturing and forwarding.

```typescript
type BrowserLogLevel = 'log' | 'info' | 'warn' | 'error' | 'debug';

interface BrowserEchoScriptProps {
  enabled?: boolean;                 // default: true (dev only)
  route?: `/${string}`;
  include?: BrowserLogLevel[];       // default: ['log','info','warn','error','debug']
  preserveConsole?: boolean;         // default: true (also keep logging in the browser)
  tag?: string;                      // default: '[browser]'
  // stacks
  stackMode?: 'none' | 'condensed' | 'full'; // default: 'condensed'
  showSource?: boolean;              // default: true (when available)
  // batching
  batch?: { size?: number; interval?: number }; // default: 20 / 300ms
}
```

--------------------------------

### BrowserEchoProvider Props Interface

Source: https://github.com/instructa/browser-echo/blob/main/packages/react/README.md

Defines the TypeScript interface for BrowserEchoProviderProps, outlining the available configuration options and their default values. This includes route, include levels, preserveConsole, tag, batch settings, and stackMode.

```ts
interface BrowserEchoProviderProps {
  route?: `/${string}`;
  include?: BrowserLogLevel[];
  preserveConsole?: boolean;
  tag?: string;
  batch?: { size?: number; interval?: number };
  stackMode?: 'full' | 'condensed' | 'none';
}
```

--------------------------------

### BrowserEchoProvider Configuration Props

Source: https://github.com/instructa/browser-echo/blob/main/packages/react/README.md

Illustrates how to customize the BrowserEchoProvider component using various props to control the logging behavior, such as the server route, included log levels, console preservation, custom tags, batching, and stack trace formatting.

```tsx
<BrowserEchoProvider 
  route="/__client-logs"
  include={['warn', 'error']}
  preserveConsole={true}
  tag="[browser]"
  batch={{ size: 20, interval: 300 }}
  stackMode="condensed"
/>
```

--------------------------------

### Add BrowserEchoProvider to App Root

Source: https://github.com/instructa/browser-echo/blob/main/packages/react/README.md

Demonstrates how to mount the BrowserEchoProvider component in the root of your React application for development environments. This enables the client-side console patching and log streaming.

```tsx
// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserEchoProvider } from '@browser-echo/react';
import App from './App';

function Root() {
  return (
    <>
      {process.env.NODE_ENV === 'development' && <BrowserEchoProvider />}
      <App />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')!).render(<Root />);
```

--------------------------------

### Add Browser Echo Vue Plugin to Vue App

Source: https://github.com/instructa/browser-echo/blob/main/packages/vue/README.md

Registers the createBrowserEchoVuePlugin in a Vue 3 application's main entry point. It's crucial to only enable this in development environments.

```ts
// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { createBrowserEchoVuePlugin } from '@browser-echo/vue';

const app = createApp(App);

// Only in development
if (import.meta.env.DEV) {
  app.use(createBrowserEchoVuePlugin({
    route: '/__client-logs',
    include: ['warn', 'error'],
    stackMode: 'condensed',
  }));
}

app.mount('#app');
```

--------------------------------

### Vue + Vite Integration

Source: https://github.com/instructa/browser-echo/blob/main/packages/vite/README.md

Configures the Vite plugin for a Vue project to stream browser console logs.

```ts
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import browserEcho from '@browser-echo/vite';

export default defineConfig({
  plugins: [
    vue(),
    browserEcho({
      // Optional configuration
      stackMode: 'condensed',
      colors: true,
    }),
  ],
});
```

--------------------------------

### Customizing API Route Path

Source: https://github.com/instructa/browser-echo/blob/main/packages/next/README.md

Demonstrates how to configure a custom path for the Browser Echo API endpoint in a Next.js application. Both the client-side script and the server-side route handler must be updated to match the custom path.

```tsx
// Use custom route in script
<BrowserEchoScript route="/api/my-logs" />
```

```ts
// Create matching route file: app/api/my-logs/route.ts
export { POST, runtime, dynamic } from '@browser-echo/next/route';
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.