[react-devtools-shared] Fix URL construction when base URL is invalid (#34407)

### Problem
- Users encounter “Failed to construct 'URL': Invalid base URL” when
clicking the “View source” action in DevTools if the underlying base URL
is invalid.
- This exception originates from `new URL(relative, base)` and bubbles
up, interrupting the DevTools UI.
- Fixes GitHub issue
[#34317](https://github.com/facebook/react/issues/34317)

### Solution
- Wrap URL construction to:
  - First try `new URL(sourceMapAt, sourceURL)`.
  - If that fails, try `new URL(sourceMapAt)` as an absolute URL.
  - If both fail, return `null` (no symbolication) rather than throwing.
- This preserves normal behavior for valid bases and absolute URLs,
while avoiding crashes for invalid bases.

### Implementation details
- Updated `symbolicateSource` in
`packages/react-devtools-shared/src/symbolicateSource.js` to handle
invalid base URL scenarios without throwing.
- Added/verified tests in
`packages/react-devtools-shared/src/__tests__/utils-test.js`:
- “should not throw for invalid base URL with relative source map” →
resolves to `null`.
- “should resolve absolute source map even if base URL is invalid” →
still resolves correctly.

### Test plan
- Lint/format:
  - `yarn prettier-check`
  - `yarn linc`
- Type checking:
  - `yarn flow dom-node`
- Unit tests:
  - `yarn test --watchAll=false utils-test`
  - Optionally: `yarn test --watchAll=false utils-test inspectedElement`
- All of the above pass locally for experimental channel.

### Risks and rollout
- Risk: Low. Only affects cases where the base URL is invalid.
- Normal cases (valid base or absolute `sourceMappingURL`) are
unchanged.
- No user-facing API changes; DevTools UX becomes more resilient.

### Affected packages
- `react-devtools-shared`

### Related
- Fixes GitHub issue
[#34317](https://github.com/facebook/react/issues/34317)

### Checklist
- [x] Ran `yarn prettier-check`
- [x] Ran `yarn linc`
- [x] Ran `yarn flow dom-node`
- [x] Relevant unit tests passing
- [x] Linked issue and added a concise summary


<!--
  Thanks for submitting a pull request!
We appreciate you spending the time to work on these changes. Please
provide enough information so that others can review your pull request.
The three fields below are mandatory.

Before submitting a pull request, please make sure the following is
done:

1. Fork [the repository](https://github.com/facebook/react) and create
your branch from `main`.
  2. Run `yarn` in the repository root.
3. If you've fixed a bug or added code that should be tested, add tests!
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch
TestName` is helpful in development.
5. Run `yarn test --prod` to test in the production environment. It
supports the same options as `yarn test`.
6. If you need a debugger, run `yarn test --debug --watch TestName`,
open `chrome://inspect`, and press "Inspect".
7. Format your code with
[prettier](https://github.com/prettier/prettier) (`yarn prettier`).
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only
check changed files.
  9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`).
  10. If you haven't already, complete the CLA.

Learn more about contributing:
https://reactjs.org/docs/how-to-contribute.html
-->

## Summary

<!--
Explain the **motivation** for making this change. What existing problem
does the pull request solve?
-->

## How did you test this change?

<!--
Demonstrate the code is solid. Example: The exact commands you ran and
their output, screenshots / videos if the pull request changes the user
interface.
How exactly did you verify that your PR solves the issue you wanted to
solve?
  If you leave this empty, your PR will very likely be closed.
-->
This commit is contained in:
KimCookieYa 2025-09-06 22:00:45 +09:00 committed by GitHub
parent de5a1b203e
commit c4e2508dad
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 32 additions and 1 deletions

View File

@ -421,6 +421,26 @@ function f() { }
await expect(run('http://test/c.mjs')).resolves.toStrictEqual(result);
await expect(run('http://test/d.mjs')).resolves.toStrictEqual(result);
});
it('should not throw for invalid base URL with relative source map', async () => {
const fs2 = {
'bundle.js': `${source}bundle.js.map`,
};
const fetch2 = async url => fs2[url] || null;
const run = url => symbolicateSource(fetch2, url, 1, 1);
await expect(run('bundle.js')).resolves.toBe(null);
});
it('should resolve absolute source map even if base URL is invalid', async () => {
const fs3 = {
'invalid-base.js': `${source}http://test/a.mjs.map`,
'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"}`,
};
const fetch3 = async url => fs3[url] || null;
const run = url => symbolicateSource(fetch3, url, 4, 10);
await expect(run('invalid-base.js')).resolves.toStrictEqual(result);
});
});
describe('formatConsoleArguments', () => {

View File

@ -75,7 +75,18 @@ export async function symbolicateSource(
resourceLine.length,
);
const sourceMapURL = new URL(sourceMapAt, sourceURL).toString();
// 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,
);