symbolicateSource() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ symbolicateSource() — react Function Reference

Dependency Diagram

graph TD
  5094f555_7132_4482_8a41_568283ebfed9["symbolicateSource()"]
  165c2fb6_ea87_519d_8825_3b32e0b24ca4["symbolicateSource.js"]
  5094f555_7132_4482_8a41_568283ebfed9 -->|defined in| 165c2fb6_ea87_519d_8825_3b32e0b24ca4
  style 5094f555_7132_4482_8a41_568283ebfed9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/symbolicateSource.js lines 49–160

export async function symbolicateSource(
  fetchFileWithCaching: FetchFileWithCaching,
  sourceURL: string,
  lineNumber: number, // 1-based
  columnNumber: number, // 1-based
): Promise<SourceMappedLocation | null> {
  if (!sourceURL || sourceURL.startsWith('<anonymous')) {
    return null;
  }
  const resource = await fetchFileWithCaching(sourceURL).catch(() => null);
  if (resource == null) {
    return null;
  }

  const resourceLines = resource.split(/[\r\n]+/);
  for (let i = resourceLines.length - 1; i >= 0; --i) {
    const resourceLine = resourceLines[i];

    // In case there is empty last line
    if (!resourceLine) continue;
    // Not an annotation? Stop looking for a source mapping url.
    if (!resourceLine.startsWith('//#')) break;

    if (resourceLine.includes(SOURCE_MAP_ANNOTATION_PREFIX)) {
      const sourceMapAnnotationStartIndex = resourceLine.indexOf(
        SOURCE_MAP_ANNOTATION_PREFIX,
      );
      const sourceMapAt = resourceLine.slice(
        sourceMapAnnotationStartIndex + SOURCE_MAP_ANNOTATION_PREFIX.length,
        resourceLine.length,
      );

      // Compute the absolute source map URL. If the base URL is invalid, gracefully bail.
      let sourceMapURL;
      try {
        sourceMapURL = new URL(sourceMapAt, sourceURL).toString();
      } catch (e) {
        // Fallback: try if sourceMapAt is already an absolute URL; otherwise give up.
        try {
          sourceMapURL = new URL(sourceMapAt).toString();
        } catch (_e) {
          return null;
        }
      }
      const sourceMap = await fetchFileWithCaching(sourceMapURL).catch(
        () => null,
      );
      if (sourceMap != null) {
        try {
          const parsedSourceMap = JSON.parse(sourceMap);
          const consumer = SourceMapConsumer(parsedSourceMap);
          const functionName = ''; // TODO: Parse function name from sourceContent.
          const {
            sourceURL: possiblyURL,
            line,
            column: columnZeroBased,
            ignored,
          } = consumer.originalPositionFor({
            lineNumber, // 1-based
            columnNumber, // 1-based
          });

          const column = columnZeroBased + 1;

          if (possiblyURL === null) {
            return null;
          }
          try {
            // sourceMapURL = https://react.dev/script.js.map
            void new URL(possiblyURL); // test if it is a valid URL

            return {
              location: [functionName, possiblyURL, line, column],
              ignored,
            };
          } catch (e) {
            // This is not valid URL
            if (
              // sourceMapURL = /file
              possiblyURL.startsWith('/') ||
              // sourceMapURL = C:\\...