flowtrace-omega 1.0.0
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.
- package/dashboard/index.html +2045 -0
- package/dashboard/public/docs.html +656 -0
- package/dashboard/public/favicon.png +0 -0
- package/dashboard/public/hero-bg.png +0 -0
- package/dashboard/public/how.html +337 -0
- package/dashboard/public/index.html +637 -0
- package/dashboard/server.js +152 -0
- package/index.js +115 -0
- package/package.json +56 -0
- package/src/context.js +74 -0
- package/src/exporter.js +112 -0
- package/src/integrations/graphql.js +101 -0
- package/src/integrations/http_client.js +107 -0
- package/src/integrations/index.js +26 -0
- package/src/integrations/mysql2.js +67 -0
- package/src/integrations/pg.js +79 -0
- package/src/otlp.js +120 -0
- package/src/wrapper.js +123 -0
|
@@ -0,0 +1,656 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>Documentation | FlowTrace</title>
|
|
8
|
+
|
|
9
|
+
<link rel="icon" type="image/png" href="favicon.png">
|
|
10
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
11
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
12
|
+
<link
|
|
13
|
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Outfit:wght@500;600;700;800&display=swap"
|
|
14
|
+
rel="stylesheet">
|
|
15
|
+
|
|
16
|
+
<style>
|
|
17
|
+
:root {
|
|
18
|
+
--neutral-silver: #e2e8f0;
|
|
19
|
+
--deep-charcoal: #050505;
|
|
20
|
+
--amber-flame: #ffb703;
|
|
21
|
+
--princeton-orange: #fb8500;
|
|
22
|
+
|
|
23
|
+
--bg: var(--deep-charcoal);
|
|
24
|
+
--text: #f8fafc;
|
|
25
|
+
--text-muted: #94a3b8;
|
|
26
|
+
--sidebar-bg: #0a0a0b;
|
|
27
|
+
--border: rgba(255, 255, 255, 0.05);
|
|
28
|
+
|
|
29
|
+
--font-ui: 'Inter', sans-serif;
|
|
30
|
+
--font-display: 'Outfit', sans-serif;
|
|
31
|
+
--font-mono: 'JetBrains Mono', monospace;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
* {
|
|
35
|
+
box-sizing: border-box;
|
|
36
|
+
margin: 0;
|
|
37
|
+
padding: 0;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
body {
|
|
41
|
+
background-color: var(--bg);
|
|
42
|
+
background-image:
|
|
43
|
+
linear-gradient(rgba(5, 5, 5, 0.90), rgba(5, 5, 5, 0.90)),
|
|
44
|
+
url('hero-bg.png');
|
|
45
|
+
background-size: cover;
|
|
46
|
+
background-position: center;
|
|
47
|
+
background-attachment: fixed;
|
|
48
|
+
color: var(--text);
|
|
49
|
+
font-family: var(--font-ui);
|
|
50
|
+
line-height: 1.6;
|
|
51
|
+
display: grid;
|
|
52
|
+
grid-template-columns: 300px 1fr;
|
|
53
|
+
min-height: 100vh;
|
|
54
|
+
scrollbar-width: none;
|
|
55
|
+
-ms-overflow-style: none;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
body::-webkit-scrollbar {
|
|
59
|
+
display: none;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
aside {
|
|
63
|
+
background: var(--sidebar-bg);
|
|
64
|
+
border-right: 1px solid var(--border);
|
|
65
|
+
padding: 40px;
|
|
66
|
+
position: sticky;
|
|
67
|
+
top: 0;
|
|
68
|
+
height: 100vh;
|
|
69
|
+
overflow-y: auto;
|
|
70
|
+
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
71
|
+
z-index: 1000;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.logo {
|
|
75
|
+
font-family: var(--font-display);
|
|
76
|
+
font-size: 20px;
|
|
77
|
+
font-weight: 800;
|
|
78
|
+
color: #fff;
|
|
79
|
+
text-decoration: none;
|
|
80
|
+
margin-bottom: 40px;
|
|
81
|
+
display: block;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.logo span {
|
|
85
|
+
background: linear-gradient(135deg, var(--amber-flame), var(--princeton-orange));
|
|
86
|
+
-webkit-background-clip: text;
|
|
87
|
+
background-clip: text;
|
|
88
|
+
-webkit-text-fill-color: transparent;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.bun-menu {
|
|
92
|
+
display: none;
|
|
93
|
+
position: fixed;
|
|
94
|
+
top: 20px;
|
|
95
|
+
right: 20px;
|
|
96
|
+
z-index: 1100;
|
|
97
|
+
width: 44px;
|
|
98
|
+
height: 44px;
|
|
99
|
+
background: var(--princeton-orange);
|
|
100
|
+
border-radius: 10px;
|
|
101
|
+
border: none;
|
|
102
|
+
align-items: center;
|
|
103
|
+
justify-content: center;
|
|
104
|
+
flex-direction: column;
|
|
105
|
+
gap: 4px;
|
|
106
|
+
cursor: pointer;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.bun-bar {
|
|
110
|
+
width: 24px;
|
|
111
|
+
height: 2px;
|
|
112
|
+
background: white;
|
|
113
|
+
transition: 0.3s;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@media (max-width: 1024px) {
|
|
117
|
+
body {
|
|
118
|
+
display: block;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
aside {
|
|
122
|
+
position: fixed;
|
|
123
|
+
left: 0;
|
|
124
|
+
top: 0;
|
|
125
|
+
width: 280px;
|
|
126
|
+
transform: translateX(-100%);
|
|
127
|
+
box-shadow: 20px 0 50px rgba(0, 0, 0, 0.5);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
aside.open {
|
|
131
|
+
transform: translateX(0);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.bun-menu {
|
|
135
|
+
display: flex;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
main {
|
|
139
|
+
padding: 100px 24px 40px;
|
|
140
|
+
width: 100%;
|
|
141
|
+
max-width: none;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.nav-group {
|
|
146
|
+
margin-bottom: 32px;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.nav-label {
|
|
150
|
+
font-size: 11px;
|
|
151
|
+
font-weight: 700;
|
|
152
|
+
text-transform: uppercase;
|
|
153
|
+
letter-spacing: 1px;
|
|
154
|
+
color: var(--text-muted);
|
|
155
|
+
margin-bottom: 12px;
|
|
156
|
+
opacity: 0.5;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.nav-link {
|
|
160
|
+
display: block;
|
|
161
|
+
color: var(--text-muted);
|
|
162
|
+
text-decoration: none;
|
|
163
|
+
font-size: 14px;
|
|
164
|
+
padding: 10px 0;
|
|
165
|
+
transition: var(--transition);
|
|
166
|
+
border-left: 2px solid transparent;
|
|
167
|
+
padding-left: 0;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.nav-link:hover {
|
|
171
|
+
color: var(--amber-flame);
|
|
172
|
+
padding-left: 8px;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.nav-link.active {
|
|
176
|
+
color: var(--princeton-orange);
|
|
177
|
+
font-weight: 600;
|
|
178
|
+
border-left-color: var(--princeton-orange);
|
|
179
|
+
padding-left: 12px;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
main {
|
|
183
|
+
padding: 80px 120px;
|
|
184
|
+
max-width: 1000px;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
section {
|
|
188
|
+
margin-bottom: 80px;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
h1 {
|
|
192
|
+
font-family: var(--font-display);
|
|
193
|
+
font-size: 48px;
|
|
194
|
+
font-weight: 800;
|
|
195
|
+
margin-bottom: 24px;
|
|
196
|
+
color: #fff;
|
|
197
|
+
letter-spacing: -1px;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
h2 {
|
|
201
|
+
font-family: var(--font-display);
|
|
202
|
+
font-size: 32px;
|
|
203
|
+
font-weight: 700;
|
|
204
|
+
margin-bottom: 20px;
|
|
205
|
+
color: var(--neutral-silver);
|
|
206
|
+
border-bottom: 1px solid var(--border);
|
|
207
|
+
padding-bottom: 12px;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
h3 {
|
|
211
|
+
font-size: 20px;
|
|
212
|
+
font-weight: 600;
|
|
213
|
+
margin: 32px 0 16px;
|
|
214
|
+
color: #fff;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
p {
|
|
218
|
+
margin-bottom: 20px;
|
|
219
|
+
color: var(--text-muted);
|
|
220
|
+
font-size: 16px;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.code-block {
|
|
224
|
+
background: #080808;
|
|
225
|
+
border: 1px solid var(--border);
|
|
226
|
+
border-radius: 8px;
|
|
227
|
+
padding: 24px;
|
|
228
|
+
font-family: var(--font-mono);
|
|
229
|
+
font-size: 14px;
|
|
230
|
+
margin: 24px 0;
|
|
231
|
+
overflow-x: auto;
|
|
232
|
+
color: #e2e8f0;
|
|
233
|
+
line-height: 1.6;
|
|
234
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.code-block .keyword {
|
|
238
|
+
color: var(--princeton-orange);
|
|
239
|
+
font-weight: 600;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.code-block .fn {
|
|
243
|
+
color: var(--amber-flame);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.code-block .str {
|
|
247
|
+
color: #fff;
|
|
248
|
+
opacity: 0.9;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.code-block .comment {
|
|
252
|
+
color: #64748b;
|
|
253
|
+
font-style: italic;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.badge {
|
|
257
|
+
display: inline-block;
|
|
258
|
+
padding: 4px 12px;
|
|
259
|
+
border-radius: 99px;
|
|
260
|
+
font-size: 12px;
|
|
261
|
+
font-weight: 700;
|
|
262
|
+
margin-right: 8px;
|
|
263
|
+
text-transform: uppercase;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.badge-node {
|
|
267
|
+
background: rgba(52, 211, 153, 0.1);
|
|
268
|
+
color: #2dd4bf;
|
|
269
|
+
border: 1px solid rgba(52, 211, 153, 0.2);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.badge-java {
|
|
273
|
+
background: rgba(251, 133, 0, 0.1);
|
|
274
|
+
color: var(--princeton-orange);
|
|
275
|
+
border: 1px solid rgba(251, 133, 0, 0.2);
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.feature-card {
|
|
279
|
+
background: rgba(255, 255, 255, 0.02);
|
|
280
|
+
border: 1px solid var(--border);
|
|
281
|
+
padding: 32px;
|
|
282
|
+
border-radius: 12px;
|
|
283
|
+
margin: 32px 0;
|
|
284
|
+
|
|
285
|
+
aside.open {
|
|
286
|
+
transform: translateX(0);
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.bun-menu {
|
|
290
|
+
display: flex;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
main {
|
|
294
|
+
padding: 100px 24px 40px;
|
|
295
|
+
width: 100%;
|
|
296
|
+
max-width: none;
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
main {
|
|
301
|
+
padding: 80px 120px;
|
|
302
|
+
max-width: 1100px;
|
|
303
|
+
margin: 0 auto;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
section {
|
|
307
|
+
margin-bottom: 120px;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
h1 {
|
|
311
|
+
font-family: var(--font-display);
|
|
312
|
+
font-size: 56px;
|
|
313
|
+
font-weight: 800;
|
|
314
|
+
margin-bottom: 32px;
|
|
315
|
+
color: #fff;
|
|
316
|
+
letter-spacing: -2px;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
h2 {
|
|
320
|
+
font-family: var(--font-display);
|
|
321
|
+
font-size: 36px;
|
|
322
|
+
font-weight: 700;
|
|
323
|
+
margin-bottom: 24px;
|
|
324
|
+
color: var(--neutral-silver);
|
|
325
|
+
border-bottom: 1px solid var(--border);
|
|
326
|
+
padding-bottom: 16px;
|
|
327
|
+
position: relative;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
h2::after {
|
|
331
|
+
content: '';
|
|
332
|
+
position: absolute;
|
|
333
|
+
left: 0;
|
|
334
|
+
bottom: -1px;
|
|
335
|
+
width: 60px;
|
|
336
|
+
height: 2px;
|
|
337
|
+
background: var(--princeton-orange);
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
h3 {
|
|
341
|
+
font-size: 22px;
|
|
342
|
+
font-weight: 600;
|
|
343
|
+
margin: 48px 0 20px;
|
|
344
|
+
color: #fff;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
h4 {
|
|
348
|
+
font-size: 16px;
|
|
349
|
+
font-weight: 700;
|
|
350
|
+
text-transform: uppercase;
|
|
351
|
+
color: var(--amber-flame);
|
|
352
|
+
letter-spacing: 1px;
|
|
353
|
+
margin-bottom: 12px;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
p {
|
|
357
|
+
margin-bottom: 24px;
|
|
358
|
+
color: var(--text-muted);
|
|
359
|
+
font-size: 17px;
|
|
360
|
+
line-height: 1.8;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
ul,
|
|
364
|
+
ol {
|
|
365
|
+
margin-left: 24px;
|
|
366
|
+
margin-bottom: 24px;
|
|
367
|
+
color: var(--text-muted);
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
li {
|
|
371
|
+
margin-bottom: 12px;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.code-block {
|
|
375
|
+
background: #080808;
|
|
376
|
+
border: 1px solid var(--border);
|
|
377
|
+
border-radius: 12px;
|
|
378
|
+
padding: 32px;
|
|
379
|
+
font-family: var(--font-mono);
|
|
380
|
+
font-size: 14px;
|
|
381
|
+
margin: 32px 0;
|
|
382
|
+
overflow-x: auto;
|
|
383
|
+
color: #e2e8f0;
|
|
384
|
+
line-height: 1.6;
|
|
385
|
+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
.code-block .keyword {
|
|
389
|
+
color: var(--princeton-orange);
|
|
390
|
+
font-weight: 600;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.code-block .fn {
|
|
394
|
+
color: var(--amber-flame);
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
.code-block .str {
|
|
398
|
+
color: #fff;
|
|
399
|
+
opacity: 0.85;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
.code-block .comment {
|
|
403
|
+
color: #546e7a;
|
|
404
|
+
font-style: italic;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
.badge {
|
|
408
|
+
display: inline-block;
|
|
409
|
+
padding: 4px 12px;
|
|
410
|
+
border-radius: 99px;
|
|
411
|
+
font-size: 12px;
|
|
412
|
+
font-weight: 700;
|
|
413
|
+
margin-right: 8px;
|
|
414
|
+
text-transform: uppercase;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.badge-node {
|
|
418
|
+
background: rgba(251, 133, 0, 0.1);
|
|
419
|
+
color: var(--princeton-orange);
|
|
420
|
+
border: 1px solid var(--princeton-orange);
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
.badge-java {
|
|
424
|
+
background: rgba(251, 133, 0, 0.1);
|
|
425
|
+
color: var(--princeton-orange);
|
|
426
|
+
border: 1px solid var(--princeton-orange);
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
.feature-card {
|
|
430
|
+
background: rgba(255, 255, 255, 0.02);
|
|
431
|
+
border: 1px solid var(--border);
|
|
432
|
+
padding: 40px;
|
|
433
|
+
border-radius: 16px;
|
|
434
|
+
margin: 40px 0;
|
|
435
|
+
position: relative;
|
|
436
|
+
overflow: hidden;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
.feature-card::before {
|
|
440
|
+
content: '';
|
|
441
|
+
position: absolute;
|
|
442
|
+
top: 0;
|
|
443
|
+
left: 0;
|
|
444
|
+
width: 4px;
|
|
445
|
+
height: 100%;
|
|
446
|
+
background: var(--princeton-orange);
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
.feature-card strong {
|
|
450
|
+
color: #fff;
|
|
451
|
+
display: block;
|
|
452
|
+
margin-bottom: 8px;
|
|
453
|
+
font-size: 18px;
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
.nav-group {
|
|
457
|
+
margin-bottom: 40px;
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
.nav-label {
|
|
461
|
+
font-size: 12px;
|
|
462
|
+
font-weight: 700;
|
|
463
|
+
text-transform: uppercase;
|
|
464
|
+
letter-spacing: 1.5px;
|
|
465
|
+
color: var(--text-muted);
|
|
466
|
+
margin-bottom: 16px;
|
|
467
|
+
opacity: 0.6;
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
.nav-link {
|
|
471
|
+
display: block;
|
|
472
|
+
color: var(--text-muted);
|
|
473
|
+
text-decoration: none;
|
|
474
|
+
font-size: 14px;
|
|
475
|
+
padding: 12px 0;
|
|
476
|
+
transition: 0.2s;
|
|
477
|
+
border-left: 2px solid transparent;
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
.nav-link:hover {
|
|
481
|
+
color: var(--amber-flame);
|
|
482
|
+
padding-left: 12px;
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
.nav-link.active {
|
|
486
|
+
color: var(--princeton-orange);
|
|
487
|
+
font-weight: 700;
|
|
488
|
+
border-left-color: var(--princeton-orange);
|
|
489
|
+
padding-left: 16px;
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
.nav-link.home-btn {
|
|
493
|
+
opacity: 0.9;
|
|
494
|
+
margin-bottom: 32px;
|
|
495
|
+
color: #fff;
|
|
496
|
+
border-bottom: 1px solid var(--border);
|
|
497
|
+
padding-bottom: 16px;
|
|
498
|
+
}
|
|
499
|
+
</style>
|
|
500
|
+
</head>
|
|
501
|
+
|
|
502
|
+
<body>
|
|
503
|
+
|
|
504
|
+
<button class="bun-menu" onclick="toggleSidebar()">
|
|
505
|
+
<div class="bun-bar"></div>
|
|
506
|
+
<div class="bun-bar"></div>
|
|
507
|
+
<div class="bun-bar"></div>
|
|
508
|
+
</button>
|
|
509
|
+
|
|
510
|
+
<aside id="sidebar">
|
|
511
|
+
<a href="index.html" class="nav-link home-btn">← Back to Home</a>
|
|
512
|
+
<a href="index.html" class="logo">⚡ Flow<span>Trace</span></a>
|
|
513
|
+
|
|
514
|
+
<div class="nav-group">
|
|
515
|
+
<div class="nav-label">Core</div>
|
|
516
|
+
<a href="#intro" class="nav-link active">Introduction</a>
|
|
517
|
+
<a href="#lifecycle" class="nav-link">Architecture & Lifecycle</a>
|
|
518
|
+
</div>
|
|
519
|
+
|
|
520
|
+
<div class="nav-group">
|
|
521
|
+
<div class="nav-label">Integration</div>
|
|
522
|
+
<a href="#node-sdk" class="nav-link">NPM Node.js (ESM/CJS)</a>
|
|
523
|
+
<a href="#java-agent" class="nav-link">Java Agent JVM Flags</a>
|
|
524
|
+
<a href="#spring-boot" class="nav-link">Spring Boot Integration</a>
|
|
525
|
+
<a href="#otlp" class="nav-link">OTLP Cloud Exporters</a>
|
|
526
|
+
</div>
|
|
527
|
+
|
|
528
|
+
<div class="nav-group">
|
|
529
|
+
<div class="nav-label">Advanced</div>
|
|
530
|
+
<a href="#api-tester" class="nav-link">API & Proxy Testing</a>
|
|
531
|
+
<a href="#graphql" class="nav-link">GraphQL Spans</a>
|
|
532
|
+
<a href="#manual" class="nav-link">Manual Instrumentation</a>
|
|
533
|
+
</div>
|
|
534
|
+
</aside>
|
|
535
|
+
|
|
536
|
+
<main>
|
|
537
|
+
<section id="intro">
|
|
538
|
+
<h1>Introduction</h1>
|
|
539
|
+
<p>FlowTrace is an end-to-end distributed tracing and API observability platform. Designed for modern microservice
|
|
540
|
+
architectures, it bridges the gap between raw telemetry and human-readable system logic.</p>
|
|
541
|
+
</section>
|
|
542
|
+
|
|
543
|
+
<section id="lifecycle">
|
|
544
|
+
<h2>Architecture & Lifecycle</h2>
|
|
545
|
+
<p>FlowTrace operates by intercepting requests at the network boundary and propagating trace context across
|
|
546
|
+
service boundaries using W3C Traceparent headers.</p>
|
|
547
|
+
<ul>
|
|
548
|
+
<li><strong>Ingestion:</strong> SDKs and Agents capture spans asynchronously.</li>
|
|
549
|
+
<li><strong>Processing:</strong> The FlowTrace collector aggregates spans into coherent request flows.</li>
|
|
550
|
+
<li><strong>Visualization:</strong> Raw data is mapped into Mermaid sequence diagrams for instant debugging.
|
|
551
|
+
</li>
|
|
552
|
+
</ul>
|
|
553
|
+
</section>
|
|
554
|
+
|
|
555
|
+
<section id="node-sdk">
|
|
556
|
+
<h2><span class="badge badge-node">NPM</span> Node.js (ESM/CJS)</h2>
|
|
557
|
+
<p>The <code>flowtrace</code> package supports both CommonJS and ESM environments with zero-config
|
|
558
|
+
auto-instrumentation.</p>
|
|
559
|
+
<h3>CommonJS Initialization</h3>
|
|
560
|
+
<div class="code-block">
|
|
561
|
+
<span class="keyword">const</span> FlowTrace = <span class="fn">require</span>(<span
|
|
562
|
+
class="str">'flowtrace'</span>);<br>
|
|
563
|
+
FlowTrace.<span class="fn">start</span>({ serviceName: <span class="str">'api-gateway'</span> });
|
|
564
|
+
</div>
|
|
565
|
+
<h3>ESM Initialization</h3>
|
|
566
|
+
<div class="code-block">
|
|
567
|
+
<span class="keyword">import</span> FlowTrace <span class="keyword">from</span> <span
|
|
568
|
+
class="str">'flowtrace'</span>;<br>
|
|
569
|
+
FlowTrace.<span class="fn">start</span>({ serviceName: <span class="str">'api-gateway'</span> });
|
|
570
|
+
</div>
|
|
571
|
+
</section>
|
|
572
|
+
|
|
573
|
+
<section id="java-agent">
|
|
574
|
+
<h2><span class="badge badge-java">JVM</span> Java Agent JVM Flags</h2>
|
|
575
|
+
<p>Attach the agent at runtime to capture JDBC, HTTP, and Threading telemetry without modifying your source code.
|
|
576
|
+
</p>
|
|
577
|
+
<div class="code-block">
|
|
578
|
+
java -javaagent:flowtrace-agent.jar \<br>
|
|
579
|
+
-Dflowtrace.service.name=auth-service \<br>
|
|
580
|
+
-Dflowtrace.collector.url=https://ingest.flowtrace.io \<br>
|
|
581
|
+
-jar app.jar
|
|
582
|
+
</div>
|
|
583
|
+
</section>
|
|
584
|
+
|
|
585
|
+
<section id="spring-boot">
|
|
586
|
+
<h2>Spring Boot Integration</h2>
|
|
587
|
+
<p>For Spring Boot, we recommend adding the agent as a dependency in your <code>pom.xml</code> or using the
|
|
588
|
+
provided starter.</p>
|
|
589
|
+
<div class="code-block">
|
|
590
|
+
<dependency><br>
|
|
591
|
+
<groupId>io.flowtrace</groupId><br>
|
|
592
|
+
<artifactId>flowtrace-spring-boot-starter</artifactId><br>
|
|
593
|
+
</dependency>
|
|
594
|
+
</div>
|
|
595
|
+
</section>
|
|
596
|
+
|
|
597
|
+
<section id="otlp">
|
|
598
|
+
<h2>OTLP Cloud Exporters</h2>
|
|
599
|
+
<p>FlowTrace is fully compatible with the OpenTelemetry Protocol (OTLP). You can export your traces to our cloud
|
|
600
|
+
or any self-hosted collector.</p>
|
|
601
|
+
<div class="feature-card">
|
|
602
|
+
<strong>Configuration:</strong> Set <code>OTEL_EXPORTER_OTLP_ENDPOINT</code> to your FlowTrace collector URL to
|
|
603
|
+
begin streaming data immediately.
|
|
604
|
+
</div>
|
|
605
|
+
</section>
|
|
606
|
+
|
|
607
|
+
<section id="api-tester">
|
|
608
|
+
<h2>API & Proxy Testing</h2>
|
|
609
|
+
<p>Use the built-in proxy to record real-world traffic patterns and replay them against your local development
|
|
610
|
+
environment.</p>
|
|
611
|
+
</section>
|
|
612
|
+
|
|
613
|
+
<section id="graphql">
|
|
614
|
+
<h2>GraphQL Spans</h2>
|
|
615
|
+
<p>FlowTrace automatically parses GraphQL queries to identify slow resolvers, N+1 query problems, and field-level
|
|
616
|
+
latency.</p>
|
|
617
|
+
</section>
|
|
618
|
+
|
|
619
|
+
<section id="manual">
|
|
620
|
+
<h2>Manual Instrumentation</h2>
|
|
621
|
+
<p>For custom business logic, use the <code>span</code> API to wrap specific functions or blocks of code.</p>
|
|
622
|
+
<div class="code-block">
|
|
623
|
+
<span class="keyword">const</span> span = FlowTrace.<span class="fn">startSpan</span>(<span
|
|
624
|
+
class="str">'process-payment'</span>);<br>
|
|
625
|
+
<span class="comment">// ... logic</span><br>
|
|
626
|
+
span.<span class="fn">end</span>();
|
|
627
|
+
</div>
|
|
628
|
+
</section>
|
|
629
|
+
</main>
|
|
630
|
+
|
|
631
|
+
<script>
|
|
632
|
+
function toggleSidebar() {
|
|
633
|
+
const sb = document.getElementById('sidebar');
|
|
634
|
+
sb.classList.toggle('open');
|
|
635
|
+
}
|
|
636
|
+
|
|
637
|
+
document.querySelectorAll('.nav-link').forEach(link => {
|
|
638
|
+
link.addEventListener('click', (e) => {
|
|
639
|
+
const href = link.getAttribute('href');
|
|
640
|
+
if (href && href.startsWith('#')) {
|
|
641
|
+
e.preventDefault();
|
|
642
|
+
const target = document.querySelector(href);
|
|
643
|
+
if (target) {
|
|
644
|
+
target.scrollIntoView({ behavior: 'smooth' });
|
|
645
|
+
document.getElementById('sidebar').classList.remove('open');
|
|
646
|
+
|
|
647
|
+
document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
|
|
648
|
+
link.classList.add('active');
|
|
649
|
+
}
|
|
650
|
+
}
|
|
651
|
+
});
|
|
652
|
+
});
|
|
653
|
+
</script>
|
|
654
|
+
</body>
|
|
655
|
+
|
|
656
|
+
</html>
|
|
Binary file
|
|
Binary file
|