Skip to content

Commit 359010d

Browse files
niieanibbrzoska
niieani
authored and
bbrzoska
committed
fix: improvements to debugger
1 parent 300c9e4 commit 359010d

File tree

3 files changed

+129
-47
lines changed

3 files changed

+129
-47
lines changed

‎src/stories/mockComponentsv3/TicketView.tsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint-disable import/no-extraneous-dependencies */
2-
import React, { useEffect } from 'react'
2+
import React, { useEffect, useState } from 'react'
33
import styled from 'styled-components'
44
import { Timeline } from '@zendeskgarden/react-accordions'
55
import { Avatar } from '@zendeskgarden/react-avatars'
@@ -34,6 +34,8 @@ export const TicketView: React.FC<TicketViewProps> = ({
3434
cached = false,
3535
onLoaded,
3636
}) => {
37+
const [stateX, setStateX] = useState(0)
38+
3739
useBeacon({
3840
name: 'TicketView',
3941
relatedTo: { ticketId },
@@ -60,10 +62,20 @@ export const TicketView: React.FC<TicketViewProps> = ({
6062
const timer = setTimeout(() => {
6163
onLoaded?.()
6264
// eslint-disable-next-line no-magic-numbers
63-
}, 1_500)
65+
}, 500)
6466
return () => void clearTimeout(timer)
6567
}, [ticketId])
6668

69+
useEffect(() => {
70+
if (!cached || stateX > 10) return undefined
71+
const timer = setTimeout(() => {
72+
// force trigger a re-render
73+
setStateX((prev) => prev + 1)
74+
// eslint-disable-next-line no-magic-numbers
75+
}, 50)
76+
return () => void clearTimeout(timer)
77+
}, [stateX])
78+
6779
if (!ticket) {
6880
return (
6981
<Well>

‎src/stories/mockComponentsv3/ticketOperationTracer.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,5 +28,30 @@ export const ticketOperationTracer = traceManager.createTracer({
2828
type: 'component-unmount',
2929
},
3030
],
31+
computedSpanDefinitions: {
32+
time_to_start_loading: {
33+
startSpan: 'operation-start',
34+
endSpan: {
35+
name: 'TicketView',
36+
matchingRelations: true,
37+
fn: (s) =>
38+
s.span.type === 'component-render' &&
39+
s.span.renderedOutput === 'loading',
40+
},
41+
},
42+
},
43+
computedValueDefinitions: {
44+
had_error: {
45+
matches: [{ name: 'TicketView', type: 'component-render', isIdle: true }],
46+
computeValueFromMatches: (matches) => {
47+
const error = matches.find(
48+
(m) =>
49+
m.span.type === 'component-render' &&
50+
m.span.renderedOutput === 'error',
51+
)
52+
return !!error
53+
},
54+
},
55+
},
3156
captureInteractive: true,
3257
})

‎src/v3/TraceManagerDebugger.tsx

Lines changed: 90 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -642,7 +642,9 @@ function TimeMarkers<RelationSchemasT>({
642642
<ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
643643
{lastRequiredSpanOffset !== undefined && (
644644
<li style={styles.listItem}>
645-
<span style={{ display: 'inline-block' }}>Last Required Span:</span>
645+
<span style={{ display: 'inline-block' }}>
646+
First Contentful Render (Last Required Span):
647+
</span>
646648
<span
647649
style={{
648650
fontFamily: 'monospace',
@@ -658,7 +660,9 @@ function TimeMarkers<RelationSchemasT>({
658660
)}
659661
{completeSpanOffset !== undefined && (
660662
<li style={styles.listItem}>
661-
<span style={{ display: 'inline-block' }}>Complete Span:</span>
663+
<span style={{ display: 'inline-block' }}>
664+
Last Contentful Render (Trace Complete):
665+
</span>
662666
<span
663667
style={{
664668
fontFamily: 'monospace',
@@ -674,7 +678,9 @@ function TimeMarkers<RelationSchemasT>({
674678
)}
675679
{cpuIdleSpanOffset !== undefined && (
676680
<li style={styles.listItem}>
677-
<span style={{ display: 'inline-block' }}>CPU Idle Span:</span>
681+
<span style={{ display: 'inline-block' }}>
682+
Time To Interactive (CPU Idle Span):
683+
</span>
678684
<span
679685
style={{
680686
fontFamily: 'monospace',
@@ -1409,66 +1415,105 @@ function TraceItem<
14091415
cpuIdleSpanOffset={trace.cpuIdleSpanOffset}
14101416
/>
14111417

1412-
{/* Computed Spans/Values */}
1413-
<div style={styles.section}>
1414-
<div style={styles.sectionTitle}>Computed Spans:</div>
1415-
<ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
1416-
{(trace.computedSpans ?? []).map((name) => {
1417-
const value = getFromRecord(computedResults.computedSpans, name)
1418-
return (
1419-
<li key={name} style={styles.listItem}>
1420-
{name}
1421-
{trace.state === 'complete' ||
1422-
trace.state === 'interrupted' ? (
1423-
value ? (
1424-
<RenderComputedSpan value={value} />
1418+
{/* Computed Spans */}
1419+
{(trace.computedSpans?.length ?? 0) > 0 && (
1420+
<div style={styles.section}>
1421+
<div style={styles.sectionTitle}>Computed Spans:</div>
1422+
<ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
1423+
{(trace.computedSpans ?? []).map((name) => {
1424+
const value = getFromRecord(
1425+
computedResults.computedSpans,
1426+
name,
1427+
)
1428+
return (
1429+
<li key={name} style={styles.listItem}>
1430+
{name}
1431+
{trace.state === 'complete' ||
1432+
trace.state === 'interrupted' ? (
1433+
value ? (
1434+
<RenderComputedSpan value={value} />
1435+
) : (
1436+
<span
1437+
style={{
1438+
marginLeft: 8,
1439+
color: 'red',
1440+
fontWeight: 500,
1441+
}}
1442+
>
1443+
missing
1444+
</span>
1445+
)
14251446
) : (
14261447
<span
14271448
style={{
14281449
marginLeft: 8,
1429-
color: 'red',
1430-
fontWeight: 500,
1450+
color: '#757575',
1451+
fontStyle: 'italic',
14311452
}}
14321453
>
1433-
missing
1454+
pending
14341455
</span>
1435-
)
1436-
) : null}
1437-
</li>
1438-
)
1439-
})}
1440-
</ul>
1441-
</div>
1456+
)}
1457+
</li>
1458+
)
1459+
})}
1460+
</ul>
1461+
</div>
1462+
)}
14421463
{computedResults.computedRenderBeaconSpans ? (
14431464
<RenderComputedRenderBeaconSpans
14441465
computedRenderBeaconSpans={
14451466
computedResults.computedRenderBeaconSpans
14461467
}
14471468
/>
14481469
) : null}
1449-
<div style={styles.section}>
1450-
<div style={styles.sectionTitle}>Computed Values:</div>
1451-
<ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
1452-
{(trace.computedValues ?? []).map((name) => {
1453-
const value = getFromRecord(
1454-
computedResults.computedValues,
1455-
name,
1456-
)
1457-
return (
1458-
<li key={name} style={styles.listItem}>
1459-
{name}
1460-
{trace.state === 'complete' || trace.state === 'interrupted'
1461-
? value !== undefined && (
1470+
{/* Computed Values */}
1471+
{(trace.computedValues?.length ?? 0) > 0 && (
1472+
<div style={styles.section}>
1473+
<div style={styles.sectionTitle}>Computed Values:</div>
1474+
<ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
1475+
{(trace.computedValues ?? []).map((name) => {
1476+
const value = getFromRecord(
1477+
computedResults.computedValues,
1478+
name,
1479+
)
1480+
return (
1481+
<li key={name} style={styles.listItem}>
1482+
{name}
1483+
{trace.state === 'complete' ||
1484+
trace.state === 'interrupted' ? (
1485+
value !== undefined ? (
14621486
<span style={{ marginLeft: 8, color: '#1976d2' }}>
14631487
{String(value)}
14641488
</span>
1489+
) : (
1490+
<span
1491+
style={{
1492+
marginLeft: 8,
1493+
color: 'red',
1494+
fontWeight: 500,
1495+
}}
1496+
>
1497+
N/A
1498+
</span>
14651499
)
1466-
: null}
1467-
</li>
1468-
)
1469-
})}
1470-
</ul>
1471-
</div>
1500+
) : (
1501+
<span
1502+
style={{
1503+
marginLeft: 8,
1504+
color: '#757575',
1505+
fontStyle: 'italic',
1506+
}}
1507+
>
1508+
pending
1509+
</span>
1510+
)}
1511+
</li>
1512+
)
1513+
})}
1514+
</ul>
1515+
</div>
1516+
)}
14721517

14731518
{/* ROW 3: Definition details toggle */}
14741519
<div

0 commit comments

Comments
 (0)