import { ScrollArea } from '../components/ScrollArea'; import { Section } from '../components/Section'; import { KeyValueGrid, type KeyValueItem } from '../components/KeyValueGrid'; import type { HttpNetworkEntry, SSENetworkEntry } from '../state/model'; import type { Initiator, InitiatorStackFrame } from '../../shared/client'; import { formatFrameLocation, formatSourcePath, getBestInitiatorFrame, getGeneratedFrameLocation, getInitiatorLabel, getInitiatorLocationLabel, getSourceFrameLocation, } from '../utils/initiator'; export type InitiatorTabProps = { selectedRequest: HttpNetworkEntry | SSENetworkEntry; }; const formatInitiatorType = (type: string) => { switch (type) { case 'script': return 'Script'; case 'other': return 'Other'; default: return type; } }; const formatSymbolicationStatus = (initiator?: Initiator) => { switch (initiator?.symbolicationStatus) { case 'pending': return 'Resolving source...'; case 'complete': return 'Resolved'; case 'failed': return 'Failed'; case 'unavailable': return 'Unavailable'; default: return null; } }; const getInitiatorItems = (initiator?: Initiator): KeyValueItem[] => { if (!initiator) { return []; } const sourceFrame = getBestInitiatorFrame(initiator); const sourceLocation = getInitiatorLocationLabel(initiator); const generatedLocation = formatFrameLocation( getGeneratedFrameLocation(initiator), ); const status = formatSymbolicationStatus(initiator); return [ { key: 'Type', value: formatInitiatorType(initiator.type), }, ...(status ? [ { key: 'Source map', value: status, valueClassName: initiator.symbolicationStatus === 'failed' ? 'text-red-300' : 'text-gray-300', }, ] : []), ...(sourceFrame?.functionName ? [ { key: 'Function', value: sourceFrame.functionName, valueClassName: 'font-mono text-blue-300', }, ] : []), ...(sourceFrame?.url ? [ { key: 'Source', value: formatSourcePath(sourceFrame.url), valueClassName: 'font-mono text-blue-300', }, ] : []), ...(sourceFrame?.lineNumber !== undefined ? [ { key: 'Line', value: sourceFrame.lineNumber, }, ] : []), ...(sourceFrame?.columnNumber !== undefined ? [ { key: 'Column', value: sourceFrame.columnNumber, }, ] : []), ...(sourceLocation ? [ { key: 'Location', value: sourceLocation, valueClassName: 'font-mono text-blue-300', }, ] : []), ...(generatedLocation && generatedLocation !== sourceLocation ? [ { key: 'Generated', value: generatedLocation, valueClassName: 'font-mono text-gray-500', }, ] : []), ]; }; const getStackFrameLocation = (frame: InitiatorStackFrame) => { const sourceLocation = formatFrameLocation(getSourceFrameLocation(frame)); const generatedLocation = formatFrameLocation( getGeneratedFrameLocation(frame), ); if ( sourceLocation && generatedLocation && sourceLocation !== generatedLocation ) { return ( {sourceLocation} generated {generatedLocation} ); } return sourceLocation ?? generatedLocation ?? 'Unknown location'; }; const getStackItems = (initiator?: Initiator): KeyValueItem[] => { return ( initiator?.stack?.map((frame, index) => { return { key: frame.functionName || `Frame ${index + 1}`, value: getStackFrameLocation(frame), keyClassName: 'font-mono', valueClassName: 'font-mono text-blue-300', }; }) ?? [] ); }; export const InitiatorTab = ({ selectedRequest }: InitiatorTabProps) => { const initiator = selectedRequest.initiator; const initiatorItems = getInitiatorItems(initiator); const stackItems = getStackItems(initiator); const initiatorLabel = getInitiatorLabel(initiator); const initiatorLocation = getInitiatorLocationLabel(initiator); const hasSourceMappedFrame = Boolean( getSourceFrameLocation(initiator) || initiator?.stack?.some((frame) => getSourceFrameLocation(frame)), ); return (
Triggered by
{initiatorLabel ?? 'Unknown initiator'}
{initiatorLocation && initiatorLocation !== initiatorLabel && (
{initiatorLocation}
)}
{!hasSourceMappedFrame && initiator?.symbolicationStatus !== 'pending' && (
This request only includes generated bundle location data. Metro source maps were not available for this entry.
)} {initiator?.symbolicationError && (
{initiator.symbolicationError}
)} {initiator?.codeFrame && (
              {initiator.codeFrame.content}
            
)} {stackItems.length > 0 && (
)}
); };