feat: display the source of client error

packages/error-overlay/src/client.ts

@@ -1,5 +1,4 @@
 import iframeScript from 'iframeScript';
-import { parse } from 'stacktrace-parser';
 
 import * as errorTypeHandler from './view/errorTypeHandler';
 import {
@@ -10,6 +9,7 @@ import {
  TYPE_REFRESH,
  STACK_TRACE_LIMIT
 } from './constants';
+import { parseStack } from './view/helpers/parseStack';
 
 let isRegistered = false;
 let stackTraceLimit: number | undefined = undefined;
@@ -45,7 +45,7 @@ function onUnhandledError(ev: ErrorEvent) {
  errorType = {
  type: TYPE_UNHANDLED_ERROR,
  reason: error,
- frames: parse(error.stack)
+ frames: parseStack(error.stack)
  };
  update();
 }
@@ -64,7 +64,7 @@ function onUnhandledRejection(ev: PromiseRejectionEvent) {
  errorType = {
  type: TYPE_UNHANDLED_REJECTION,
  reason: reason,
- frames: parse(reason.stack)
+ frames: parseStack(reason.stack)
  };
  update();
 }

packages/error-overlay/src/middleware/helper/createOriginalStackFrame.ts

@@ -0,0 +1,85 @@
+import { codeFrameColumns } from '@babel/code-frame';
+import { StackFrame } from 'stacktrace-parser';
+
+import type webpack from '@shuvi/toolpack/lib/webpack';
+
+import { getSourcePath } from './getSourcePath';
+import { getModuleById } from './getModuleById';
+import { findOriginalSourcePositionAndContent } from './findOriginalSourcePositionAndContent';
+
+export type OriginalStackFrameResponse = {
+ originalStackFrame: StackFrame;
+ originalCodeFrame: string | null;
+};
+
+export async function createOriginalStackFrame({
+ line,
+ column,
+ source,
+ modulePath,
+ frame,
+ errorMessage,
+ compilation
+}: {
+ line: number;
+ column: number | null;
+ source: any;
+ modulePath?: string;
+ frame: any;
+ errorMessage?: string;
+ compilation?: webpack.Compilation;
+}): Promise<OriginalStackFrameResponse | null> {
+ const match = errorMessage?.match(/'([^']+)' module/);
+ const moduleNotFound = match && match[1];
+ const result =
+ moduleNotFound && compilation
+ ? getModuleById(
+ modulePath,
+ compilation!
+ )?.buildInfo?.importLocByPath?.get(moduleNotFound) ?? null
+ : await findOriginalSourcePositionAndContent(source, {
+ line,
+ column
+ });
+
+ if (result === null) {
+ return null;
+ }
+
+ const { sourcePosition, sourceContent } = result;
+
+ if (!sourcePosition.source) {
+ return null;
+ }
+
+ const filePath = getSourcePath(sourcePosition.source) || modulePath || '';
+
+ const originalFrame: StackFrame = {
+ file: sourceContent ? filePath : sourcePosition.source,
+ lineNumber: sourcePosition.line,
+ column: sourcePosition.column,
+ methodName: frame.methodName,
+ arguments: []
+ };
+
+ const originalCodeFrame: string | null =
+ !(originalFrame.file?.includes('node_modules') ?? true) &&
+ sourceContent &&
+ sourcePosition.line
+ ? (codeFrameColumns(
+ sourceContent,
+ {
+ start: {
+ line: sourcePosition.line,
+ column: sourcePosition.column ?? 0
+ }
+ },
+ { forceColor: true }
+ ) as string)
+ : null;
+
+ return {
+ originalStackFrame: originalFrame,
+ originalCodeFrame
+ };
+}

packages/error-overlay/src/middleware/helper/getOriginalStackFrame.ts

@@ -0,0 +1,88 @@
+import type { StackFrame } from 'stacktrace-parser';
+import type webpack from '@shuvi/toolpack/lib/webpack';
+import type { Source } from './getSourceById';
+import type { OriginalStackFrame } from '../../view/helpers/stack-frame';
+import { createOriginalStackFrame } from './createOriginalStackFrame';
+
+export async function getOriginalStackFrame(
+ frame: StackFrame,
+ cache: Map<string, Source>,
+ resolveBuildFile: (...paths: string[]) => string,
+ buildDefaultDir: string,
+ errorMessage?: string,
+ compilation?: webpack.Compilation
+): Promise<OriginalStackFrame> {
+ if (
+ !(
+ frame.file?.startsWith('webpack-internal:') ||
+ frame.file?.startsWith('file:')
+ )
+ ) {
+ return {
+ error: false,
+ reason: null,
+ external: true,
+ expanded: false,
+ sourceStackFrame: frame,
+ originalStackFrame: null,
+ originalCodeFrame: null
+ };
+ }
+
+ if (cache.get(frame.file) === null) {
+ return {
+ error: true,
+ reason: 'No Content',
+ external: false,
+ expanded: false,
+ sourceStackFrame: frame,
+ originalStackFrame: null,
+ originalCodeFrame: null
+ };
+ }
+
+ const frameLine = parseInt(frame.lineNumber?.toString() ?? '', 10);
+ let frameColumn: number | null = parseInt(frame.column?.toString() ?? '', 10);
+ if (!frameColumn) {
+ frameColumn = null;
+ }
+ const originalStackFrameResponse = await createOriginalStackFrame({
+ line: frameLine,
+ column: frameColumn,
+ source: cache.get(frame.file),
+ frame,
+ modulePath: resolveBuildFile(
+ buildDefaultDir,
+ frame.file.replace(/^(file:\/\/)/, '')
+ ),
+ errorMessage,
+ compilation
+ });
+ if (originalStackFrameResponse === null) {
+ return {
+ error: true,
+ reason: 'No Content',
+ external: false,
+ expanded: false,
+ sourceStackFrame: frame,
+ originalStackFrame: null,
+ originalCodeFrame: null
+ };
+ }
+ return {
+ error: false,
+ reason: null,
+ external: false,
+ expanded: !Boolean(
+ /* collapsed */
+ (frame.file?.includes('node_modules') ||
+ originalStackFrameResponse.originalStackFrame?.file?.includes(
+ 'node_modules'
+ )) ??
+ true
+ ),
+ sourceStackFrame: frame,
+ originalStackFrame: originalStackFrameResponse.originalStackFrame,
+ originalCodeFrame: originalStackFrameResponse.originalCodeFrame || null
+ };
+}

packages/error-overlay/src/middleware/helper/getSourceById.ts

@@ -1,4 +1,3 @@
-import { promises as fs } from 'fs';
 import { RawSourceMap } from 'source-map';
 import dataUriToBuffer, { MimeBuffer } from 'data-uri-to-buffer';
 import type webpack from '@shuvi/toolpack/lib/webpack';
@@ -8,12 +7,52 @@ import { getModuleById } from './getModuleById';
 
 export type Source = { map: () => RawSourceMap } | null;
 
-function getRawSourceMap(fileContents: string): RawSourceMap | null {
- const sourceUrl = getSourceMapUrl(fileContents);
- if (!sourceUrl?.startsWith('data:')) {
+const readFileWrapper = (
+ url: string,
+ compiler: webpack.Compiler
+): Promise<string | null> => {
+ return new Promise(resolve => {
+ compiler.outputFileSystem.readFile(url, (err: any, res: any) => {
+ if (err) {
+ resolve(null);
+ }
+ resolve(res.toString());
+ });
+ });
+};
+
+async function getRawSourceMap(
+ fileUrl: string,
+ compiler: webpack.Compiler
+): Promise<RawSourceMap | null> {
+ //fetch sourcemap directly first
+ const url = fileUrl + '.map';
+ let sourceMapContent: string | null = null;
+
+ sourceMapContent = await readFileWrapper(url, compiler);
+
+ if (sourceMapContent !== null) {
+ return sourceMapContent;
+ }
+ //fetch sourcemap by fileContent
+ const fileContent = await readFileWrapper(fileUrl, compiler);
+
+ if (fileContent == null) {
+ return null;
+ }
+
+ const sourceUrl = getSourceMapUrl(fileContent);
+
+ if (!sourceUrl) {
  return null;
  }
 
+ if (!sourceUrl?.startsWith('data:')) {
+ const index = fileUrl.lastIndexOf('/');
+ const urlFromFile = fileUrl.substring(0, index + 1) + sourceUrl;
+ return await readFileWrapper(urlFromFile, compiler);
+ }
+
  let buffer: MimeBuffer;
  try {
  buffer = dataUriToBuffer(sourceUrl);
@@ -38,22 +77,15 @@ function getRawSourceMap(fileContents: string): RawSourceMap | null {
 export async function getSourceById(
  isFile: boolean,
  id: string,
+ compiler: webpack.Compiler,
  compilation?: webpack.Compilation
 ): Promise<Source> {
  if (isFile) {
- const fileContent: string | null = await fs
- .readFile(id, 'utf-8')
- .catch(() => null);
+ const map = await getRawSourceMap(id, compiler);
 
- if (fileContent == null) {
+ if (map === null) {
  return null;
  }
-
- const map = getRawSourceMap(fileContent);
- if (map == null) {
- return null;
- }
-
  return {
  map() {
  return map;

packages/error-overlay/src/middleware/helper/getSourcePath.ts

@@ -4,13 +4,11 @@ export function getSourcePath(source: string) {
  return source.substring(11);
  }
 
- // Make sure library name is filtered out as well
- if (source.startsWith('webpack://_N_E/')) {
- return source.substring(15);
- }
-
  if (source.startsWith('webpack://')) {
- return source.substring(10);
+ return source.replace(
+ /^webpack:\/\/[^/]+/ /* webpack://namaspcae/resourcepath */,
+ ''
+ );
  }
 
  if (source.startsWith('/')) {

packages/error-overlay/src/middleware/launchEditorMiddleware.ts

@@ -2,7 +2,7 @@ import launchEditor from 'launch-editor';
 import { IncomingMessage, ServerResponse } from 'http';
 import url from 'url';
 import path from 'path';
-import { getSourcePath } from './helper';
+import { getSourcePath } from './helper/getSourcePath';
 
 export function launchEditorMiddleware(
  launchEditorEndpoint: string,