markerikson / react-prod-sourcemaps Goto Github PK

It would be great to have a vite plugin, among other build tools, to enable shipping this change w/ minimal futzing on the user's part.

Refs:

• https://vitejs.dev/guide/api-plugin.html
• https://rollupjs.org/plugin-development/
• https://rollupjs.org/plugin-development/#this-getcombinedsourcemap

probably just needs a post-build hook and a grep of the build directory?

Introduce the x_google_ignoreList extension in the sourcemaps generated by this project. This will facilitate a more streamlined debugging experience in Chrome (and other supporting browsers) by automatically filtering out framework and dependency code.

Benefit

Implementing x_google_ignoreList in the sourcemaps will align this project with modern web development practices, offering a more focused and efficient debugging experience for developers using Chrome DevTools. This change will particularly benefit those who regularly engage in debugging complex applications with numerous dependencies.

Background Context

• Sourcemaps added to React:
  • facebook/react#20186
    • facebook/react#26446
• https://developer.chrome.com/blog/devtools-modern-web-debugging/#just-my-code

  • The ignore-listing is enabled by populating an extra x_google_ignoreList field in the source map that Angular generates when compiling the project. The Chrome DevTools team encourages other framework authors to implement a similar change. Refer to the Case Study: Better Angular Debugging with DevTools post for more details.

• https://developer.chrome.com/blog/devtools-better-angular-debugging/#ignore-listing-code

  • Ignore-listing code
    When debugging applications using Chrome DevTools, authors generally only want to see just their code, not that of the framework underneath or some dependency tucked away in the node_modules folder.

    To achieve this, the DevTools team has introduced an extension to source maps, called x_google_ignoreList. This extension is used to identify third-party sources such as framework code or bundler-generated code. When a framework uses this extension, authors now automatically avoid code that they don't want to see or step through without having to manually configure this beforehand.

    The x_google_ignoreList source map extension is supported by Chrome DevTools starting with Chrome 106.

• https://developer.chrome.com/articles/x-google-ignore-list/

  • The ignoreList source map extension

    Improve debugging experience in Chrome DevTools with the ignoreList source map extension.

See Also

• facebook/react#27774
• vercel/next.js#41370
  • vercel/next.js#41371
• vuejs/rfcs#607
• preactjs/preact#4225
• sveltejs/svelte#9740
• developit/microbundle#1066
• angular/angular-cli#23545
• https://nuxt.com/blog/v3-3#better-logging-in-browser-devtools
  • nuxt/nuxt#19243
• https://vitejs.dev/config/server-options.html#server-sourcemapignorelist
  • vitejs/vite#12174
  • vitejs/vite#12633
  • vitejs/vite#12694
• https://rollupjs.org/configuration-options/#output-sourcemapignorelist
  • rollup/rollup#4847
  • rollup/rollup#4846
  • rollup/rollup#4848
  • rollup/rollup#4926
• Rich-Harris/magic-string#241
  • Rich-Harris/magic-string#240
  • Rich-Harris/magic-string#243

Tangentially related issues for improving modern debugging support:

• facebook/react#25742

Seems that we have an error originating from yargs when importing the package in CJS

Error [ERR_REQUIRE_ESM]: require() of ES Module /home/runner/work/sentry/sentry/node_modules/string-width/index.js from /home/runner/work/sentry/sentry/node_modules/jest-cli/node_modules/cliui/build/index.cjs not supported. 
Instead change the require of index.js in /home/runner/work/sentry/sentry/node_modules/jest-cli/node_modules/cliui/build/index.cjs to a dynamic import() which is available in all CommonJS modules.     

at Object.<anonymous> (/home/runner/work/sentry/sentry/node_modules/jest-cli/node_modules/cliui/build/index.cjs:291:21)    
at Object.<anonymous> (/home/runner/work/sentry/sentry/node_modules/jest-cli/node_modules/yargs/build/index.cjs:1:59901)    
at Object.<anonymous> (/home/runner/work/sentry/sentry/node_modules/jest-cli/node_modules/yargs/index.cjs:5:30)     
at _yargs (/home/runner/work/sentry/sentry/node_modules/jest-cli/build/run.js:30:39)     
at buildArgv (/home/runner/work/sentry/sentry/node_modules/jest-cli/build/run.js:143:26)     
at Object.run (/home/runner/work/sentry/sentry/node_modules/jest-cli/build/run.js:118:24)     
at Object.<anonymous> (/home/runner/work/sentry/sentry/scripts/test.js:27:6)

I'm guessing react-dom was the MVP option for testing this out? It would be great to setup sourcemaps for

• react.production.min.js
• react-jsx-runtime.production.min.js

in addition to react-dom

in production build for server side rendering, bundler will use react-dom-server.[type.].min.js, how about add those file sourcemap?

We currently do not provide sourcemaps for react-dom/profiling bundle. It would be useful if we could provide these as they might be used by a lot of folks + the current remapping behavior is slightly confusing. e.g. I only noticed this after using strict mode in our webpack build step at Sentry and have it throw and error before I noticed a webpack resolve alias for react-dom to react-dom/profiling...

@markerikson iirc you mentioned we could add these somewhat trivially? I would be happy to look into building these and checking them into the repo, wdyt?

When trying to integrate the Vite plugin, I get this error:

webclient on  update-react-sourcemaps-tool [!] via  v18.16.0 
❯ pnpm build

> [email protected] build /Users/calebjasik/Git/defined.net/webclient
> vite build && pnpm post-build

failed to load config from /Users/calebjasik/Git/defined.net/webclient/vite.config.ts
error during build:
file:///Users/calebjasik/Git/defined.net/webclient/vite.config.ts.timestamp-1694618874841-ea67fb622aaf5.mjs:3
import { ViteReactSourcemapsPlugin } from "file:///Users/calebjasik/Git/defined.net/webclient/node_modules/.pnpm/@[email protected]_patch_hash=jpyptpvw6t3tnchzyqe4intg7m/node_modules/@acemarke/react-prod-sourcemaps/lib/index.js";
         ^^^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'ViteReactSourcemapsPlugin' not found. The requested module 'file:///Users/calebjasik/Git/defined.net/webclient/node_modules/.pnpm/@[email protected]_patch_hash=jpyptpvw6t3tnchzyqe4intg7m/node_modules/@acemarke/react-prod-sourcemaps/lib/index.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'file:///Users/calebjasik/Git/defined.net/webclient/node_modules/.pnpm/@[email protected]_patch_hash=jpyptpvw6t3tnchzyqe4intg7m/node_modules/@acemarke/react-prod-sourcemaps/lib/index.js';
const { ViteReactSourcemapsPlugin } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
 ELIFECYCLE  Command failed with exit code 1.

webclient on  update-react-sourcemaps-tool [!] via  v18.16.0 
❯ 

which matches the errors described in https://arethetypeswrong.github.io/?p=%40acemarke%2Freact-prod-sourcemaps%400.0.5