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.

Author: filips123

packages/vue/src/types.ts

@@ -22,6 +22,7 @@ export type ViewModel = {
     propsData?: { [key: string]: any };
     _componentTag?: string;
     __file?: string;
+    __name?: string;
   };
 };
 

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$/);

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([