Error stack trace line/col points to index.js not to original file

[lostsequence]

Stack trace on the screenshot below points to index.js (line: 49354, col: 18 and line: 49329 and col: 11) but not to the original file (ErroBoundary or Loading)

we are using react/typesript
esbuild config:

[evanw]

It’s expected that they aren’t working. You have set the source map mode to external which means there is no link from the output file to the source map, so there is no way for the browser to find it. You should use another mode instead such as just using sourcemap: true. See the documentation for details: https://esbuild.github.io/api/#sourcemap.

[lostsequence]

It’s expected that they aren’t working. You have set the source map mode to external which means there is no link from the output file to the source map, so there is no way for the browser to find it. You should use another mode instead such as just using sourcemap: true. See the documentation for details: https://esbuild.github.io/api/#sourcemap.

Sorry, my bad. Forgot to mention that it is local build and all sources are available. I use "external" sourcemap for security reasons. But with "true" it is still not mapped to correct source files.
I use componentDidCatch (errorInfo.componentStack) to catch unhandled errors and that is what React is showing:

It points to "index.js"
A that is browser error log:

And it points to the right file.

Looks like everything I log inside componentDidCatch is not mapped to the correct source files:

componentDidCatch(error: Error, errorInfo: ErrorInfo) {
  console.error(`Logged by App ${error.stack}`)
  console.error(`Logged by App ${errorInfo.componentStack}`)
}

Result:

Minified version with sourcemap "true":
componentDidCatch log:

browser log:

[evanw]

Are you saying that when the error is thrown, it has the correct stack trace, but when you log error.stack, it has the incorrect stack trace? That's expected, and is how all browsers work AFAIK. Source maps are interpreted by developer tools for thrown exceptions but error.stack is not affected by source maps (presumably because error.stack is a synchronous API while fetching source maps and remapping stack traces of thrown exceptions is asynchronous). If you want the text in the actual error.stack string to be remapped, you'll have to do it yourself. This is documented here: https://esbuild.github.io/api/#using-source-maps. Remapping error.stack is done by node but not by the browser.

[lostsequence]

Yes. I understand the point, thank you.
I used rollup before and it showed mapped sources in componentDidCatch logs.
I restored prev build system and here is result of the same actions:

And in code debug I see mapped sources.
That is why this question was raised.

[lostsequence]

Sorry, the problem is that with prev build system I used not bundled version for dev.
Can I somehow use transpiled but not bundled version for dev ?

[evanw]

This isn't super straightforward since esbuild is primarily a bundler, and doesn't include a recursive traversal feature. You can transpile each file with individually by invoking esbuild on each file with bundling disabled, but you may have to write some code to build up the list of files and then pass each one to esbuild.

[evanw]

Closing as a duplicate of #708.