From b192678d5653b12ab5a011f8d9f31a5b6d93c1c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20=C5=A0tamcar?= <filip.stamcar@hotmail.com>
Date: Wed, 28 Aug 2024 16:50:14 +0200
Subject: [PATCH] fix(vue): Correctly obtain component name (#13484)

In some cases, Vue components do not have `options.name` defined, but
instead have `options.__name`. Such components will be displayed as
anonymous in Sentry and currently won't be matched in `trackComponents`.

The same fix was also done in Vue devtools (vuejs/devtools#2020). In my
case, the problem were components from my own project, but this change
also fixes that.
---
 packages/vue/src/types.ts                   |  1 +
 packages/vue/src/vendor/components.ts       |  2 +-
 packages/vue/test/vendor/components.test.ts | 13 +++++++++++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/vue/src/types.ts b/packages/vue/src/types.ts
index 0ed2f773ca2d..13d9e8588350 100644
--- a/packages/vue/src/types.ts
+++ b/packages/vue/src/types.ts
@@ -22,6 +22,7 @@ export type ViewModel = {
     propsData?: { [key: string]: any };
     _componentTag?: string;
     __file?: string;
+    __name?: string;
   };
 };
 
diff --git a/packages/vue/src/vendor/components.ts b/packages/vue/src/vendor/components.ts
index a19dab78d99f..f5d05b5cbc6c 100644
--- a/packages/vue/src/vendor/components.ts
+++ b/packages/vue/src/vendor/components.ts
@@ -51,7 +51,7 @@ export const formatComponentName = (vm?: ViewModel, includeFile?: boolean): stri
 
   const options = vm.$options;
 
-  let name = options.name || options._componentTag;
+  let name = options.name || options._componentTag || options.__name;
   const file = options.__file;
   if (!name && file) {
     const match = file.match(/([^/\\]+)\.vue$/);
diff --git a/packages/vue/test/vendor/components.test.ts b/packages/vue/test/vendor/components.test.ts
index 49d184325ee0..5a210a0a2fb5 100644
--- a/packages/vue/test/vendor/components.test.ts
+++ b/packages/vue/test/vendor/components.test.ts
@@ -80,6 +80,19 @@ describe('formatComponentName', () => {
         });
       });
 
+      describe('when the options have a __name', () => {
+        it('returns the __name', () => {
+          // arrange
+          vm.$options.__name = 'my-component-name';
+
+          // act
+          const formattedName = formatComponentName(vm);
+
+          // assert
+          expect(formattedName).toEqual('<MyComponentName>');
+        });
+      });
+
       describe('when the options have a __file', () => {
         describe('and we do not wish to include the filename', () => {
           it.each([