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,637 @@
|
|
|
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>FlowTrace | Distributed Tracing & API Platform</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
|
+
--surface: rgba(255, 255, 255, 0.03);
|
|
27
|
+
--surface-border: rgba(255, 255, 255, 0.08);
|
|
28
|
+
|
|
29
|
+
--font-ui: 'Inter', sans-serif;
|
|
30
|
+
--font-display: 'Outfit', sans-serif;
|
|
31
|
+
--font-mono: 'JetBrains Mono', monospace;
|
|
32
|
+
|
|
33
|
+
--radius: 12px;
|
|
34
|
+
--transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
* {
|
|
38
|
+
box-sizing: border-box;
|
|
39
|
+
margin: 0;
|
|
40
|
+
padding: 0;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
body {
|
|
44
|
+
background-color: var(--bg);
|
|
45
|
+
background-image:
|
|
46
|
+
linear-gradient(rgba(5, 5, 5, 0.92), rgba(5, 5, 5, 0.92)),
|
|
47
|
+
url('hero-bg.png');
|
|
48
|
+
background-size: cover;
|
|
49
|
+
background-position: center;
|
|
50
|
+
background-attachment: fixed;
|
|
51
|
+
color: var(--text);
|
|
52
|
+
font-family: var(--font-ui);
|
|
53
|
+
overflow-x: hidden;
|
|
54
|
+
line-height: 1.6;
|
|
55
|
+
scrollbar-width: none;
|
|
56
|
+
-ms-overflow-style: none;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
body::-webkit-scrollbar {
|
|
60
|
+
display: none;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
#splash {
|
|
64
|
+
position: fixed;
|
|
65
|
+
inset: 0;
|
|
66
|
+
z-index: 9999;
|
|
67
|
+
background: var(--deep-charcoal);
|
|
68
|
+
display: flex;
|
|
69
|
+
align-items: center;
|
|
70
|
+
justify-content: center;
|
|
71
|
+
transition: transform 1s cubic-bezier(0.87, 0, 0.13, 1), opacity 0.5s;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.terminal {
|
|
75
|
+
width: 600px;
|
|
76
|
+
max-width: 90%;
|
|
77
|
+
height: 380px;
|
|
78
|
+
background: #080808;
|
|
79
|
+
border-radius: 12px;
|
|
80
|
+
box-shadow: 0 0 40px rgba(255, 183, 3, 0.15), 0 30px 60px rgba(0, 0, 0, 0.6);
|
|
81
|
+
border: 1px solid var(--amber-flame);
|
|
82
|
+
display: flex;
|
|
83
|
+
flex-direction: column;
|
|
84
|
+
overflow: hidden;
|
|
85
|
+
font-family: var(--font-mono);
|
|
86
|
+
font-size: 14px;
|
|
87
|
+
position: relative;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.terminal::after {
|
|
91
|
+
content: '';
|
|
92
|
+
position: absolute;
|
|
93
|
+
inset: 0;
|
|
94
|
+
pointer-events: none;
|
|
95
|
+
background: radial-gradient(circle at center, transparent, rgba(251, 133, 0, 0.05));
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.terminal-head {
|
|
99
|
+
background: #141414;
|
|
100
|
+
padding: 10px 16px;
|
|
101
|
+
display: flex;
|
|
102
|
+
gap: 8px;
|
|
103
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.tdat {
|
|
107
|
+
width: 12px;
|
|
108
|
+
height: 12px;
|
|
109
|
+
border-radius: 50%;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.tr {
|
|
113
|
+
background: #ff5f56;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.ty {
|
|
117
|
+
background: #ffbd2e;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.tg {
|
|
121
|
+
background: #27c93f;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.terminal-body {
|
|
125
|
+
padding: 24px;
|
|
126
|
+
flex: 1;
|
|
127
|
+
overflow-y: auto;
|
|
128
|
+
color: #d1d5db;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.line {
|
|
132
|
+
margin-bottom: 8px;
|
|
133
|
+
display: flex;
|
|
134
|
+
gap: 8px;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.prompt {
|
|
138
|
+
color: var(--amber-flame);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.cmd {
|
|
142
|
+
color: #fff;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.log-info {
|
|
146
|
+
color: #94a3b8;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.log-success {
|
|
150
|
+
color: var(--amber-flame);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.cursor {
|
|
154
|
+
width: 8px;
|
|
155
|
+
height: 18px;
|
|
156
|
+
background: var(--princeton-orange);
|
|
157
|
+
display: inline-block;
|
|
158
|
+
vertical-align: middle;
|
|
159
|
+
animation: blink 1s infinite;
|
|
160
|
+
box-shadow: 0 0 8px var(--princeton-orange);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
@keyframes blink {
|
|
164
|
+
|
|
165
|
+
0%,
|
|
166
|
+
100% {
|
|
167
|
+
opacity: 1
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
50% {
|
|
171
|
+
opacity: 0
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
header {
|
|
176
|
+
padding: 32px 80px;
|
|
177
|
+
display: flex;
|
|
178
|
+
justify-content: space-between;
|
|
179
|
+
align-items: center;
|
|
180
|
+
position: absolute;
|
|
181
|
+
top: 0;
|
|
182
|
+
width: 100%;
|
|
183
|
+
z-index: 100;
|
|
184
|
+
background: transparent;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.logo {
|
|
188
|
+
font-family: var(--font-display);
|
|
189
|
+
font-size: 24px;
|
|
190
|
+
font-weight: 800;
|
|
191
|
+
color: #fff;
|
|
192
|
+
display: flex;
|
|
193
|
+
align-items: center;
|
|
194
|
+
gap: 8px;
|
|
195
|
+
text-decoration: none;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.logo span {
|
|
199
|
+
background: linear-gradient(135deg, var(--amber-flame), var(--princeton-orange));
|
|
200
|
+
-webkit-background-clip: text;
|
|
201
|
+
background-clip: text;
|
|
202
|
+
-webkit-text-fill-color: transparent;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
nav {
|
|
206
|
+
display: flex;
|
|
207
|
+
gap: 40px;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
nav a {
|
|
211
|
+
text-decoration: none;
|
|
212
|
+
color: var(--text-muted);
|
|
213
|
+
font-weight: 500;
|
|
214
|
+
font-size: 14px;
|
|
215
|
+
transition: var(--transition);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
nav a:hover {
|
|
219
|
+
color: var(--amber-flame);
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.hero {
|
|
223
|
+
padding: 120px 80px;
|
|
224
|
+
display: flex;
|
|
225
|
+
flex-direction: column;
|
|
226
|
+
align-items: center;
|
|
227
|
+
justify-content: center;
|
|
228
|
+
text-align: center;
|
|
229
|
+
height: 100vh;
|
|
230
|
+
width: 100%;
|
|
231
|
+
position: relative;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.badge {
|
|
235
|
+
padding: 6px 16px;
|
|
236
|
+
background: rgba(255, 183, 3, 0.1);
|
|
237
|
+
border: 1px solid var(--amber-flame);
|
|
238
|
+
color: var(--amber-flame);
|
|
239
|
+
border-radius: 99px;
|
|
240
|
+
font-size: 12px;
|
|
241
|
+
font-weight: 700;
|
|
242
|
+
letter-spacing: 1px;
|
|
243
|
+
text-transform: uppercase;
|
|
244
|
+
margin-bottom: 32px;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
h1 {
|
|
248
|
+
font-family: var(--font-display);
|
|
249
|
+
font-size: 72px;
|
|
250
|
+
font-weight: 800;
|
|
251
|
+
max-width: 900px;
|
|
252
|
+
line-height: 1.1;
|
|
253
|
+
margin-bottom: 24px;
|
|
254
|
+
letter-spacing: -2px;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
@media (max-width: 768px) {
|
|
258
|
+
h1 {
|
|
259
|
+
font-size: 40px;
|
|
260
|
+
letter-spacing: -1px;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.hero {
|
|
264
|
+
padding: 80px 24px;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.subtitle {
|
|
268
|
+
font-size: 1.1rem;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.features {
|
|
272
|
+
grid-template-columns: 1fr;
|
|
273
|
+
padding: 60px 24px;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
header {
|
|
277
|
+
padding: 20px 24px;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
nav {
|
|
281
|
+
display: none;
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
h1 span {
|
|
286
|
+
background: linear-gradient(to right, #fff, var(--princeton-orange));
|
|
287
|
+
-webkit-background-clip: text;
|
|
288
|
+
background-clip: text;
|
|
289
|
+
-webkit-text-fill-color: transparent;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.subtitle {
|
|
293
|
+
font-size: 20px;
|
|
294
|
+
color: var(--text-muted);
|
|
295
|
+
max-width: 600px;
|
|
296
|
+
margin-bottom: 48px;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.cta-group {
|
|
300
|
+
display: flex;
|
|
301
|
+
gap: 20px;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.btn {
|
|
305
|
+
padding: 16px 36px;
|
|
306
|
+
border-radius: var(--radius);
|
|
307
|
+
font-weight: 700;
|
|
308
|
+
font-family: var(--font-display);
|
|
309
|
+
text-decoration: none;
|
|
310
|
+
transition: var(--transition);
|
|
311
|
+
font-size: 16px;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.btn-primary {
|
|
315
|
+
background: var(--princeton-orange);
|
|
316
|
+
color: #fff;
|
|
317
|
+
box-shadow: 0 10px 20px rgba(251, 133, 0, 0.2);
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.btn-primary:hover {
|
|
321
|
+
background: var(--amber-flame);
|
|
322
|
+
transform: translateY(-2px);
|
|
323
|
+
box-shadow: 0 15px 30px rgba(251, 133, 0, 0.3);
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.btn-secondary {
|
|
327
|
+
background: rgba(255, 255, 255, 0.05);
|
|
328
|
+
border: 1px solid var(--surface-border);
|
|
329
|
+
color: #fff;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.btn-secondary:hover {
|
|
333
|
+
background: rgba(255, 255, 255, 0.1);
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.features {
|
|
337
|
+
padding: 120px 80px;
|
|
338
|
+
display: grid;
|
|
339
|
+
grid-template-columns: repeat(2, 1fr);
|
|
340
|
+
gap: 32px;
|
|
341
|
+
position: relative;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
.features::before {
|
|
345
|
+
content: '';
|
|
346
|
+
position: absolute;
|
|
347
|
+
inset: 0;
|
|
348
|
+
pointer-events: none;
|
|
349
|
+
background-image: radial-gradient(rgba(251, 133, 0, 0.05) 1px, transparent 1px);
|
|
350
|
+
background-size: 20px 20px;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.f-card {
|
|
354
|
+
background: var(--surface);
|
|
355
|
+
border: 1px solid var(--surface-border);
|
|
356
|
+
padding: 40px;
|
|
357
|
+
border-radius: var(--radius);
|
|
358
|
+
transition: var(--transition);
|
|
359
|
+
position: relative;
|
|
360
|
+
overflow: hidden;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
.f-card::before {
|
|
364
|
+
content: '';
|
|
365
|
+
position: absolute;
|
|
366
|
+
inset: 0;
|
|
367
|
+
border: 2px solid transparent;
|
|
368
|
+
border-radius: inherit;
|
|
369
|
+
background: linear-gradient(90deg, var(--amber-flame), var(--princeton-orange)) border-box;
|
|
370
|
+
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
|
|
371
|
+
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
|
|
372
|
+
-webkit-mask-composite: destination-out;
|
|
373
|
+
mask-composite: exclude;
|
|
374
|
+
opacity: 0;
|
|
375
|
+
transition: opacity 0.3s;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.f-card:hover {
|
|
379
|
+
border-color: transparent;
|
|
380
|
+
transform: scale(1.02);
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
.f-card:hover::before {
|
|
384
|
+
opacity: 1;
|
|
385
|
+
animation: borderGlow 2s linear infinite;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
@keyframes borderGlow {
|
|
389
|
+
|
|
390
|
+
0%,
|
|
391
|
+
100% {
|
|
392
|
+
filter: hue-rotate(0deg) drop-shadow(0 0 5px var(--amber-flame));
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
50% {
|
|
396
|
+
filter: hue-rotate(20deg) drop-shadow(0 0 15px var(--princeton-orange));
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.f-icon {
|
|
401
|
+
font-size: 32px;
|
|
402
|
+
margin-bottom: 24px;
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
.f-title {
|
|
406
|
+
font-family: var(--font-display);
|
|
407
|
+
font-size: 22px;
|
|
408
|
+
margin-bottom: 12px;
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
.f-desc {
|
|
412
|
+
color: var(--text-muted);
|
|
413
|
+
font-size: 15px;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
.showcase {
|
|
417
|
+
padding: 80px;
|
|
418
|
+
display: flex;
|
|
419
|
+
justify-content: center;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.code-window {
|
|
423
|
+
width: 100%;
|
|
424
|
+
max-width: 800px;
|
|
425
|
+
background: #080808;
|
|
426
|
+
border-radius: 12px;
|
|
427
|
+
border: 1px solid var(--surface-border);
|
|
428
|
+
overflow: hidden;
|
|
429
|
+
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
.code-body {
|
|
433
|
+
padding: 32px;
|
|
434
|
+
font-family: var(--font-mono);
|
|
435
|
+
font-size: 15px;
|
|
436
|
+
color: var(--neutral-silver);
|
|
437
|
+
line-height: 1.6;
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
.code-body .keyword {
|
|
441
|
+
color: var(--princeton-orange);
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
.code-body .fn {
|
|
445
|
+
color: var(--amber-flame);
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
.code-body .str {
|
|
449
|
+
color: #fff;
|
|
450
|
+
opacity: 0.8;
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
.code-body .comment {
|
|
454
|
+
color: #546e7a;
|
|
455
|
+
font-style: italic;
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
@media (max-width: 1024px) {
|
|
459
|
+
.features {
|
|
460
|
+
grid-template-columns: 1fr;
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
header {
|
|
464
|
+
padding: 24px 40px;
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
.hero {
|
|
468
|
+
padding: 80px 40px;
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
h1 {
|
|
472
|
+
font-size: 48px;
|
|
473
|
+
}
|
|
474
|
+
}
|
|
475
|
+
</style>
|
|
476
|
+
</head>
|
|
477
|
+
|
|
478
|
+
<body>
|
|
479
|
+
|
|
480
|
+
<div id="splash">
|
|
481
|
+
<div class="terminal">
|
|
482
|
+
<div class="terminal-head">
|
|
483
|
+
<div class="tdat tr"></div>
|
|
484
|
+
<div class="tdat ty"></div>
|
|
485
|
+
<div class="tdat tg"></div>
|
|
486
|
+
</div>
|
|
487
|
+
<div class="terminal-body" id="t-body"></div>
|
|
488
|
+
</div>
|
|
489
|
+
</div>
|
|
490
|
+
|
|
491
|
+
<header>
|
|
492
|
+
<a href="index.html" class="logo">โก Flow<span>Trace</span></a>
|
|
493
|
+
<nav>
|
|
494
|
+
<a href="#features" onclick="scrollToFeatures()">Features</a>
|
|
495
|
+
<a href="docs.html">Docs</a>
|
|
496
|
+
</nav>
|
|
497
|
+
<a href="docs.html#download" class="btn btn-secondary" style="padding: 10px 24px; font-size: 14px;">Download
|
|
498
|
+
Agent</a>
|
|
499
|
+
</header>
|
|
500
|
+
|
|
501
|
+
<main>
|
|
502
|
+
<section class="hero">
|
|
503
|
+
<div class="badge">Next-Gen Distributed Tracing</div>
|
|
504
|
+
<h1>Trace the <span>Flow</span><br>Master the System.</h1>
|
|
505
|
+
<p class="subtitle">A professional APM platform designed for modern distributed systems. Integrated API testing,
|
|
506
|
+
GraphQL instrumentation, and OTLP native support.</p>
|
|
507
|
+
|
|
508
|
+
<div class="cta-group">
|
|
509
|
+
<a href="docs.html" class="btn btn-primary">Get Started</a>
|
|
510
|
+
<a href="#features" class="btn btn-secondary">Features</a>
|
|
511
|
+
<a href="/app" class="btn btn-secondary"
|
|
512
|
+
style="border:1px solid var(--amber-flame);color:var(--amber-flame)">Launch Dashboard</a>
|
|
513
|
+
</div>
|
|
514
|
+
</section>
|
|
515
|
+
|
|
516
|
+
<section class="features" id="features">
|
|
517
|
+
<div class="f-card">
|
|
518
|
+
<div class="f-icon">๐</div>
|
|
519
|
+
<div class="f-title">Distributed Tracing</div>
|
|
520
|
+
<div class="f-desc">Seamless W3C context propagation between Node.js and Java services. Visualize the entire
|
|
521
|
+
journey of a request.</div>
|
|
522
|
+
</div>
|
|
523
|
+
<div class="f-card">
|
|
524
|
+
<div class="f-icon">๐งช</div>
|
|
525
|
+
<div class="f-title">API Tester Hub</div>
|
|
526
|
+
<div class="f-desc">Run API tests and watch logic flows in real-time. Full proxy support for bypass-CORS
|
|
527
|
+
testing.</div>
|
|
528
|
+
</div>
|
|
529
|
+
<div class="f-card">
|
|
530
|
+
<div class="f-icon">โ</div>
|
|
531
|
+
<div class="f-title">Java Enterprise</div>
|
|
532
|
+
<div class="f-desc">Zero-code bytecode instrumentation for Java apps. Identify slow resolvers and complex query
|
|
533
|
+
patterns.</div>
|
|
534
|
+
</div>
|
|
535
|
+
<div class="f-card">
|
|
536
|
+
<div class="f-icon">โ</div>
|
|
537
|
+
<div class="f-title">OTLP native support</div>
|
|
538
|
+
<div class="f-desc">Seamless integration with the OpenTelemetry Collector for efficient trace export.
|
|
539
|
+
</div>
|
|
540
|
+
</div>
|
|
541
|
+
</section>
|
|
542
|
+
|
|
543
|
+
<section class="showcase">
|
|
544
|
+
<div class="code-window">
|
|
545
|
+
<div class="terminal-head" style="background: rgba(255,255,255,0.03)">
|
|
546
|
+
<span style="font-size: 11px; opacity: 0.5">app.js</span>
|
|
547
|
+
</div>
|
|
548
|
+
<div class="code-body">
|
|
549
|
+
<span class="keyword">const</span> FlowTrace = <span class="fn">require</span>(<span
|
|
550
|
+
class="str">'flowtrace'</span>);<br><br>
|
|
551
|
+
<span class="cm">// Initialize in 2 lines</span><br>
|
|
552
|
+
FlowTrace.<span class="fn">start</span>({<br>
|
|
553
|
+
serviceName: <span class="str">'checkout-api'</span>,<br>
|
|
554
|
+
otlpEndpoint: <span class="str">'http://collector:4318'</span>,<br>
|
|
555
|
+
instrumentations: [<span class="str">'http'</span>, <span class="str">'graphql'</span>]<br>
|
|
556
|
+
});
|
|
557
|
+
</div>
|
|
558
|
+
</div>
|
|
559
|
+
</section>
|
|
560
|
+
</main>
|
|
561
|
+
|
|
562
|
+
<script>
|
|
563
|
+
const tBody = document.getElementById('t-body');
|
|
564
|
+
const splash = document.getElementById('splash');
|
|
565
|
+
|
|
566
|
+
const lines = [
|
|
567
|
+
{ t: 'cmd', txt: 'npm install flowtrace --save' },
|
|
568
|
+
{ t: 'log', txt: 'added 42 packages in 2s' },
|
|
569
|
+
{ t: 'cmd', txt: 'node server.js' },
|
|
570
|
+
{ t: 'log-info', txt: '[FlowTrace] Scanning for Node.js patterns...' },
|
|
571
|
+
{ t: 'log-info', txt: '[FlowTrace] Initializing OTLP Export Engine.' },
|
|
572
|
+
{ t: 'log-success', txt: '[FlowTrace] Agent attached to process: 1042' },
|
|
573
|
+
{ t: 'log-success', txt: '[FlowTrace] Intercepted GET /checkout/v1/payment' },
|
|
574
|
+
{ t: 'log-success', txt: '[FlowTrace] Propagating TraceContext to Java (AuthService)' },
|
|
575
|
+
{ t: 'log-info', txt: '[FlowTrace] Finalizing visual flow...' }
|
|
576
|
+
];
|
|
577
|
+
|
|
578
|
+
function setCookie(name, value, days) {
|
|
579
|
+
const date = new Date();
|
|
580
|
+
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
|
|
581
|
+
const expires = "expires=" + date.toUTCString();
|
|
582
|
+
document.cookie = name + "=" + value + ";" + expires + ";path=/";
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
function getCookie(name) {
|
|
586
|
+
const nameEQ = name + "=";
|
|
587
|
+
const ca = document.cookie.split(';');
|
|
588
|
+
for (let i = 0; i < ca.length; i++) {
|
|
589
|
+
let c = ca[i];
|
|
590
|
+
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
|
|
591
|
+
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
|
|
592
|
+
}
|
|
593
|
+
return null;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
async function typeEffect() {
|
|
597
|
+
if (getCookie('flowtrace_splash_seen')) {
|
|
598
|
+
splash.style.display = 'none';
|
|
599
|
+
return;
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
for (const line of lines) {
|
|
603
|
+
const div = document.createElement('div');
|
|
604
|
+
div.className = 'line';
|
|
605
|
+
|
|
606
|
+
if (line.t === 'cmd') {
|
|
607
|
+
div.innerHTML = `<span class="prompt">></span> <span class="cmd"></span>`;
|
|
608
|
+
tBody.appendChild(div);
|
|
609
|
+
const cmdSpan = div.querySelector('.cmd');
|
|
610
|
+
for (let i = 0; i < line.txt.length; i++) {
|
|
611
|
+
cmdSpan.textContent += line.txt[i];
|
|
612
|
+
await new Promise(r => setTimeout(r, 40));
|
|
613
|
+
}
|
|
614
|
+
} else {
|
|
615
|
+
div.innerHTML = `<span class="${line.t}">${line.txt}</span>`;
|
|
616
|
+
tBody.appendChild(div);
|
|
617
|
+
}
|
|
618
|
+
await new Promise(r => setTimeout(r, 400));
|
|
619
|
+
tBody.scrollTop = tBody.scrollHeight;
|
|
620
|
+
}
|
|
621
|
+
|
|
622
|
+
await new Promise(r => setTimeout(r, 800));
|
|
623
|
+
splash.style.transform = 'translateY(-100%)';
|
|
624
|
+
splash.style.opacity = '0';
|
|
625
|
+
setCookie('flowtrace_splash_seen', 'true', 7);
|
|
626
|
+
setTimeout(() => splash.style.display = 'none', 1000);
|
|
627
|
+
}
|
|
628
|
+
|
|
629
|
+
function scrollToFeatures() {
|
|
630
|
+
document.getElementById('features').scrollIntoView({ behavior: 'smooth' });
|
|
631
|
+
}
|
|
632
|
+
|
|
633
|
+
window.addEventListener('load', typeEffect);
|
|
634
|
+
</script>
|
|
635
|
+
</body>
|
|
636
|
+
|
|
637
|
+
</html>
|