react Architecture Docs
Home / File/ StackTraceView.js — react Source File

StackTraceView.js — react Source File

Architecture documentation for StackTraceView.js, a javascript file in the react codebase. 10 imports, 2 dependents.

File javascript BabelCompiler Validation 10 imports 2 dependents 2 functions

Entity Profile

Dependency Diagram

graph LR
  7db6a3fc_5457_73ae_9df6_4bd78494320f["StackTraceView.js"]
  4d6a124e_fdc4_9da9_8ac7_85f75cd106fe["useOpenResource.js"]
  7db6a3fc_5457_73ae_9df6_4bd78494320f --> 4d6a124e_fdc4_9da9_8ac7_85f75cd106fe
  25e89372_6558_2e4a_04f5_2e343e42cde5["ElementBadges.js"]
  7db6a3fc_5457_73ae_9df6_4bd78494320f --> 25e89372_6558_2e4a_04f5_2e343e42cde5
  dcddba19_583a_b531_9a4f_941e70dcbf0a["ElementBadges"]
  7db6a3fc_5457_73ae_9df6_4bd78494320f --> dcddba19_583a_b531_9a4f_941e70dcbf0a
  185a2fee_03b0_5b56_ed4d_2165d050f85d["StackTraceView.css"]
  7db6a3fc_5457_73ae_9df6_4bd78494320f --> 185a2fee_03b0_5b56_ed4d_2165d050f85d
  13680a3f_99de_28d1_e59a_bd17e6851f1d["FetchFileWithCachingContext.js"]
  7db6a3fc_5457_73ae_9df6_4bd78494320f --> 13680a3f_99de_28d1_e59a_bd17e6851f1d
  b2ae7acd_23fc_8be6_1598_6a4162c47a7b["formatLocationForDisplay.js"]
  7db6a3fc_5457_73ae_9df6_4bd78494320f --> b2ae7acd_23fc_8be6_1598_6a4162c47a7b
  0387a47c_28df_b84f_2410_96bf24210782["formatLocationForDisplay"]
  7db6a3fc_5457_73ae_9df6_4bd78494320f --> 0387a47c_28df_b84f_2410_96bf24210782
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  7db6a3fc_5457_73ae_9df6_4bd78494320f --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  d8f20c67_f5fa_0f0a_c967_c41fd9ffce07["ReactTypes"]
  7db6a3fc_5457_73ae_9df6_4bd78494320f --> d8f20c67_f5fa_0f0a_c967_c41fd9ffce07
  c3870ba8_6512_a088_2557_ff78b3a22e41["symbolicateSource"]
  7db6a3fc_5457_73ae_9df6_4bd78494320f --> c3870ba8_6512_a088_2557_ff78b3a22e41
  72d570aa_3875_3688_0200_4617e04d04ed["InspectedElementSuspendedBy.js"]
  72d570aa_3875_3688_0200_4617e04d04ed --> 7db6a3fc_5457_73ae_9df6_4bd78494320f
  d09ae4bb_9ed0_3257_c11b_1c199408288d["InspectedElementView.js"]
  d09ae4bb_9ed0_3257_c11b_1c199408288d --> 7db6a3fc_5457_73ae_9df6_4bd78494320f
  style 7db6a3fc_5457_73ae_9df6_4bd78494320f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {use, useContext} from 'react';

import useOpenResource from '../useOpenResource';

import ElementBadges from './ElementBadges';

import styles from './StackTraceView.css';

import type {ReactStackTrace, ReactCallSite} from 'shared/ReactTypes';

import type {SourceMappedLocation} from 'react-devtools-shared/src/symbolicateSource';

import FetchFileWithCachingContext from './FetchFileWithCachingContext';

import {symbolicateSourceWithCache} from 'react-devtools-shared/src/symbolicateSource';

import formatLocationForDisplay from './formatLocationForDisplay';

type CallSiteViewProps = {
  callSite: ReactCallSite,
  environmentName: null | string,
};

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;
// ... (63 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does StackTraceView.js do?
StackTraceView.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Validation subdomain.
What functions are defined in StackTraceView.js?
StackTraceView.js defines 2 function(s): CallSiteView, StackTraceView.
What does StackTraceView.js depend on?
StackTraceView.js imports 10 module(s): ElementBadges, ElementBadges.js, FetchFileWithCachingContext.js, ReactTypes, StackTraceView.css, formatLocationForDisplay, formatLocationForDisplay.js, react, and 2 more.
What files import StackTraceView.js?
StackTraceView.js is imported by 2 file(s): InspectedElementSuspendedBy.js, InspectedElementView.js.
Where is StackTraceView.js in the architecture?
StackTraceView.js is located at packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-shared/src/devtools/views/Components).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free