fix(warn): fix component name inference in warning trace

Author: yyx990803

packages/runtime-core/src/component.ts

@@ -52,6 +52,7 @@ export interface SFCInternalOptions {
   __cssModules?: Data
   __hmrId?: string
   __hmrUpdated?: boolean
+  __file?: string
 }
 
 export interface FunctionalComponent<
@@ -540,16 +541,16 @@ const classify = (str: string): string =>
 
 export function formatComponentName(
   Component: Component,
-  file?: string
+  isRoot = false
 ): string {
   let name = isFunction(Component)
     ? Component.displayName || Component.name
     : Component.name
-  if (!name && file) {
-    const match = file.match(/([^/\\]+)\.vue$/)
+  if (!name && Component.__file) {
+    const match = Component.__file.match(/([^/\\]+)\.vue$/)
     if (match) {
       name = match[1]
     }
   }
-  return name ? classify(name) : 'Anonymous'
+  return name ? classify(name) : isRoot ? `App` : `Anonymous`
 }

packages/runtime-core/src/warning.ts

@@ -48,10 +48,7 @@ export function warn(msg: string, ...args: any[]) {
         msg + args.join(''),
         instance && instance.proxy,
         trace
-          .map(
-            ({ vnode }) =>
-              `at <${formatComponentName(vnode.type as Component)}>`
-          )
+          .map(({ vnode }) => `at <${formatComponentName(vnode.type)}>`)
           .join('\n'),
         trace
       ]
@@ -111,12 +108,12 @@ function formatTrace(trace: ComponentTraceStack): any[] {
 function formatTraceEntry({ vnode, recurseCount }: TraceEntry): any[] {
   const postfix =
     recurseCount > 0 ? `... (${recurseCount} recursive calls)` : ``
-  const open = ` at <${formatComponentName(vnode)}`
+  const isRoot = vnode.component!.parent == null
+  const open = ` at <${formatComponentName(vnode.type, isRoot)}`
   const close = `>` + postfix
-  const rootLabel = vnode.component!.parent == null ? `(Root)` : ``
   return vnode.props
-    ? [open, ...formatProps(vnode.props), close, rootLabel]
-    : [open + close, rootLabel]
+    ? [open, ...formatProps(vnode.props), close]
+    : [open + close]
 }
 
 function formatProps(props: Data): any[] {