> ## Documentation Index
> Fetch the complete documentation index at: https://docs.squasher.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Browser Logger

> Capture browser console errors and forward them to Squasher from a frontend app or a plain script tag.

The browser logger wraps `console.error()` and sends those events to Squasher with the current page URL, user agent, and any serialized console arguments.

## Installation

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npm install @squasher/browser-logger
    ```
  </Tab>

  <Tab title="Script tag">
    If you prefer a script tag, copy the UMD build into your public assets and load it in the page:

    ```bash theme={null}
    mkdir -p public/vendor
    cp node_modules/@squasher/browser-logger/dist/browser-logger.umd.js public/vendor/browser-logger.umd.js
    ```

    ```html public/index.html theme={null}
    <script src="/vendor/browser-logger.umd.js"></script>
    <script>
      window.SquasherBrowserLogger.init({
        apiKey: "sq_pk_your_key",
        projectId: "your-project-id"
      });
    </script>
    ```
  </Tab>
</Tabs>

## Configuration

Use `initBrowserLogger()` in a bundled app, or `window.SquasherBrowserLogger.init()` from the UMD build.

```typescript src/main.ts theme={null}
import { initBrowserLogger } from "@squasher/browser-logger";

const browserLogger = initBrowserLogger({
  apiKey: "sq_pk_your_key",
  projectId: "your-project-id",
  endpoint: "https://ingest.squasher.ai",
  captureConsoleErrors: true,
});

export default browserLogger;
```

| Option                 | Type      | Default                      | Description                           |
| ---------------------- | --------- | ---------------------------- | ------------------------------------- |
| `apiKey`               | `string`  | Required                     | Your project ingest key               |
| `projectId`            | `string`  | Required                     | Your Squasher project ID              |
| `endpoint`             | `string`  | `https://ingest.squasher.ai` | Override the ingest base URL          |
| `captureConsoleErrors` | `boolean` | `true`                       | Patch `console.error()` automatically |

The transport batches events every few seconds and attempts a final flush with `navigator.sendBeacon()` when the page is hidden or unloaded.

## Usage Example

```typescript src/main.ts theme={null}
import { initBrowserLogger } from "@squasher/browser-logger";

const browserLogger = initBrowserLogger({
  apiKey: "sq_pk_your_key",
  projectId: "your-project-id",
});

console.error("Checkout failed", new Error("Card declined"), { cartId: "cart_123" });

void browserLogger.flush();
```

Each captured event includes:

* `sdk.name = "@squasher/browser-logger"`
* The current page URL
* The browser user agent
* Serialized console arguments in `extra.console_arguments`

## Privacy/Security Considerations

* The browser logger captures every argument passed to `console.error()`. Do not log secrets, access tokens, card data, or raw personal data in browser console calls.
* The current page URL is attached to each event. Avoid placing sensitive values in query strings or route params if those pages initialize the logger.
* Initialize the logger only in environments where client-side error forwarding is expected, such as production or staging builds.
* Use HTTPS for the page and the ingest endpoint so the project key and payload are encrypted in transit.

## Agent handoff

```text theme={null}
Use @squasher/browser-logger only when the app needs lightweight console.error capture without the full browser SDK. Keep the project key browser-safe, avoid logging secrets, and verify with one console.error call.
```