refactor: extract name resolution to a util

Author: logaretm

packages/core/src/utils/is.ts

@@ -194,13 +194,15 @@ interface VueViewModel {
   _isVue?: boolean;
 }
 /**
- * Checks whether given value's type is a Vue ViewModel.
+ * Checks whether given value's type is a Vue ViewModel or a VNode.
  *
  * @param wat A value to be checked.
  * @returns A boolean representing the result.
  */
 export function isVueViewModel(wat: unknown): boolean {
   // Not using Object.prototype.toString because in Vue 3 it would read the instance's Symbol(Symbol.toStringTag) property.
+  // We also need to check for __v_isVNode because Vue 3 component render instances have an internal __v_isVNode property.
+  // https://github.com/vuejs/core/blob/main/packages/runtime-core/src/vnode.ts#L168
   return !!(
     typeof wat === 'object' &&
     wat !== null &&

packages/core/src/utils/normalize.ts

@@ -1,7 +1,7 @@
 import type { Primitive } from '../types-hoist/misc';
 import { isSyntheticEvent, isVueViewModel } from './is';
 import { convertToPlainObject } from './object';
-import { getFunctionName } from './stacktrace';
+import { getFunctionName, getVueInternalName } from './stacktrace';
 
 type Prototype = { constructor?: (...args: unknown[]) => unknown };
 // This is a hack to placate TS, relying on the fact that technically, arrays are objects with integer keys. Normally we
@@ -217,10 +217,7 @@ function stringifyValue(
     }
 
     if (isVueViewModel(value)) {
-      // Check if it's a VNode (has __v_isVNode) vs a component instance (has _isVue/__isVue)
-      const isVNode = (value as { __v_isVNode?: boolean }).__v_isVNode;
-
-      return isVNode ? '[VueVNode]' : '[VueViewModel]';
+      return getVueInternalName(value);
     }
 
     // React's SyntheticEvent thingy

packages/core/src/utils/stacktrace.ts

@@ -164,3 +164,16 @@ export function getFramesFromEvent(event: Event): StackFrame[] | undefined {
   }
   return undefined;
 }
+
+/**
+ * Get the internal name of an internal Vue value, to represent it in a stacktrace.
+ *
+ * @param value The value to get the internal name of.
+ */
+export function getVueInternalName(value: unknown): string {
+  // Check if it's a VNode (has __v_isVNode) vs a component instance (has _isVue/__isVue)
+  // https://github.com/vuejs/core/blob/main/packages/runtime-core/src/vnode.ts#L168
+  const isVNode = (value as { __v_isVNode?: boolean }).__v_isVNode;
+
+  return isVNode ? '[VueVNode]' : '[VueViewModel]';
+}

packages/core/src/utils/string.ts

@@ -1,4 +1,5 @@
 import { isRegExp, isString, isVueViewModel } from './is';
+import { getVueInternalName } from './stacktrace';
 
 export { escapeStringForRegex } from '../vendor/escapeStringForRegex';
 
@@ -81,7 +82,7 @@ export function safeJoin(input: unknown[], delimiter?: string): string {
       // Vue to issue another warning which repeats indefinitely.
       // see: https://github.com/getsentry/sentry-javascript/pull/8981
       if (isVueViewModel(value)) {
-        output.push('[VueViewModel]');
+        output.push(getVueInternalName(value));
       } else {
         output.push(String(value));
       }