CallSiteView() — react Function Reference

Architecture documentation for the CallSiteView() function in StackTraceView.js from the react codebase.

Function javascript BabelCompiler Validation calls 1

Entity Profile

BabelCompiler→ Validation→ CallSiteView() — react Function Reference

Dependency Diagram

graph TD
  f14893ed_a642_91e8_4d09_870033938da3["CallSiteView()"]
  7db6a3fc_5457_73ae_9df6_4bd78494320f["StackTraceView.js"]
  f14893ed_a642_91e8_4d09_870033938da3 -->|defined in| 7db6a3fc_5457_73ae_9df6_4bd78494320f
  0387a47c_28df_b84f_2410_96bf24210782["formatLocationForDisplay()"]
  f14893ed_a642_91e8_4d09_870033938da3 -->|calls| 0387a47c_28df_b84f_2410_96bf24210782
  style f14893ed_a642_91e8_4d09_870033938da3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js lines 34–95

export function CallSiteView({
  callSite,
  environmentName,
}: CallSiteViewProps): React.Node {
  const fetchFileWithCaching = useContext(FetchFileWithCachingContext);

  const [virtualFunctionName, virtualURL, virtualLine, virtualColumn] =
    callSite;

  const symbolicatedCallSite: null | SourceMappedLocation =
    fetchFileWithCaching !== null
      ? use(
          symbolicateSourceWithCache(
            fetchFileWithCaching,
            virtualURL,
            virtualLine,
            virtualColumn,
          ),
        )
      : null;

  const [linkIsEnabled, viewSource] = useOpenResource(
    callSite,
    symbolicatedCallSite == null ? null : symbolicatedCallSite.location,
  );
  const [functionName, url, line, column] =
    symbolicatedCallSite !== null ? symbolicatedCallSite.location : callSite;
  const ignored =
    symbolicatedCallSite !== null ? symbolicatedCallSite.ignored : false;
  // TODO: Make an option to be able to toggle the display of ignore listed rows.
  // Ideally this UI should be higher than a single Stack Trace so that there's not
  // multiple buttons in a single inspection taking up space.

  const isBuiltIn = url === '' || url.startsWith('<anonymous>'); // This looks like a fake anonymous through eval.
  return (
    <div
      className={
        ignored
          ? styles.IgnoredCallSite
          : isBuiltIn
            ? styles.BuiltInCallSite
            : styles.CallSite
      }>
      {functionName || virtualFunctionName}
      {!isBuiltIn && (
        <>
          {' @ '}
          <span
            className={linkIsEnabled ? styles.Link : null}
            onClick={viewSource}
            title={url + ':' + line}>
            {formatLocationForDisplay(url, line, column)}
          </span>
        </>
      )}
      <ElementBadges
        className={styles.ElementBadges}
        environmentName={environmentName}
      />
    </div>
  );
}