# askdepth/sdk architecture

> Architecture diagram of the GitHub repository askdepth/sdk, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/askdepth/sdk
- Repository: https://github.com/askdepth/sdk

## Overview

Askdepth is a browser telemetry SDK monorepo: the main runtime collects user interactions and browser errors, derives anomaly events, and queues telemetry for delivery. Contracts define event and envelope formats; replay and React packages are currently scaffolds. The transport implementation and several core modules were not sampled, so delivery details and their internal wiring are shown only where documented or directly supported.

Main entry points: [`packages/core/src/sdk.ts`](https://github.com/askdepth/sdk/blob/master/packages/core/src/sdk.ts) (SDK lifecycle), [`packages/core/src/transport.ts`](https://github.com/askdepth/sdk/blob/master/packages/core/src/transport.ts) (Telemetry queue), [`packages/core/src/rage.ts`](https://github.com/askdepth/sdk/blob/master/packages/core/src/rage.ts) (Rage-click detection), [`packages/core/src/trace.ts`](https://github.com/askdepth/sdk/blob/master/packages/core/src/trace.ts) (Network tracing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Browser SDK"]
  node_sdk["SDK lifecycle<br/>[sdk.ts]"]
  node_activity["Navigation activity<br/>[activity.ts]"]
  node_selectors["Element selectors<br/>[selector.ts]"]
  node_rage["Rage-click detection<br/>[rage.ts]"]
  node_dead["Dead-click detection<br/>[dead.ts]"]
  node_errors["Error correlation<br/>[errors.ts]"]
  node_trace["Network tracing<br/>[trace.ts]"]
  node_ids["Session and trace IDs<br/>[ids.ts]"]
  node_transport["Telemetry queue<br/>[transport.ts]"]
end

subgraph group_contracts["Telemetry Contracts"]
  node_contracts["Event schemas<br/>[index.ts]"]
  node_rage_schema["Rage-click schema<br/>[rage-click.ts]"]
  node_envelope["Telemetry envelope<br/>[envelope.ts]"]
  node_traceparent["Traceparent format<br/>[traceparent.ts]"]
end

subgraph group_adapters["Client Adapters"]
  node_replay["Replay recorder scaffold<br/>[index.ts]"]
  node_react["React config scaffold<br/>[index.ts]"]
end

node_browser(("Browser app"))
node_ingest(("Telemetry endpoint"))

node_browser -->|"initializes"| node_sdk
node_sdk -->|"marks navigation"| node_activity
node_sdk -->|"creates IDs"| node_ids
node_sdk -->|"installs tracing"| node_trace
node_sdk -->|"creates queue"| node_transport
node_sdk -->|"records clicks"| node_rage
node_sdk -->|"arms detection"| node_dead
node_sdk -->|"correlates errors"| node_errors
node_sdk -->|"builds selectors"| node_selectors
node_sdk -->|"enqueues events"| node_transport
node_rage -->|"produces event"| node_rage_schema
node_contracts -->|"includes schema"| node_rage_schema
node_trace -->|"uses format"| node_traceparent
node_transport -.->|"delivers telemetry"| node_ingest
node_browser -.->|"requests recording"| node_replay
node_browser -.->|"configures SDK"| node_react

click node_sdk "https://github.com/askdepth/sdk/blob/master/packages/core/src/sdk.ts"
click node_activity "https://github.com/askdepth/sdk/blob/master/packages/core/src/activity.ts"
click node_selectors "https://github.com/askdepth/sdk/blob/master/packages/core/src/selector.ts"
click node_rage "https://github.com/askdepth/sdk/blob/master/packages/core/src/rage.ts"
click node_dead "https://github.com/askdepth/sdk/blob/master/packages/core/src/dead.ts"
click node_errors "https://github.com/askdepth/sdk/blob/master/packages/core/src/errors.ts"
click node_trace "https://github.com/askdepth/sdk/blob/master/packages/core/src/trace.ts"
click node_ids "https://github.com/askdepth/sdk/blob/master/packages/core/src/ids.ts"
click node_transport "https://github.com/askdepth/sdk/blob/master/packages/core/src/transport.ts"
click node_contracts "https://github.com/askdepth/sdk/blob/master/packages/contracts/src/anomalies/index.ts"
click node_rage_schema "https://github.com/askdepth/sdk/blob/master/packages/contracts/src/anomalies/rage-click.ts"
click node_envelope "https://github.com/askdepth/sdk/blob/master/packages/contracts/src/versioning/envelope.ts"
click node_traceparent "https://github.com/askdepth/sdk/blob/master/packages/contracts/src/trace/traceparent.ts"
click node_replay "https://github.com/askdepth/sdk/blob/master/packages/replay/src/index.ts"
click node_react "https://github.com/askdepth/sdk/blob/master/packages/react/src/index.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_sdk,node_activity,node_selectors,node_rage,node_dead,node_errors,node_trace,node_ids,node_transport,node_browser toneBlue
class node_contracts,node_rage_schema,node_envelope,node_traceparent toneAmber
class node_replay,node_react toneMint
class node_ingest toneIndigo
```

## Components

### Browser SDK

- [SDK lifecycle](https://github.com/askdepth/sdk/blob/master/packages/core/src/sdk.ts): `packages/core/src/sdk.ts`
- [Navigation activity](https://github.com/askdepth/sdk/blob/master/packages/core/src/activity.ts): `packages/core/src/activity.ts`
- [Element selectors](https://github.com/askdepth/sdk/blob/master/packages/core/src/selector.ts): `packages/core/src/selector.ts`
- [Rage-click detection](https://github.com/askdepth/sdk/blob/master/packages/core/src/rage.ts): `packages/core/src/rage.ts`
- [Dead-click detection](https://github.com/askdepth/sdk/blob/master/packages/core/src/dead.ts): `packages/core/src/dead.ts`
- [Error correlation](https://github.com/askdepth/sdk/blob/master/packages/core/src/errors.ts): `packages/core/src/errors.ts`
- [Network tracing](https://github.com/askdepth/sdk/blob/master/packages/core/src/trace.ts): `packages/core/src/trace.ts`
- [Session and trace IDs](https://github.com/askdepth/sdk/blob/master/packages/core/src/ids.ts): `packages/core/src/ids.ts`
- [Telemetry queue](https://github.com/askdepth/sdk/blob/master/packages/core/src/transport.ts): `packages/core/src/transport.ts`

### Telemetry Contracts

- [Event schemas](https://github.com/askdepth/sdk/blob/master/packages/contracts/src/anomalies/index.ts): `packages/contracts/src/anomalies/index.ts`
- [Rage-click schema](https://github.com/askdepth/sdk/blob/master/packages/contracts/src/anomalies/rage-click.ts): `packages/contracts/src/anomalies/rage-click.ts`
- [Telemetry envelope](https://github.com/askdepth/sdk/blob/master/packages/contracts/src/versioning/envelope.ts): `packages/contracts/src/versioning/envelope.ts`
- [Traceparent format](https://github.com/askdepth/sdk/blob/master/packages/contracts/src/trace/traceparent.ts): `packages/contracts/src/trace/traceparent.ts`

### Client Adapters

- [Replay recorder scaffold](https://github.com/askdepth/sdk/blob/master/packages/replay/src/index.ts): `packages/replay/src/index.ts`
- [React config scaffold](https://github.com/askdepth/sdk/blob/master/packages/react/src/index.ts): `packages/react/src/index.ts`

### Other components

- **Browser app**
- **Telemetry endpoint**

## Connections

- Browser app → SDK lifecycle: initializes
- SDK lifecycle → Navigation activity: marks navigation
- SDK lifecycle → Session and trace IDs: creates IDs
- SDK lifecycle → Network tracing: installs tracing
- SDK lifecycle → Telemetry queue: creates queue
- SDK lifecycle → Rage-click detection: records clicks
- SDK lifecycle → Dead-click detection: arms detection
- SDK lifecycle → Error correlation: correlates errors
- SDK lifecycle → Element selectors: builds selectors
- SDK lifecycle → Telemetry queue: enqueues events
- Rage-click detection → Rage-click schema: produces event
- Event schemas → Rage-click schema: includes schema
- Network tracing → Traceparent format: uses format
- Telemetry queue → Telemetry endpoint: delivers telemetry
- Browser app → Replay recorder scaffold: requests recording
- Browser app → React config scaffold: configures SDK