Module log2trace

log2trace-ui — embeddable trace visualization Web Component.

Importing this module registers three custom elements as a side effect: <trace-visualizer> (the main waterfall), <trace-filter> (declarative filter inputs), and <span-kind-rule> (declarative span-kind classification rules). After import the component can be used directly from HTML, or driven programmatically via the exports below.

Example: Declarative usage

<script type="module" src="./log2trace.js"></script>
<trace-visualizer data-url="./trace.json"></trace-visualizer>

Example: Programmatic usage with raw logs

import 'log2trace-ui';
import { transformLogs } from 'log2trace-ui';

const el = document.querySelector('trace-visualizer');
el.traceData = transformLogs(myLogs, {
  traceIdField: 'text.BTMID',
  spanNameField: 'text.Action',
  serviceNameField: 'text.MachineName',
  timestampField: 'text.Timestamp',
});

References

DisplayConfig → DisplayConfig
FetchCallback → FetchCallback
FieldValue → FieldValue
Filter → Filter
FilterFieldConfig → FilterFieldConfig
FilterOption → FilterOption
filterSpans → filterSpans
getField → getField
LogEntry → LogEntry
normalizeOptions → normalizeOptions
OptionsSource → OptionsSource
resolveDisplayDefaults → resolveDisplayDefaults
Template → Template
TraceTree → TraceTree
TraceVisualizerConfig → TraceVisualizerConfig
TransformConfig → TransformConfig
transformLogs → transformLogs

Module log2trace

Example: Declarative usage

Example: Programmatic usage with raw logs

References

Settings

On This Page