Relay firehose browser tools: https://compare.hose.cam
animate the current interval
and drop other animation else it gets pretty bad
it's a bit stuttery for most relay but i guess that makes sense?
+26
-8
+4
src/App.css
+4
src/App.css
+16
-6
src/App.tsx
+16
-6
src/App.tsx
···
43
43
44
44
setRateBars({
45
45
xAxis: [{
46
-
data: series.map(({ t }) => (-(now - t) / 1000).toFixed(1))
46
+
data: series
47
+
.map(({ t }) => (-(now - t) / 1000).toFixed(1))
48
+
.concat(['now']),
49
+
label: 'bucket (seconds ago)',
47
50
}],
48
51
series: relays.map(r => ({
49
52
label: r,
50
-
data: series.map(({ dt, counts }) => {
51
-
if (!counts[r]) return null;
52
-
return (counts[r] / (dt / 1000)).toFixed(1);
53
-
}),
53
+
data: series
54
+
.map(({ dt, counts }) => {
55
+
if (!counts[r]) return null;
56
+
return (counts[r] / (dt / 1000)).toFixed(1);
57
+
})
58
+
.concat([!currentCounts[r]
59
+
? null
60
+
: (currentCounts[r] / (INTERVAL / 1000)).toFixed(1)
61
+
]),
54
62
})),
55
63
});
56
64
···
102
110
);
103
111
})}
104
112
</div>
105
-
<div className=".throughputs">
113
+
<div className="throughputs">
106
114
<BarChart
107
115
height={300}
116
+
yAxis={[{ label: 'events / sec' }]}
117
+
skipAnimation={true}
108
118
{...rateBars}
109
119
/>
110
120
</div>
+6
-2
src/Relay.tsx
+6
-2
src/Relay.tsx
···
7
7
function Relay({ url, desc, onRecieveEvent }) {
8
8
const [state, setState] = useState('connecting');
9
9
const [commits, setCommits] = useState(0);
10
+
const [reconnects, setReconnects] = useState(0);
10
11
11
12
useEffect(() => {
12
13
const sendIt = (type, event) => {
···
16
17
const firehose = new Firehose({ relay: url });
17
18
firehose.on('open', () => setState('connected'));
18
19
firehose.on('close', () => setState('closed'));
19
-
firehose.on('reconnect', (...args) => console.info('reconnect', ...args));
20
-
firehose.on('error', e => console.error(e) || setState('errored'));
20
+
firehose.on('reconnect', () => setReconnects(n => n + 1));
21
+
firehose.on('error', e => console.error('oops', e) || setState('errored'));
21
22
firehose.on('websocketError', () => setState('errored'));
22
23
firehose.on('commit', (ev) => sendIt('commit', ev));
23
24
firehose.on('sync', (ev) => sendIt('sync', ev));
···
37
38
<h2>{ desc }</h2>
38
39
<p><code>{ url }</code></p>
39
40
<p>[<code>{ state }</code>] (<code>{ commits.toLocaleString() }</code> events)</p>
41
+
{(reconnects > 0) && (
42
+
<p>reconnects: <code>{reconnects}</code></p>
43
+
)}
40
44
</div>
41
45
);
42
46
}