@abbacchio/browser-transport 0.1.0 → 0.1.2

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 +220 -220
  2. package/package.json +63 -64
package/README.md CHANGED
@@ -1,220 +1,220 @@
1
- # @abbacchio/browser-transport
2
-
3
- Browser and React logging client for Abbacchio. Intercept `console.log` and send structured logs to your Abbacchio log viewer.
4
-
5
- ## Installation
6
-
7
- ```bash
8
- npm install @abbacchio/browser-transport
9
- # or
10
- pnpm add @abbacchio/browser-transport
11
- # or
12
- yarn add @abbacchio/browser-transport
13
- ```
14
-
15
- ## Quick Start
16
-
17
- ### Option 1: Auto-capture (one line)
18
-
19
- ```javascript
20
- import '@abbacchio/browser-transport/auto'
21
-
22
- // All console.log calls now go to Abbacchio!
23
- console.log('This is captured!')
24
- console.error('Errors too!')
25
- ```
26
-
27
- Configure via global variable:
28
-
29
- ```html
30
- <script>
31
- window.__ABBACCHIO_CONFIG__ = {
32
- url: 'http://localhost:4000/api/logs',
33
- channel: 'my-app',
34
- appName: 'my-web-app',
35
- }
36
- </script>
37
- <script type="module">
38
- import '@abbacchio/browser-transport/auto'
39
- </script>
40
- ```
41
-
42
- ### Option 2: Manual console interception
43
-
44
- ```javascript
45
- import { interceptConsole, stopInterceptConsole } from '@abbacchio/browser-transport'
46
-
47
- // Start capturing
48
- interceptConsole({
49
- url: 'http://localhost:4000/api/logs',
50
- channel: 'my-frontend',
51
- appName: 'my-app',
52
- secretKey: 'optional-encryption-key', // optional
53
- })
54
-
55
- // All console methods are now captured
56
- console.log('Captured!')
57
- console.warn('Warning captured!')
58
- console.error('Error captured!')
59
-
60
- // Stop capturing when done
61
- stopInterceptConsole()
62
- ```
63
-
64
- ### Option 3: Structured Logger
65
-
66
- ```javascript
67
- import { createLogger } from '@abbacchio/browser-transport'
68
-
69
- const log = createLogger({
70
- url: 'http://localhost:4000/api/logs',
71
- channel: 'my-app',
72
- name: 'my-service',
73
- })
74
-
75
- log.info('User logged in', { userId: 123 })
76
- log.warn('Rate limit approaching', { current: 95, max: 100 })
77
- log.error('Failed to fetch', { endpoint: '/api/users', status: 500 })
78
-
79
- // Create child logger with additional context
80
- const requestLog = log.child({ requestId: 'abc-123' })
81
- requestLog.info('Processing request')
82
- ```
83
-
84
- ### Option 4: React Provider
85
-
86
- ```tsx
87
- import { AbbacchioProvider, useLogger } from '@abbacchio/browser-transport/react'
88
-
89
- // Wrap your app
90
- function App() {
91
- return (
92
- <AbbacchioProvider
93
- url="http://localhost:4000/api/logs"
94
- channel="my-react-app"
95
- captureConsole // Optional: also capture console.log
96
- >
97
- <MyApp />
98
- </AbbacchioProvider>
99
- )
100
- }
101
-
102
- // Use in any component
103
- function MyComponent() {
104
- const log = useLogger()
105
-
106
- const handleClick = () => {
107
- log.info('Button clicked', { component: 'MyComponent' })
108
- }
109
-
110
- return <button onClick={handleClick}>Click me</button>
111
- }
112
- ```
113
-
114
- ## API Reference
115
-
116
- ### `interceptConsole(options)`
117
-
118
- Start intercepting console methods.
119
-
120
- ```typescript
121
- interface ConsoleInterceptorOptions {
122
- url?: string // Server URL (default: 'http://localhost:4000/api/logs')
123
- channel?: string // Channel name (default: 'default')
124
- appName?: string // Logger name (default: 'browser')
125
- secretKey?: string // Encryption key (optional)
126
- batchSize?: number // Logs per batch (default: 10)
127
- flushInterval?: number // Ms between flushes (default: 1000)
128
- passthrough?: boolean // Still log to console (default: true)
129
- includeUrl?: boolean // Include page URL (default: true)
130
- }
131
- ```
132
-
133
- ### `createLogger(options)`
134
-
135
- Create a structured logger instance.
136
-
137
- ```typescript
138
- interface LoggerOptions {
139
- url?: string
140
- channel?: string
141
- name?: string // Logger name/namespace
142
- level?: number | 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal'
143
- secretKey?: string
144
- batchSize?: number
145
- flushInterval?: number
146
- }
147
-
148
- const log = createLogger(options)
149
-
150
- log.trace(msg, data?)
151
- log.debug(msg, data?)
152
- log.info(msg, data?)
153
- log.warn(msg, data?)
154
- log.error(msg, data?)
155
- log.fatal(msg, data?)
156
-
157
- // Or with data first (Pino style)
158
- log.info({ userId: 123 }, 'User action')
159
- ```
160
-
161
- ### `AbbacchioProvider` (React)
162
-
163
- React context provider for logging.
164
-
165
- ```tsx
166
- <AbbacchioProvider
167
- url="..."
168
- channel="..."
169
- name="..."
170
- captureConsole={true} // Also intercept console.log
171
- >
172
- {children}
173
- </AbbacchioProvider>
174
- ```
175
-
176
- ### `useLogger()` / `useAbbacchio()` (React Hooks)
177
-
178
- ```tsx
179
- const log = useLogger() // Get logger instance
180
- const { info, warn, error } = useAbbacchio() // Get logging methods
181
- ```
182
-
183
- ## Encryption
184
-
185
- All options support optional end-to-end encryption:
186
-
187
- ```javascript
188
- import { createLogger, generateKey } from '@abbacchio/browser-transport'
189
-
190
- // Generate a key (do this once, store securely)
191
- const key = generateKey()
192
- console.log('Your key:', key)
193
-
194
- // Use the key for encryption
195
- const log = createLogger({
196
- channel: 'my-app',
197
- secretKey: key,
198
- })
199
-
200
- log.info('This is encrypted!')
201
- ```
202
-
203
- The encrypted logs can only be decrypted in the Abbacchio dashboard by entering the same key.
204
-
205
- ## Log Levels
206
-
207
- Compatible with Pino log levels:
208
-
209
- | Level | Number |
210
- |-------|--------|
211
- | trace | 10 |
212
- | debug | 20 |
213
- | info | 30 |
214
- | warn | 40 |
215
- | error | 50 |
216
- | fatal | 60 |
217
-
218
- ## License
219
-
220
- MIT
1
+ # @abbacchio/browser-transport
2
+
3
+ Browser and React logging client for Abbacchio. Intercept `console.log` and send structured logs to your Abbacchio log viewer.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @abbacchio/browser-transport
9
+ # or
10
+ pnpm add @abbacchio/browser-transport
11
+ # or
12
+ yarn add @abbacchio/browser-transport
13
+ ```
14
+
15
+ ## Quick Start
16
+
17
+ ### Option 1: Auto-capture (one line)
18
+
19
+ ```javascript
20
+ import '@abbacchio/browser-transport/auto'
21
+
22
+ // All console.log calls now go to Abbacchio!
23
+ console.log('This is captured!')
24
+ console.error('Errors too!')
25
+ ```
26
+
27
+ Configure via global variable:
28
+
29
+ ```html
30
+ <script>
31
+ window.__ABBACCHIO_CONFIG__ = {
32
+ url: 'http://localhost:4000/api/logs',
33
+ channel: 'my-app',
34
+ appName: 'my-web-app',
35
+ }
36
+ </script>
37
+ <script type="module">
38
+ import '@abbacchio/browser-transport/auto'
39
+ </script>
40
+ ```
41
+
42
+ ### Option 2: Manual console interception
43
+
44
+ ```javascript
45
+ import { interceptConsole, stopInterceptConsole } from '@abbacchio/browser-transport'
46
+
47
+ // Start capturing
48
+ interceptConsole({
49
+ url: 'http://localhost:4000/api/logs',
50
+ channel: 'my-frontend',
51
+ appName: 'my-app',
52
+ secretKey: 'optional-encryption-key', // optional
53
+ })
54
+
55
+ // All console methods are now captured
56
+ console.log('Captured!')
57
+ console.warn('Warning captured!')
58
+ console.error('Error captured!')
59
+
60
+ // Stop capturing when done
61
+ stopInterceptConsole()
62
+ ```
63
+
64
+ ### Option 3: Structured Logger
65
+
66
+ ```javascript
67
+ import { createLogger } from '@abbacchio/browser-transport'
68
+
69
+ const log = createLogger({
70
+ url: 'http://localhost:4000/api/logs',
71
+ channel: 'my-app',
72
+ name: 'my-service',
73
+ })
74
+
75
+ log.info('User logged in', { userId: 123 })
76
+ log.warn('Rate limit approaching', { current: 95, max: 100 })
77
+ log.error('Failed to fetch', { endpoint: '/api/users', status: 500 })
78
+
79
+ // Create child logger with additional context
80
+ const requestLog = log.child({ requestId: 'abc-123' })
81
+ requestLog.info('Processing request')
82
+ ```
83
+
84
+ ### Option 4: React Provider
85
+
86
+ ```tsx
87
+ import { AbbacchioProvider, useLogger } from '@abbacchio/browser-transport/react'
88
+
89
+ // Wrap your app
90
+ function App() {
91
+ return (
92
+ <AbbacchioProvider
93
+ url="http://localhost:4000/api/logs"
94
+ channel="my-react-app"
95
+ captureConsole // Optional: also capture console.log
96
+ >
97
+ <MyApp />
98
+ </AbbacchioProvider>
99
+ )
100
+ }
101
+
102
+ // Use in any component
103
+ function MyComponent() {
104
+ const log = useLogger()
105
+
106
+ const handleClick = () => {
107
+ log.info('Button clicked', { component: 'MyComponent' })
108
+ }
109
+
110
+ return <button onClick={handleClick}>Click me</button>
111
+ }
112
+ ```
113
+
114
+ ## API Reference
115
+
116
+ ### `interceptConsole(options)`
117
+
118
+ Start intercepting console methods.
119
+
120
+ ```typescript
121
+ interface ConsoleInterceptorOptions {
122
+ url?: string // Server URL (default: 'http://localhost:4000/api/logs')
123
+ channel?: string // Channel name (default: 'default')
124
+ appName?: string // Logger name (default: 'browser')
125
+ secretKey?: string // Encryption key (optional)
126
+ batchSize?: number // Logs per batch (default: 10)
127
+ flushInterval?: number // Ms between flushes (default: 1000)
128
+ passthrough?: boolean // Still log to console (default: true)
129
+ includeUrl?: boolean // Include page URL (default: true)
130
+ }
131
+ ```
132
+
133
+ ### `createLogger(options)`
134
+
135
+ Create a structured logger instance.
136
+
137
+ ```typescript
138
+ interface LoggerOptions {
139
+ url?: string
140
+ channel?: string
141
+ name?: string // Logger name/namespace
142
+ level?: number | 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal'
143
+ secretKey?: string
144
+ batchSize?: number
145
+ flushInterval?: number
146
+ }
147
+
148
+ const log = createLogger(options)
149
+
150
+ log.trace(msg, data?)
151
+ log.debug(msg, data?)
152
+ log.info(msg, data?)
153
+ log.warn(msg, data?)
154
+ log.error(msg, data?)
155
+ log.fatal(msg, data?)
156
+
157
+ // Or with data first (Pino style)
158
+ log.info({ userId: 123 }, 'User action')
159
+ ```
160
+
161
+ ### `AbbacchioProvider` (React)
162
+
163
+ React context provider for logging.
164
+
165
+ ```tsx
166
+ <AbbacchioProvider
167
+ url="..."
168
+ channel="..."
169
+ name="..."
170
+ captureConsole={true} // Also intercept console.log
171
+ >
172
+ {children}
173
+ </AbbacchioProvider>
174
+ ```
175
+
176
+ ### `useLogger()` / `useAbbacchio()` (React Hooks)
177
+
178
+ ```tsx
179
+ const log = useLogger() // Get logger instance
180
+ const { info, warn, error } = useAbbacchio() // Get logging methods
181
+ ```
182
+
183
+ ## Encryption
184
+
185
+ All options support optional end-to-end encryption:
186
+
187
+ ```javascript
188
+ import { createLogger, generateKey } from '@abbacchio/browser-transport'
189
+
190
+ // Generate a key (do this once, store securely)
191
+ const key = generateKey()
192
+ console.log('Your key:', key)
193
+
194
+ // Use the key for encryption
195
+ const log = createLogger({
196
+ channel: 'my-app',
197
+ secretKey: key,
198
+ })
199
+
200
+ log.info('This is encrypted!')
201
+ ```
202
+
203
+ The encrypted logs can only be decrypted in the Abbacchio dashboard by entering the same key.
204
+
205
+ ## Log Levels
206
+
207
+ Compatible with Pino log levels:
208
+
209
+ | Level | Number |
210
+ |-------|--------|
211
+ | trace | 10 |
212
+ | debug | 20 |
213
+ | info | 30 |
214
+ | warn | 40 |
215
+ | error | 50 |
216
+ | fatal | 60 |
217
+
218
+ ## License
219
+
220
+ MIT
package/package.json CHANGED
@@ -1,64 +1,63 @@
1
- {
2
- "name": "@abbacchio/browser-transport",
3
- "version": "0.1.0",
4
- "description": "Browser and React logging client for Abbacchio - intercept console.log and send to your log viewer",
5
- "type": "module",
6
- "main": "./dist/index.js",
7
- "module": "./dist/index.js",
8
- "types": "./dist/index.d.ts",
9
- "exports": {
10
- ".": {
11
- "types": "./dist/index.d.ts",
12
- "import": "./dist/index.js"
13
- },
14
- "./react": {
15
- "types": "./dist/react/index.d.ts",
16
- "import": "./dist/react/index.js"
17
- },
18
- "./auto": {
19
- "types": "./dist/auto.d.ts",
20
- "import": "./dist/auto.js"
21
- }
22
- },
23
- "files": [
24
- "dist",
25
- "README.md"
26
- ],
27
- "scripts": {
28
- "build": "tsc",
29
- "dev": "tsc --watch",
30
- "clean": "rimraf dist",
31
- "prepublishOnly": "npm run build"
32
- },
33
- "keywords": [
34
- "logging",
35
- "console",
36
- "browser",
37
- "react",
38
- "pino",
39
- "abbacchio",
40
- "log-viewer",
41
- "debugging"
42
- ],
43
- "author": "",
44
- "license": "MIT",
45
- "peerDependencies": {
46
- "react": ">=17.0.0"
47
- },
48
- "peerDependenciesMeta": {
49
- "react": {
50
- "optional": true
51
- }
52
- },
53
- "devDependencies": {
54
- "@types/react": "^18.2.0",
55
- "react": "^18.2.0",
56
- "rimraf": "^5.0.0",
57
- "typescript": "^5.0.0"
58
- },
59
- "repository": {
60
- "type": "git",
61
- "url": "https://github.com/your-org/abbacchio",
62
- "directory": "packages/browser-transport"
63
- }
64
- }
1
+ {
2
+ "name": "@abbacchio/browser-transport",
3
+ "version": "0.1.2",
4
+ "description": "Browser and React logging client for Abbacchio - intercept console.log and send to your log viewer",
5
+ "type": "module",
6
+ "main": "./dist/index.js",
7
+ "module": "./dist/index.js",
8
+ "types": "./dist/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "types": "./dist/index.d.ts",
12
+ "import": "./dist/index.js"
13
+ },
14
+ "./react": {
15
+ "types": "./dist/react/index.d.ts",
16
+ "import": "./dist/react/index.js"
17
+ },
18
+ "./auto": {
19
+ "types": "./dist/auto.d.ts",
20
+ "import": "./dist/auto.js"
21
+ }
22
+ },
23
+ "files": [
24
+ "dist",
25
+ "README.md"
26
+ ],
27
+ "keywords": [
28
+ "logging",
29
+ "console",
30
+ "browser",
31
+ "react",
32
+ "pino",
33
+ "abbacchio",
34
+ "log-viewer",
35
+ "debugging"
36
+ ],
37
+ "author": "",
38
+ "license": "MIT",
39
+ "peerDependencies": {
40
+ "react": ">=17.0.0"
41
+ },
42
+ "peerDependenciesMeta": {
43
+ "react": {
44
+ "optional": true
45
+ }
46
+ },
47
+ "devDependencies": {
48
+ "@types/react": "^18.2.0",
49
+ "react": "^18.2.0",
50
+ "rimraf": "^5.0.0",
51
+ "typescript": "^5.0.0"
52
+ },
53
+ "repository": {
54
+ "type": "git",
55
+ "url": "https://github.com/your-org/abbacchio",
56
+ "directory": "packages/browser-transport"
57
+ },
58
+ "scripts": {
59
+ "build": "tsc",
60
+ "dev": "tsc --watch",
61
+ "clean": "rimraf dist"
62
+ }
63
+ }