From 5a2f9acf3ef7da1b7966bc65e71fc430ae8a6f37 Mon Sep 17 00:00:00 2001 From: nanianlisao <597219320@qq.com> Date: Mon, 20 May 2024 14:08:41 +0800 Subject: [PATCH] chore: use source-map-js --- e2e/cases/server/overlay/index.test.ts | 2 +- packages/core/modern.config.ts | 4 +++- packages/core/package.json | 6 +++++- packages/core/src/client/findSourceMap.ts | 7 ++++--- packages/core/src/client/overlay.ts | 17 ----------------- packages/core/src/client/runtimeErrors.ts | 14 ++++++++++++++ .../core/src/server/compilerDevMiddleware.ts | 9 +++++++++ pnpm-lock.yaml | 12 +++--------- 8 files changed, 39 insertions(+), 32 deletions(-) create mode 100644 packages/core/src/client/runtimeErrors.ts diff --git a/e2e/cases/server/overlay/index.test.ts b/e2e/cases/server/overlay/index.test.ts index 19dcc4895b..cb5908f940 100644 --- a/e2e/cases/server/overlay/index.test.ts +++ b/e2e/cases/server/overlay/index.test.ts @@ -39,7 +39,7 @@ test('should show overlay correctly', async ({ page }) => { fse.readFileSync(appPath, 'utf-8').replace('', ''), ); - await expect(errorOverlay.locator('.title')).toHaveText('Compilation failed'); + await expect(errorOverlay.locator('.title')).toHaveText('Failed to compile'); await rsbuild.close(); diff --git a/packages/core/modern.config.ts b/packages/core/modern.config.ts index be36b4bc4c..1ef88d3e24 100644 --- a/packages/core/modern.config.ts +++ b/packages/core/modern.config.ts @@ -18,6 +18,7 @@ const externals = [ ...commonExternals, '@rsbuild/core/client/hmr', '@rsbuild/core/client/overlay', + '@rsbuild/core/client/runtimeErrors', ]; // Since the relative paths of bundle and compiled have changed, @@ -69,10 +70,11 @@ export default defineConfig({ input: { hmr: 'src/client/hmr.ts', overlay: 'src/client/overlay.ts', + runtimeErrors: 'src/client/runtimeErrors.ts', }, target: BUILD_TARGET.client, dts: false, - externals: ['./hmr'], + externals: ['./hmr', './overlay'], outDir: './dist/client', autoExtension: true, externalHelpers: true, diff --git a/packages/core/package.json b/packages/core/package.json index e2888a911a..2855f6cb6d 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -27,6 +27,10 @@ "types": "./dist-types/client/overlay.d.ts", "default": "./dist/client/overlay.js" }, + "./client/runtimeErrors": { + "types": "./dist/client/runtimeErrors.d.ts", + "default": "./dist/client/runtimeErrors.js" + }, "./types": { "types": "./types.d.ts" }, @@ -57,7 +61,7 @@ "core-js": "~3.36.0", "html-webpack-plugin": "npm:html-rspack-plugin@5.7.2", "postcss": "^8.4.38", - "source-map": "0.5.7" + "source-map-js": "^1.2.0" }, "devDependencies": { "@types/fs-extra": "^11.0.4", diff --git a/packages/core/src/client/findSourceMap.ts b/packages/core/src/client/findSourceMap.ts index 6302d9f35d..d0ef5b8414 100644 --- a/packages/core/src/client/findSourceMap.ts +++ b/packages/core/src/client/findSourceMap.ts @@ -1,6 +1,3 @@ -// @ts-expect-error -import { SourceMapConsumer } from 'source-map'; - const fetchContent = (url: string) => fetch(url).then((r) => r.text()); const findSourceMap = async (fileSource: string, filename: string) => { @@ -69,6 +66,8 @@ export const findSourceCode = async (sourceInfo: any) => { if (!smContent) return; const rawSourceMap = JSON.parse(smContent); + const { SourceMapConsumer } = await import('source-map-js'); + const consumer = await new SourceMapConsumer(rawSourceMap); // Use sourcemap to find the source code location @@ -81,6 +80,8 @@ export const findSourceCode = async (sourceInfo: any) => { const sourceCode = consumer.sourceContentFor(pos.source); return { sourceCode: formatSourceCode(sourceCode, pos), + // Please use an absolute path in order to open it in vscode. + // Take webpack as an example. Please configure it correctly for [output.devtoolModuleFilenameTemplate](https://www.webpackjs.com/configuration/output/#outputdevtoolmodulefilenametemplate) sourceFile: url, }; }; diff --git a/packages/core/src/client/overlay.ts b/packages/core/src/client/overlay.ts index 71bcb3d853..5451768d1b 100644 --- a/packages/core/src/client/overlay.ts +++ b/packages/core/src/client/overlay.ts @@ -1,5 +1,4 @@ import type { OverlayError } from '../types'; -import { formatRuntimeErrors } from './format'; import { registerOverlay } from './hmr'; function stripAnsi(content: string) { @@ -339,19 +338,3 @@ if (typeof document !== 'undefined') { '[Rsbuild] Failed to display error overlay as document is not available, you can disable the `dev.client.overlay` option.', ); } - -const config = RSBUILD_CLIENT_CONFIG; - -if (config.overlay.runtimeErrors) { - window.addEventListener('error', async (event) => { - const formatted = await formatRuntimeErrors(event, false); - createOverlay(formatted); - }); - - window.addEventListener('unhandledrejection', async (event) => { - if (event.reason?.stack) { - const formatted = await formatRuntimeErrors(event, true); - createOverlay(formatted); - } - }); -} diff --git a/packages/core/src/client/runtimeErrors.ts b/packages/core/src/client/runtimeErrors.ts new file mode 100644 index 0000000000..0aa6f0fdf6 --- /dev/null +++ b/packages/core/src/client/runtimeErrors.ts @@ -0,0 +1,14 @@ +import { formatRuntimeErrors } from './format'; +import { createOverlay } from './overlay'; + +window.addEventListener('error', async (event) => { + const formatted = await formatRuntimeErrors(event, false); + createOverlay(formatted); +}); + +window.addEventListener('unhandledrejection', async (event) => { + if (event.reason?.stack) { + const formatted = await formatRuntimeErrors(event, true); + createOverlay(formatted); + } +}); diff --git a/packages/core/src/server/compilerDevMiddleware.ts b/packages/core/src/server/compilerDevMiddleware.ts index c1c5333113..af6b75616f 100644 --- a/packages/core/src/server/compilerDevMiddleware.ts +++ b/packages/core/src/server/compilerDevMiddleware.ts @@ -31,6 +31,15 @@ function getClientPaths(devConfig: DevConfig) { clientPaths.push(`${require.resolve('@rsbuild/core/client/overlay')}`); } + if ( + typeof devConfig?.client?.overlay === 'object' && + devConfig.client.overlay.runtimeErrors + ) { + clientPaths.push( + `${require.resolve('@rsbuild/core/client/runtimeErrors')}`, + ); + } + return clientPaths; } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e5f8d543be..e06ec7ef79 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -704,9 +704,9 @@ importers: postcss: specifier: ^8.4.38 version: 8.4.38 - source-map: - specifier: 0.5.7 - version: 0.5.7 + source-map-js: + specifier: ^1.2.0 + version: 1.2.0 devDependencies: '@types/fs-extra': specifier: ^11.0.4 @@ -7873,10 +7873,6 @@ packages: source-map-support@0.5.21: resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==} - source-map@0.5.7: - resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==} - engines: {node: '>=0.10.0'} - source-map@0.6.1: resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==} engines: {node: '>=0.10.0'} @@ -15955,8 +15951,6 @@ snapshots: buffer-from: 1.1.2 source-map: 0.6.1 - source-map@0.5.7: {} - source-map@0.6.1: {} source-map@0.7.4: {}