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,337 @@
|
|
|
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>How it Works | FlowTrace</title>
|
|
8
|
+
<link rel="icon" type="image/png" href="favicon.png">
|
|
9
|
+
|
|
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=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
|
+
--bg: var(--deep-charcoal);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
* {
|
|
26
|
+
box-sizing: border-box;
|
|
27
|
+
margin: 0;
|
|
28
|
+
padding: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
body {
|
|
32
|
+
background-color: var(--bg);
|
|
33
|
+
background-image:
|
|
34
|
+
linear-gradient(rgba(5, 5, 5, 0.92), rgba(5, 5, 5, 0.92)),
|
|
35
|
+
url('hero-bg.png');
|
|
36
|
+
background-size: cover;
|
|
37
|
+
background-position: center;
|
|
38
|
+
background-attachment: fixed;
|
|
39
|
+
color: #fff;
|
|
40
|
+
font-family: 'Inter', sans-serif;
|
|
41
|
+
overflow: hidden;
|
|
42
|
+
height: 100vh;
|
|
43
|
+
display: flex;
|
|
44
|
+
flex-direction: column;
|
|
45
|
+
align-items: center;
|
|
46
|
+
justify-content: center;
|
|
47
|
+
scrollbar-width: none;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
body::-webkit-scrollbar {
|
|
51
|
+
display: none;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
header {
|
|
55
|
+
position: absolute;
|
|
56
|
+
top: 0;
|
|
57
|
+
width: 100%;
|
|
58
|
+
padding: 32px 80px;
|
|
59
|
+
display: flex;
|
|
60
|
+
justify-content: space-between;
|
|
61
|
+
align-items: center;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.logo {
|
|
65
|
+
font-family: 'Outfit', sans-serif;
|
|
66
|
+
font-size: 24px;
|
|
67
|
+
font-weight: 800;
|
|
68
|
+
color: #fff;
|
|
69
|
+
text-decoration: none;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.logo span {
|
|
73
|
+
color: var(--princeton-orange);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.container {
|
|
77
|
+
text-align: center;
|
|
78
|
+
max-width: 1000px;
|
|
79
|
+
width: 100%;
|
|
80
|
+
position: relative;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
h1 {
|
|
84
|
+
font-family: 'Outfit', sans-serif;
|
|
85
|
+
font-size: 48px;
|
|
86
|
+
margin-bottom: 16px;
|
|
87
|
+
letter-spacing: -1px;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
p {
|
|
91
|
+
color: #94a3b8;
|
|
92
|
+
font-size: 18px;
|
|
93
|
+
margin-bottom: 64px;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.flow-canvas {
|
|
97
|
+
width: 100%;
|
|
98
|
+
height: 400px;
|
|
99
|
+
position: relative;
|
|
100
|
+
display: flex;
|
|
101
|
+
align-items: center;
|
|
102
|
+
justify-content: space-between;
|
|
103
|
+
padding: 0 100px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.node {
|
|
107
|
+
width: 120px;
|
|
108
|
+
height: 120px;
|
|
109
|
+
background: rgba(255, 255, 255, 0.03);
|
|
110
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
111
|
+
border-radius: 20px;
|
|
112
|
+
display: flex;
|
|
113
|
+
flex-direction: column;
|
|
114
|
+
align-items: center;
|
|
115
|
+
justify-content: center;
|
|
116
|
+
gap: 12px;
|
|
117
|
+
position: relative;
|
|
118
|
+
z-index: 2;
|
|
119
|
+
transition: all 0.5s;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.node.active {
|
|
123
|
+
border-color: var(--amber-flame);
|
|
124
|
+
box-shadow: 0 0 30px rgba(255, 183, 3, 0.2);
|
|
125
|
+
transform: scale(1.1);
|
|
126
|
+
background: rgba(255, 183, 3, 0.05);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.node-icon {
|
|
130
|
+
font-size: 32px;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.node-label {
|
|
134
|
+
font-size: 14px;
|
|
135
|
+
font-weight: 600;
|
|
136
|
+
color: #fff;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.path {
|
|
140
|
+
position: absolute;
|
|
141
|
+
top: 50%;
|
|
142
|
+
left: 160px;
|
|
143
|
+
right: 160px;
|
|
144
|
+
height: 2px;
|
|
145
|
+
background: rgba(255, 255, 255, 0.05);
|
|
146
|
+
z-index: 1;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.beam {
|
|
150
|
+
position: absolute;
|
|
151
|
+
top: 0;
|
|
152
|
+
height: 100%;
|
|
153
|
+
width: 100px;
|
|
154
|
+
background: linear-gradient(90deg, transparent, var(--princeton-orange), transparent);
|
|
155
|
+
opacity: 0;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.trace-token {
|
|
159
|
+
position: absolute;
|
|
160
|
+
width: 40px;
|
|
161
|
+
height: 40px;
|
|
162
|
+
background: var(--amber-flame);
|
|
163
|
+
border-radius: 50%;
|
|
164
|
+
box-shadow: 0 0 20px var(--amber-flame);
|
|
165
|
+
top: calc(50% - 20px);
|
|
166
|
+
left: 100px;
|
|
167
|
+
z-index: 3;
|
|
168
|
+
display: flex;
|
|
169
|
+
align-items: center;
|
|
170
|
+
justify-content: center;
|
|
171
|
+
font-size: 20px;
|
|
172
|
+
opacity: 0;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.info-box {
|
|
176
|
+
margin-top: 64px;
|
|
177
|
+
padding: 24px 40px;
|
|
178
|
+
background: rgba(255, 255, 255, 0.02);
|
|
179
|
+
border-radius: 12px;
|
|
180
|
+
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
181
|
+
font-size: 18px;
|
|
182
|
+
color: var(--amber-flame);
|
|
183
|
+
min-height: 80px;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
@media (max-width: 768px) {
|
|
187
|
+
h1 {
|
|
188
|
+
font-size: 32px;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
p {
|
|
192
|
+
font-size: 16px;
|
|
193
|
+
margin-bottom: 32px;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.flow-canvas {
|
|
197
|
+
padding: 0 20px;
|
|
198
|
+
height: 300px;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.node {
|
|
202
|
+
width: 80px;
|
|
203
|
+
height: 80px;
|
|
204
|
+
border-radius: 12px;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.node-icon {
|
|
208
|
+
font-size: 20px;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.node-label {
|
|
212
|
+
font-size: 10px;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.path {
|
|
216
|
+
left: 60px;
|
|
217
|
+
right: 60px;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.trace-token {
|
|
221
|
+
width: 30px;
|
|
222
|
+
height: 30px;
|
|
223
|
+
top: calc(50% - 15px);
|
|
224
|
+
font-size: 16px;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.btn-back {
|
|
228
|
+
display: block;
|
|
229
|
+
width: fit-content;
|
|
230
|
+
margin: 32px auto;
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.btn-back {
|
|
235
|
+
margin-top: 40px;
|
|
236
|
+
padding: 12px 32px;
|
|
237
|
+
border-radius: 99px;
|
|
238
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
239
|
+
color: #fff;
|
|
240
|
+
text-decoration: none;
|
|
241
|
+
font-weight: 600;
|
|
242
|
+
transition: all 0.3s;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.btn-back:hover {
|
|
246
|
+
background: rgba(255, 255, 255, 0.05);
|
|
247
|
+
}
|
|
248
|
+
</style>
|
|
249
|
+
</head>
|
|
250
|
+
|
|
251
|
+
<body>
|
|
252
|
+
|
|
253
|
+
<header>
|
|
254
|
+
<a href="index.html" class="logo">⚡ Flow<span>Trace</span></a>
|
|
255
|
+
</header>
|
|
256
|
+
|
|
257
|
+
<div class="container">
|
|
258
|
+
<h1>Lifecycle of a Trace</h1>
|
|
259
|
+
<p>Watch how FlowTrace intercepts, propagates, and visualizes your logic.</p>
|
|
260
|
+
|
|
261
|
+
<div class="flow-canvas">
|
|
262
|
+
<div class="path"></div>
|
|
263
|
+
|
|
264
|
+
<div class="node" id="node-client">
|
|
265
|
+
<div class="node-icon">📱</div>
|
|
266
|
+
<div class="node-label">Client</div>
|
|
267
|
+
</div>
|
|
268
|
+
|
|
269
|
+
<div class="node" id="node-node">
|
|
270
|
+
<div class="node-icon">📦</div>
|
|
271
|
+
<div class="node-label">Node.js</div>
|
|
272
|
+
</div>
|
|
273
|
+
|
|
274
|
+
<div class="node" id="node-java">
|
|
275
|
+
<div class="node-icon">☕</div>
|
|
276
|
+
<div class="node-label">Java Agent</div>
|
|
277
|
+
</div>
|
|
278
|
+
|
|
279
|
+
<div class="node" id="node-dash">
|
|
280
|
+
<div class="node-icon">📊</div>
|
|
281
|
+
<div class="node-label">Dashboard</div>
|
|
282
|
+
</div>
|
|
283
|
+
|
|
284
|
+
<div class="trace-token" id="token">⚡</div>
|
|
285
|
+
</div>
|
|
286
|
+
|
|
287
|
+
<div class="info-box" id="info">Initialing Trace Sequence...</div>
|
|
288
|
+
|
|
289
|
+
<a href="index.html" class="btn-back">← Back to Overview</a>
|
|
290
|
+
</div>
|
|
291
|
+
|
|
292
|
+
<script>
|
|
293
|
+
const token = document.getElementById('token');
|
|
294
|
+
const nodes = {
|
|
295
|
+
client: document.getElementById('node-client'),
|
|
296
|
+
node: document.getElementById('node-node'),
|
|
297
|
+
java: document.getElementById('node-java'),
|
|
298
|
+
dash: document.getElementById('node-dash')
|
|
299
|
+
};
|
|
300
|
+
const info = document.getElementById('info');
|
|
301
|
+
|
|
302
|
+
const sequence = [
|
|
303
|
+
{ node: 'client', text: 'Incoming request initiated...', pos: '5%' },
|
|
304
|
+
{ node: 'node', text: 'Intercepted by FlowTrace SDK via Middleware.', pos: '35%' },
|
|
305
|
+
{ node: 'java', text: 'TraceContext propagated via W3C Headers to Java Bytecode Agent.', pos: '65%' },
|
|
306
|
+
{ node: 'dash', text: 'Spans collected and rendered as Mermaid Sequence Diagram!', pos: '95%' }
|
|
307
|
+
];
|
|
308
|
+
|
|
309
|
+
let currentStep = 0;
|
|
310
|
+
|
|
311
|
+
function runStep() {
|
|
312
|
+
const step = sequence[currentStep];
|
|
313
|
+
|
|
314
|
+
info.textContent = step.text;
|
|
315
|
+
|
|
316
|
+
token.style.opacity = '1';
|
|
317
|
+
token.style.transition = 'all 1s cubic-bezier(0.16, 1, 0.3, 1)';
|
|
318
|
+
|
|
319
|
+
const canvasWidth = document.querySelector('.flow-canvas').offsetWidth;
|
|
320
|
+
const leftOffset = (canvasWidth * parseFloat(step.pos) / 100) - 20;
|
|
321
|
+
token.style.left = `${leftOffset}px`;
|
|
322
|
+
|
|
323
|
+
Object.values(nodes).forEach(n => n.classList.remove('active'));
|
|
324
|
+
nodes[step.node].classList.add('active');
|
|
325
|
+
|
|
326
|
+
currentStep = (currentStep + 1) % sequence.length;
|
|
327
|
+
|
|
328
|
+
setTimeout(runStep, 2500);
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
window.onload = () => {
|
|
332
|
+
setTimeout(runStep, 1000);
|
|
333
|
+
};
|
|
334
|
+
</script>
|
|
335
|
+
</body>
|
|
336
|
+
|
|
337
|
+
</html>
|