From b080063331af4d2c359b3cc576813dbca6e7db5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Wed, 6 Aug 2025 13:45:06 -0400 Subject: [PATCH] [DevTools] Source Map Stack Traces such in await locations (#34094) Stacked on #34093. Instead of using the original `ReactStackTrace` that has the call sites on the server, this parses the `Error` object which has the virtual call sites on the client. We'll need this technique for things stack traces suspending on the client anyway like `use()`. We can then use these callsites to source map in the front end. We currently don't source map function names but might be useful for this use case as well as getting original component names from prod. One thing this doesn't do yet is that it doesn't ignore list the stack traces on the client using the source map's ignore list setting. It's not super important since we expect to have already ignore listed on the server but this will become important for client stack traces like `use()`. --- packages/react-devtools-shared/src/__tests__/utils-test.js | 2 +- packages/react-devtools-shared/src/symbolicateSource.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/utils-test.js b/packages/react-devtools-shared/src/__tests__/utils-test.js index 83b31903e0..dacbe0f46b 100644 --- a/packages/react-devtools-shared/src/__tests__/utils-test.js +++ b/packages/react-devtools-shared/src/__tests__/utils-test.js @@ -401,7 +401,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); exports.f = f; function f() { } //# sourceMappingURL=`; - const result = ['', 'http://test/a.mts', 1, 16]; + const result = ['', 'http://test/a.mts', 1, 17]; const fs = { 'http://test/a.mts': `export function f() {}`, 'http://test/a.mjs.map': `{"version":3,"file":"a.mjs","sourceRoot":"","sources":["a.mts"],"names":[],"mappings":";;AAAA,cAAsB;AAAtB,SAAgB,CAAC,KAAI,CAAC"}`, diff --git a/packages/react-devtools-shared/src/symbolicateSource.js b/packages/react-devtools-shared/src/symbolicateSource.js index e5f469a21a..49a30984c2 100644 --- a/packages/react-devtools-shared/src/symbolicateSource.js +++ b/packages/react-devtools-shared/src/symbolicateSource.js @@ -82,12 +82,14 @@ export async function symbolicateSource( const { sourceURL: possiblyURL, line, - column, + column: columnZeroBased, } = consumer.originalPositionFor({ lineNumber, // 1-based columnNumber, // 1-based }); + const column = columnZeroBased + 1; + if (possiblyURL === null) { return null; }