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

# Introduction

> Lens helps you collect browser telemetry with a single web SDK.

## Browser observability without a long setup

Lens gives you one browser SDK that captures the basics immediately:

* page views
* Web Vitals
* unhandled errors and promise rejections
* custom interaction and business events when you need them

If you are integrating Lens into a frontend app, start with the web SDK quickstart.

<Card title="Web SDK Quickstart" icon="rocket" href="/quickstart" horizontal>
  Install `@lens/web`, add your API key, initialize once, and verify data in Lens.
</Card>

## What you need

<Columns cols={2}>
  <Card title="A Lens project" icon="folder-tree">
    Create a project in Lens so you have a place for incoming telemetry.
  </Card>

  <Card title="An API key" icon="key">
    Generate a project API key from the Lens dashboard before wiring the SDK.
  </Card>

  <Card title="A frontend app" icon="globe">
    The current public SDK is `@lens/web`, designed for browser-based apps.
  </Card>

  <Card title="Collector endpoint" icon="server">
    Point the SDK at `https://collector.lens.sh` for production ingestion.
  </Card>
</Columns>

## Recommended rollout

1. Integrate Lens in one production frontend first.
2. Verify page views, errors, and Web Vitals arrive as expected.
3. Add user identity after auth state is available.
4. Layer in custom interaction and business events only where they add product value.

## Next steps

<CardGroup cols={2}>
  <Card title="Quickstart" icon="bolt" href="/quickstart">
    Follow the production setup flow for the web SDK.
  </Card>

  <Card title="Local Docs Development" icon="rectangle-terminal" href="/development">
    Preview and edit this Mintlify site locally.
  </Card>
</CardGroup>