@tamsensedev/dataclient 0.1.4 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +175 -0
  2. package/package.json +16 -1
package/README.md CHANGED
@@ -49,6 +49,181 @@ TAMsense SDK is a strong fit for:
49
49
 
50
50
  ---
51
51
 
52
+ ## Quick start
53
+
54
+ ### Install
55
+
56
+ ```bash
57
+ npm install @tamsensedev/dataclient
58
+ ```
59
+
60
+ ### Initialize
61
+
62
+ ```js
63
+ import { DataClient } from '@tamsensedev/dataclient'
64
+
65
+ const client = new DataClient({
66
+ apiKey: 'YOUR_API_KEY'
67
+ })
68
+ ```
69
+
70
+ ### Or via CDN
71
+
72
+ ```html
73
+ <script src="https://unpkg.com/@tamsensedev/dataclient/dist/index.global.js"></script>
74
+ <script>
75
+ var client = new dataclient.DataClient({
76
+ apiKey: 'YOUR_API_KEY'
77
+ });
78
+ </script>
79
+ ```
80
+
81
+ ---
82
+
83
+ ## API
84
+
85
+ ### `new DataClient(options?)`
86
+
87
+ | Option | Type | Default | Description |
88
+ |--------|------|---------|-------------|
89
+ | `apiKey` | `string` | `''` | Your project API key |
90
+ | `idleTimeout` | `number` | `3600000` | Session idle timeout in ms (default 1h) |
91
+ | `batchSize` | `number` | `5` | Events per batch |
92
+ | `flushInterval` | `number` | `5000` | Flush interval in ms |
93
+
94
+ ### `client.setUser(userId)`
95
+
96
+ Link the current session to an authenticated user.
97
+
98
+ ```js
99
+ client.setUser('user_123')
100
+ ```
101
+
102
+ ### `client.excludeSession(reason?)`
103
+
104
+ Exclude the current session from analytics. Stops all tracking immediately.
105
+
106
+ ```js
107
+ client.excludeSession('internal user')
108
+ ```
109
+
110
+ ### Data masking
111
+
112
+ Add the `dataclient-mask` attribute to mask sensitive content in both recordings and collected events.
113
+
114
+ ```html
115
+ <div dataclient-mask>
116
+ <p>John Doe</p> <!-- "Jo******" -->
117
+ <input value="secret"> <!-- "se****" -->
118
+ </div>
119
+ ```
120
+
121
+ Passwords are always masked automatically.
122
+
123
+ ---
124
+
125
+ ## Framework examples
126
+
127
+ ### Nuxt
128
+
129
+ ```js
130
+ // plugins/dataclient.client.ts
131
+ import { DataClient } from '@tamsensedev/dataclient'
132
+
133
+ export default defineNuxtPlugin(() => {
134
+ const client = new DataClient({
135
+ apiKey: 'YOUR_API_KEY'
136
+ })
137
+ })
138
+ ```
139
+
140
+ ### React
141
+
142
+ ```js
143
+ // app.tsx
144
+ import { DataClient } from '@tamsensedev/dataclient'
145
+
146
+ const client = new DataClient({
147
+ apiKey: 'YOUR_API_KEY'
148
+ })
149
+
150
+ // After login:
151
+ client.setUser(user.id)
152
+ ```
153
+
154
+ ### Vue
155
+
156
+ ```js
157
+ // main.ts
158
+ import { DataClient } from '@tamsensedev/dataclient'
159
+
160
+ const client = new DataClient({
161
+ apiKey: 'YOUR_API_KEY'
162
+ })
163
+
164
+ app.provide('dataclient', client)
165
+ ```
166
+
167
+ ### Next.js
168
+
169
+ ```js
170
+ // app/providers.tsx
171
+ 'use client'
172
+
173
+ import { useEffect, useRef } from 'react'
174
+ import { DataClient } from '@tamsensedev/dataclient'
175
+
176
+ export function DataClientProvider() {
177
+ const clientRef = useRef<DataClient | null>(null)
178
+
179
+ useEffect(() => {
180
+ clientRef.current = new DataClient({
181
+ apiKey: 'YOUR_API_KEY'
182
+ })
183
+ }, [])
184
+
185
+ return null
186
+ }
187
+
188
+ // app/layout.tsx
189
+ import { DataClientProvider } from './providers'
190
+
191
+ export default function RootLayout({ children }) {
192
+ return (
193
+ <html>
194
+ <body>
195
+ <DataClientProvider />
196
+ {children}
197
+ </body>
198
+ </html>
199
+ )
200
+ }
201
+ ```
202
+
203
+ ### Angular
204
+
205
+ ```ts
206
+ // app.component.ts
207
+ import { Component, OnInit } from '@angular/core'
208
+ import { DataClient } from '@tamsensedev/dataclient'
209
+
210
+ @Component({
211
+ selector: 'app-root',
212
+ template: '<router-outlet></router-outlet>'
213
+ })
214
+ export class AppComponent implements OnInit {
215
+ private client: DataClient | null = null
216
+
217
+ ngOnInit() {
218
+ this.client = new DataClient({
219
+ apiKey: 'YOUR_API_KEY'
220
+ })
221
+ }
222
+ }
223
+ ```
224
+
225
+ ---
226
+
52
227
  ## What this SDK is
53
228
 
54
229
  TAMsense SDK is:
package/package.json CHANGED
@@ -1,8 +1,23 @@
1
1
  {
2
2
  "name": "@tamsensedev/dataclient",
3
3
  "type": "module",
4
- "version": "0.1.4",
4
+ "version": "0.1.6",
5
+ "description": "Session replay & product analytics SDK for web apps",
5
6
  "license": "MIT",
7
+ "homepage": "https://github.com/tamsensedev/dataclient-js#readme",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "https://github.com/tamsensedev/dataclient-js"
11
+ },
12
+ "bugs": "https://github.com/tamsensedev/dataclient-js/issues",
13
+ "keywords": [
14
+ "session-replay",
15
+ "analytics",
16
+ "rrweb",
17
+ "user-tracking",
18
+ "typescript",
19
+ "sdk"
20
+ ],
6
21
  "exports": {
7
22
  ".": {
8
23
  "types": "./dist/index.d.ts",