react-native-nitro-tracing 0.6.0

package/src/react/InspectorHeader.tsx

@@ -0,0 +1,171 @@
+import React from 'react'
+import { Alert, StyleSheet, Text, View } from 'react-native'
+import { useStore } from './store'
+import { useMenu } from './native'
+import type { Viewer } from './useTraceViewer'
+import type { InspectorTranslator } from './labels'
+import { apple, Banner, NavBar, palette, TextButton } from './InspectorControls'
+
+const titleKey = {
+  trace: 'traces',
+  span: 'spans',
+  metric: 'metrics',
+  mark: 'marks',
+} as const
+const tabKey = {
+  overview: 'overview',
+  timeline: 'timeline',
+  explore: 'explore',
+  metrics: 'metrics',
+  tools: 'tools',
+} as const
+
+/** Navigation bar, status line and live-update banner. Only this subscribes to the 1 s telemetry tick. */
+export function InspectorHeader({
+  v: viewer,
+  t,
+}: {
+  v: Viewer
+  t: InspectorTranslator
+}) {
+  const live = useStore(viewer.telemetry, (s) => s)
+  const v = { ...viewer, ...live }
+  const client = v.client
+  const menu = useMenu()
+  const canShare = client.canShare && !!v.stats && !v.busy
+  const startNew = () =>
+    Alert.alert(t('replaceTitle'), t('replaceDescription'), [
+      { text: t('cancel'), style: 'cancel' },
+      { text: t('start'), style: 'destructive', onPress: v.start },
+    ])
+  const seconds = Math.round((v.stats?.nowMs ?? 0) / 1000)
+  // Say what is missing, not only how much: lost spans matter more than samples.
+  const lost = (
+    [
+      ['lostSpans', v.stats?.droppedSpans],
+      ['lostMarks', v.stats?.droppedMarks],
+      ['lostMetrics', v.stats?.droppedMetrics],
+    ] as const
+  )
+    .filter(([, count]) => (count ?? 0) > 0)
+    .map(([key, count]) => t(key, { count }))
+  const newEvents = v.pending
+    ? Math.max(0, v.pending.nextSequence - v.page.nextSequence)
+    : 0
+  return (
+    <View style={styles.root}>
+      <NavBar
+        left={
+          v.detail ? (
+            <TextButton label={`‹ ${t('back')}`} onPress={v.back} />
+          ) : (
+            <TextButton label={t('done')} onPress={client.close} bold />
+          )
+        }
+        title={t(v.detail ? titleKey[v.detail.kind] : tabKey[v.tab])}
+        right={
+          <>
+            <TextButton
+              icon="⇪"
+              accessibilityLabel={t('share')}
+              onPress={() =>
+                menu.open({
+                  title: t('shareTitle'),
+                  cancelLabel: t('cancel'),
+                  options: [
+                    {
+                      label: t('sharePerfetto'),
+                      onPress: v.sharePerfetto,
+                      disabled: !canShare,
+                    },
+                    {
+                      label: t('exportAll'),
+                      onPress: v.export,
+                      disabled: !canShare,
+                    },
+                    ...(v.profilePath && client.canShareProfile
+                      ? [{ label: t('shareProfile'), onPress: v.shareProfile }]
+                      : []),
+                  ],
+                })
+              }
+              disabled={!canShare && !v.profilePath}
+            />
+            <TextButton
+              icon="⋯"
+              accessibilityLabel={t('more')}
+              onPress={() =>
+                menu.open({
+                  cancelLabel: t('cancel'),
+                  options: [
+                    v.recording
+                      ? { label: t('stop'), onPress: v.stop, destructive: true }
+                      : { label: t('start'), onPress: v.start },
+                    ...(v.recording
+                      ? [{ label: t('startNew'), onPress: startNew }]
+                      : []),
+                    {
+                      label: t(v.paused ? 'resumeUpdates' : 'pauseUpdates'),
+                      onPress: v.togglePause,
+                    },
+                    { label: t('tools'), onPress: () => v.setTab('tools') },
+                  ],
+                })
+              }
+            />
+          </>
+        }
+      />
+      <Text style={styles.status} numberOfLines={1}>
+        <Text style={{ color: v.recording ? palette.error : apple.secondary }}>
+          {v.recording ? '●' : '○'}
+        </Text>{' '}
+        {t(v.recording ? 'recording' : 'stopped')} · {Math.floor(seconds / 60)}:
+        {String(seconds % 60).padStart(2, '0')} · {v.stats?.eventCount ?? 0}{' '}
+        {t('events')}
+        {v.screen ? ` · ${v.screen}` : ''}
+        {v.paused ? ` · ${t('frozen')}` : ''}
+      </Text>
+      {lost.length > 0 && (
+        <Text style={styles.warning}>
+          {t('lostHistory', { what: lost.join(', ') })}
+        </Text>
+      )}
+      {v.error && (
+        <Text selectable style={styles.warning} numberOfLines={3}>
+          {v.error}
+        </Text>
+      )}
+      {!v.detail && newEvents > 0 && !v.paused && (
+        <Banner
+          label={t('newEvents', { count: newEvents })}
+          onPress={v.apply}
+        />
+      )}
+      {menu.element}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  root: {
+    backgroundColor: apple.grouped,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderColor: apple.separator,
+    paddingBottom: 8,
+  },
+  status: {
+    fontSize: 13,
+    color: apple.secondary,
+    textAlign: 'center',
+    paddingHorizontal: 16,
+    fontVariant: ['tabular-nums'],
+  },
+  warning: {
+    fontSize: 13,
+    color: palette.error,
+    textAlign: 'center',
+    paddingHorizontal: 16,
+    marginTop: 4,
+  },
+})

package/src/react/InspectorSheet.tsx

@@ -0,0 +1,89 @@
+import React, { type ReactNode } from 'react'
+import {
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+} from 'react-native'
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'
+import { apple, NavBar, palette, TextButton } from './InspectorControls'
+/**
+ * iOS page sheet: nav bar with Cancel and an optional primary action, grouped body.
+ * Mount only while open; a pre-mounted Modal inside the inspector's Modal presents unreliably.
+ */
+export function InspectorSheet({
+  title,
+  close,
+  closeLabel,
+  primary,
+  children,
+}: {
+  title: string
+  close: () => void
+  closeLabel: string
+  primary?: { label: string; onPress: () => void; disabled?: boolean }
+  children: ReactNode
+}) {
+  return (
+    <Modal visible transparent animationType="slide" onRequestClose={close}>
+      <SafeAreaProvider>
+        <KeyboardAvoidingView
+          style={styles.scrim}
+          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        >
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={closeLabel}
+            onPress={close}
+            style={StyleSheet.absoluteFill}
+          />
+          <SafeAreaView
+            edges={['bottom', 'left', 'right']}
+            style={styles.sheet}
+          >
+            <View style={styles.grabber} />
+            <NavBar
+              left={<TextButton label={closeLabel} onPress={close} />}
+              title={title}
+              right={
+                primary && (
+                  <TextButton
+                    label={primary.label}
+                    onPress={primary.onPress}
+                    disabled={primary.disabled}
+                    bold
+                  />
+                )
+              }
+            />
+            {children}
+          </SafeAreaView>
+        </KeyboardAvoidingView>
+      </SafeAreaProvider>
+    </Modal>
+  )
+}
+const styles = StyleSheet.create({
+  scrim: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    backgroundColor: palette.scrim,
+  },
+  sheet: {
+    height: '88%',
+    backgroundColor: apple.grouped,
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12,
+    overflow: 'hidden',
+  },
+  grabber: {
+    alignSelf: 'center',
+    width: 36,
+    height: 5,
+    borderRadius: 3,
+    backgroundColor: '#c7c7cc',
+    marginTop: 6,
+  },
+})

package/src/react/MetricsView.tsx

@@ -0,0 +1,182 @@
+import { LegendList } from '@legendapp/list/react-native'
+import React, { useCallback, useMemo } from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+import type { Metric, Viewer } from './useTraceViewer'
+import { formatMetric } from './viewerModel'
+import type { InspectorTranslator } from './labels'
+import { useMenu } from './native'
+import {
+  apple,
+  palette,
+  Row,
+  SearchField,
+  Segmented,
+} from './InspectorControls'
+
+const categories = ['all', 'runtime', 'operations', 'custom'] as const
+const sorts = ['name', 'count', 'p95'] as const
+const category = (name: string) =>
+  name.startsWith('duration: ')
+    ? 'operations'
+    : /^(js|ui|process|app)\./.test(name)
+      ? 'runtime'
+      : 'custom'
+
+export function MetricsView({ v, t }: { v: Viewer; t: InspectorTranslator }) {
+  const menu = useMenu()
+  const metrics = useMemo(
+    () =>
+      v.metrics
+        .filter(
+          (series) =>
+            (v.metricCategory === 'all' ||
+              category(series.name) === v.metricCategory) &&
+            series.name.toLowerCase().includes(v.metricQuery.toLowerCase())
+        )
+        .sort((a, b) =>
+          v.metricSort === 'name'
+            ? a.name.localeCompare(b.name)
+            : v.metricSort === 'count'
+              ? b.retainedCount - a.retainedCount ||
+                a.name.localeCompare(b.name)
+              : b.p95 - a.p95 || a.name.localeCompare(b.name)
+        ),
+    [v.metrics, v.metricCategory, v.metricQuery, v.metricSort]
+  )
+  const { open } = v
+  const renderItem = useCallback(
+    ({ item }: { item: Metric }) => (
+      <Row
+        title={item.metric}
+        subtitle={t('metricBrief', {
+          latest: formatMetric(item.latest, item.unit),
+          p95: formatMetric(item.p95, item.unit),
+          count: item.retainedCount,
+        })}
+        value={formatMetric(item.latest, item.unit)}
+        onPress={() => open({ kind: 'metric', value: item })}
+      />
+    ),
+    [open, t]
+  )
+  return (
+    <View style={styles.root}>
+      <SearchField
+        value={v.metricQuery}
+        onChange={v.setMetricQuery}
+        placeholder={t('metricSearch')}
+      />
+      <Segmented
+        options={categories.map((value) => ({
+          value,
+          label: t(value === 'operations' ? 'operationsShort' : value),
+        }))}
+        value={v.metricCategory as (typeof categories)[number]}
+        onChange={v.setMetricCategory}
+      />
+      <View style={styles.toolbar}>
+        <Pressable
+          accessibilityRole="button"
+          onPress={() =>
+            menu.open({
+              title: t('sort'),
+              cancelLabel: t('cancel'),
+              options: sorts.map((sort) => ({
+                label: t(sort),
+                selected: sort === v.metricSort,
+                onPress: () => v.setMetricSort(sort),
+              })),
+            })
+          }
+          hitSlop={8}
+        >
+          <Text style={styles.toolbarButton}>
+            {t('sortBy', {
+              sort: t(v.metricSort as (typeof sorts)[number]),
+            })}{' '}
+            ⌄
+          </Text>
+        </Pressable>
+        <Text style={styles.count}>{metrics.length}</Text>
+      </View>
+      <LegendList
+        recycleItems
+        contentInsetAdjustmentBehavior="automatic"
+        style={styles.list}
+        data={metrics}
+        keyExtractor={(series) => series.name}
+        estimatedItemSize={56}
+        keyboardDismissMode="on-drag"
+        initialScrollOffset={v.offsets.current.metrics ?? 0}
+        onScroll={(event) => {
+          v.offsets.current.metrics = event.nativeEvent.contentOffset.y
+        }}
+        scrollEventThrottle={100}
+        onScrollBeginDrag={() => v.setHolding(true)}
+        ListEmptyComponent={
+          <Text style={styles.empty}>{t('emptyMetrics')}</Text>
+        }
+        renderItem={renderItem}
+        ListFooterComponent={
+          v.metricCategory === 'operations' && v.operations.length ? (
+            <View>
+              <Text style={styles.header}>{t('operations')}</Text>
+              {v.operations
+                .filter((op) =>
+                  op.name.toLowerCase().includes(v.metricQuery.toLowerCase())
+                )
+                .slice(0, 40)
+                .map((op) => (
+                  <Row
+                    key={op.name}
+                    title={op.name}
+                    subtitle={t('operationStats', {
+                      ...op,
+                      errorRate:
+                        op.errorRate === undefined
+                          ? '—'
+                          : `${op.errorRate.toFixed(1)}%`,
+                    })}
+                    tint={op.errors ? palette.error : undefined}
+                    onPress={() => v.showSpans({ search: op.name })}
+                  />
+                ))}
+            </View>
+          ) : null
+        }
+      />
+      {menu.element}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+  toolbar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingTop: 10,
+    paddingBottom: 6,
+  },
+  toolbarButton: { fontSize: 15, color: palette.accent, fontWeight: '500' },
+  count: { fontSize: 13, color: apple.secondary },
+  list: { flex: 1, backgroundColor: apple.card },
+  header: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: apple.secondary,
+    textTransform: 'uppercase',
+    paddingHorizontal: 16,
+    paddingTop: 18,
+    paddingBottom: 6,
+    backgroundColor: apple.grouped,
+  },
+  empty: {
+    fontSize: 15,
+    color: apple.secondary,
+    textAlign: 'center',
+    padding: 32,
+  },
+})

package/src/react/SummaryView.tsx

@@ -0,0 +1,121 @@
+import React from 'react'
+import { ScrollView } from 'react-native'
+import type { InspectorLabelKey, InspectorTranslator } from './labels'
+import type { Viewer } from './useTraceViewer'
+import {
+  defaultBudgets,
+  topicGlyph,
+  type AnyEvent,
+  type Issue,
+  type TopicId,
+} from './topics'
+import { formatMetric } from './viewerModel'
+import { apple, palette, Row, Section } from './InspectorControls'
+const capital = (id: string) => id[0].toUpperCase() + id.slice(1)
+const issueLabel = (issue: Issue) =>
+  `issue${capital(issue.kind)}` as InspectorLabelKey
+const ms = (value: number | undefined) =>
+  value === undefined ? '—' : formatMetric(value, 'ms')
+const MAX_ISSUES = 20
+/** Opens the matching detail; metric samples open their series. */
+export const openEvent = (v: Viewer, event: AnyEvent) => {
+  if ('spanId' in event) v.open({ kind: 'span', value: event })
+  else if ('unit' in event) {
+    const series = v.metrics.find(
+      (s) => s.name === `${event.name} (${event.unit})`
+    )
+    if (series) v.open({ kind: 'metric', value: series })
+  } else v.open({ kind: 'mark', value: event })
+}
+export function SummaryView({
+  v,
+  t,
+  budgetMs = defaultBudgets.stallMs,
+}: {
+  v: Viewer
+  t: InspectorTranslator
+  budgetMs?: number
+}) {
+  const explore = (id: TopicId) => {
+    if (id === 'startup' || id === 'responsiveness' || id === 'resources') {
+      v.setTab('metrics')
+      v.setMetricCategory('runtime')
+    } else if (id === 'errors') v.showMarks({ sources: ['error'] })
+    else if (id === 'network')
+      v.showSpans({ sources: ['network'], sort: 'longest' })
+    else if (id === 'screens') v.showSpans({ sources: ['navigation'] })
+    else v.showSpans({})
+  }
+  const shown = v.issues.slice(0, MAX_ISSUES)
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior="automatic"
+      contentContainerStyle={{ paddingBottom: 32 }}
+    >
+      <Section
+        header={
+          v.issues.length ? t('issues', { count: v.issues.length }) : undefined
+        }
+        footer={
+          v.issues.length > shown.length
+            ? t('moreIssues', { count: v.issues.length - shown.length })
+            : undefined
+        }
+      >
+        {shown.length ? (
+          shown.map((issue, index) => (
+            <Row
+              key={index}
+              icon="⚠"
+              iconColor={palette.error}
+              title={issue.title}
+              subtitle={`${t(issueLabel(issue))} · +${(issue.event.timestampMs / 1000).toFixed(1)} s`}
+              value={
+                issue.valueMs === undefined
+                  ? undefined
+                  : formatMetric(issue.valueMs, 'ms')
+              }
+              tint={palette.error}
+              onPress={() => openEvent(v, issue.event)}
+              last={index === shown.length - 1}
+            />
+          ))
+        ) : (
+          <Row icon="✓" iconColor="#34c759" title={t('noIssues')} last />
+        )}
+      </Section>
+      <Section header={t('topics')} footer={t('summaryScope')}>
+        {v.topics.map((topic, index) => {
+          const name = capital(topic.id)
+          const hasIssues = topic.issues.length > 0
+          return (
+            <Row
+              key={topic.id}
+              icon={topicGlyph[topic.id].icon}
+              iconColor={
+                topic.tracked ? topicGlyph[topic.id].color : apple.secondary
+              }
+              title={t(`topic${name}` as InspectorLabelKey)}
+              subtitle={
+                !topic.tracked
+                  ? `${t('notTracked')} · ${t(`hint${name}` as InspectorLabelKey)}`
+                  : !topic.count && topic.id !== 'responsiveness'
+                    ? t('quiet')
+                    : t(`headline${name}` as InspectorLabelKey, {
+                        count: topic.count,
+                        value: ms(topic.value),
+                        budget: budgetMs,
+                        ...topic.values,
+                      })
+              }
+              value={hasIssues ? String(topic.issues.length) : undefined}
+              tint={hasIssues ? palette.error : undefined}
+              onPress={() => explore(topic.id)}
+              last={index === v.topics.length - 1}
+            />
+          )
+        })}
+      </Section>
+    </ScrollView>
+  )
+}

package/src/react/TimelineView.tsx

@@ -0,0 +1,87 @@
+import { LegendList } from '@legendapp/list/react-native'
+import React, { useCallback } from 'react'
+import { StyleSheet, Text } from 'react-native'
+import type { InspectorTranslator } from './labels'
+import type { Viewer } from './useTraceViewer'
+import { topicGlyph, type TimelineItem } from './topics'
+import { openEvent } from './SummaryView'
+import { formatMetric } from './viewerModel'
+import { apple, palette, Row } from './InspectorControls'
+
+const valueOf = (item: Extract<TimelineItem, { kind: 'event' }>) =>
+  'durationMs' in item.event
+    ? formatMetric(item.event.durationMs, 'ms')
+    : 'value' in item.event
+      ? formatMetric(item.event.value, item.event.unit)
+      : undefined
+const messageOf = (item: Extract<TimelineItem, { kind: 'event' }>) =>
+  item.event.attributes.find((a) => a.key === 'message')?.value
+
+/** Newest screen visit first; section headers are the screens the events happened on. */
+export function TimelineView({ v, t }: { v: Viewer; t: InspectorTranslator }) {
+  const renderItem = useCallback(
+    ({ item }: { item: TimelineItem }) => {
+      if (item.kind === 'screen')
+        return (
+          <Text style={styles.header}>
+            {item.name || t('beforeNavigation')} ·{' '}
+            {(item.timestampMs / 1000).toFixed(1)} s
+          </Text>
+        )
+      const message = messageOf(item)
+      return (
+        <Row
+          icon={topicGlyph[item.topic].icon}
+          iconColor={topicGlyph[item.topic].color}
+          title={item.event.name}
+          subtitle={`${(item.event.timestampMs / 1000).toFixed(2)} s${message ? ` · ${message}` : ''}`}
+          value={valueOf(item)}
+          tint={item.issue ? palette.error : undefined}
+          onPress={() => openEvent(v, item.event)}
+        />
+      )
+    },
+    // openEvent reads v.metrics at press time; rows only need new props when data changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [t, v.metrics]
+  )
+  return (
+    <LegendList<TimelineItem>
+      recycleItems
+      contentInsetAdjustmentBehavior="automatic"
+      style={styles.list}
+      data={v.timeline}
+      keyExtractor={(item) => item.key}
+      getItemType={(item) => item.kind}
+      estimatedItemSize={60}
+      initialScrollOffset={v.offsets.current.timeline ?? 0}
+      onScroll={(event) => {
+        v.offsets.current.timeline = event.nativeEvent.contentOffset.y
+      }}
+      scrollEventThrottle={100}
+      onScrollBeginDrag={() => v.setHolding(true)}
+      ListEmptyComponent={<Text style={styles.empty}>{t('empty')}</Text>}
+      renderItem={renderItem}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  list: { flex: 1 },
+  header: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: apple.secondary,
+    textTransform: 'uppercase',
+    paddingHorizontal: 16,
+    paddingTop: 18,
+    paddingBottom: 6,
+    backgroundColor: apple.grouped,
+  },
+  empty: {
+    fontSize: 15,
+    color: apple.secondary,
+    textAlign: 'center',
+    padding: 32,
+  },
+})