Skip to content

Commit c4e2508

Browse files
authored
[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](#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](#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. -->
1 parent de5a1b2 commit c4e2508

File tree

2 files changed

+32
-1
lines changed

2 files changed

+32
-1
lines changed

packages/react-devtools-shared/src/__tests__/utils-test.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -421,6 +421,26 @@ function f() { }
421421
await expect(run('http://test/c.mjs')).resolves.toStrictEqual(result);
422422
await expect(run('http://test/d.mjs')).resolves.toStrictEqual(result);
423423
});
424+
425+
it('should not throw for invalid base URL with relative source map', async () => {
426+
const fs2 = {
427+
'bundle.js': `${source}bundle.js.map`,
428+
};
429+
const fetch2 = async url => fs2[url] || null;
430+
const run = url => symbolicateSource(fetch2, url, 1, 1);
431+
await expect(run('bundle.js')).resolves.toBe(null);
432+
});
433+
434+
it('should resolve absolute source map even if base URL is invalid', async () => {
435+
const fs3 = {
436+
'invalid-base.js': `${source}http://test/a.mjs.map`,
437+
'http://test/a.mts': `export function f() {}`,
438+
'http://test/a.mjs.map': `{"version":3,"file":"a.mjs","sourceRoot":"","sources":["a.mts"],"names":[],"mappings":";;AAAA,cAAsB;AAAtB,SAAgB,CAAC,KAAI,CAAC"}`,
439+
};
440+
const fetch3 = async url => fs3[url] || null;
441+
const run = url => symbolicateSource(fetch3, url, 4, 10);
442+
await expect(run('invalid-base.js')).resolves.toStrictEqual(result);
443+
});
424444
});
425445

426446
describe('formatConsoleArguments', () => {

packages/react-devtools-shared/src/symbolicateSource.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,18 @@ export async function symbolicateSource(
7575
resourceLine.length,
7676
);
7777

78-
const sourceMapURL = new URL(sourceMapAt, sourceURL).toString();
78+
// Compute the absolute source map URL. If the base URL is invalid, gracefully bail.
79+
let sourceMapURL;
80+
try {
81+
sourceMapURL = new URL(sourceMapAt, sourceURL).toString();
82+
} catch (e) {
83+
// Fallback: try if sourceMapAt is already an absolute URL; otherwise give up.
84+
try {
85+
sourceMapURL = new URL(sourceMapAt).toString();
86+
} catch (_e) {
87+
return null;
88+
}
89+
}
7990
const sourceMap = await fetchFileWithCaching(sourceMapURL).catch(
8091
() => null,
8192
);

0 commit comments

Comments
 (0)