fix(vue): accounts for undefined options when formatting component name (#5254)

When formatting the component name, options can be undefined.
When it is, we return the `ANONYMOUS_COMPONENT_NAME` early.

Author: Arinono

packages/vue/src/components.ts

@@ -30,6 +30,11 @@ export const formatComponentName = (vm?: ViewModel, includeFile?: boolean): stri
     return ROOT_COMPONENT_NAME;
   }
 
+  // https://github.com/getsentry/sentry-javascript/issues/5204 $options can be undefined
+  if (!vm.$options) {
+    return ANONYMOUS_COMPONENT_NAME;
+  }
+
   const options = vm.$options;
 
   let name = options.name || options._componentTag;

packages/vue/test/components.test.ts

@@ -1,26 +1,120 @@
 import { formatComponentName } from '../src/components';
 
-it('properly format component names', () => {
-  const vm: any = {
-    $options: {},
-  };
-  vm.$root = vm;
-  expect(formatComponentName(vm)).toBe('<Root>');
-
-  vm.$root = null;
-  vm.$options.name = 'hello-there';
-  expect(formatComponentName(vm)).toBe('<HelloThere>');
-
-  vm.$options.name = null;
-  vm.$options._componentTag = 'foo-bar-1';
-  expect(formatComponentName(vm)).toBe('<FooBar1>');
-
-  vm.$options._componentTag = null;
-  vm.$options.__file = '/foo/bar/baz/SomeThing.vue';
-  expect(formatComponentName(vm)).toBe(`<SomeThing> at ${vm.$options.__file}`);
-  expect(formatComponentName(vm, false)).toBe('<SomeThing>');
-
-  vm.$options.__file = 'C:\\foo\\bar\\baz\\windows_file.vue';
-  expect(formatComponentName(vm)).toBe(`<WindowsFile> at ${vm.$options.__file}`);
-  expect(formatComponentName(vm, false)).toBe('<WindowsFile>');
+describe('formatComponentName', () => {
+  describe('when the vm is not defined', () => {
+    it('returns the anonymous component name', () => {
+      // arrange
+      const vm = undefined;
+
+      // act
+      const formattedName = formatComponentName(vm);
+
+      // assert
+      expect(formattedName).toEqual('<Anonymous>');
+    });
+  });
+
+  describe('when the vm is defined', () => {
+    let vm: any = undefined;
+
+    beforeEach(() => {
+      vm = {};
+    });
+
+    describe('and when the $options is not defined', () => {
+      it('returns the anonymous component name', () => {
+        // arrange
+        vm.$options = undefined;
+
+        // act
+        const formattedName = formatComponentName(vm);
+
+        // assert
+        expect(formattedName).toEqual('<Anonymous>');
+      });
+    });
+
+    describe('when the $options is defined', () => {
+      beforeEach(() => {
+        vm = { $options: {} };
+      });
+
+      describe('when the vm is the $root', () => {
+        it('returns the root component name', () => {
+          // arrange
+          vm.$root = vm;
+
+          // act
+          const formattedName = formatComponentName(vm);
+
+          // assert
+          expect(formattedName).toEqual('<Root>');
+        });
+      });
+
+      describe('when the $options have a name', () => {
+        it('returns the name', () => {
+          // arrange
+          vm.$options.name = 'hello-there';
+
+          // act
+          const formattedName = formatComponentName(vm);
+
+          // assert
+          expect(formattedName).toEqual('<HelloThere>');
+        });
+      });
+
+      describe('when the options have a _componentTag', () => {
+        it('returns the _componentTag', () => {
+          // arrange
+          vm.$options._componentTag = 'foo-bar-1';
+
+          // act
+          const formattedName = formatComponentName(vm);
+
+          // assert
+          expect(formattedName).toEqual('<FooBar1>');
+        });
+      });
+
+      describe('when the options have a __file', () => {
+        describe('and we do not wish to include the filename', () => {
+          it.each([
+            ['unix', '/foo/bar/baz/SomeThing.vue', '<SomeThing>'],
+            ['unix', '/foo/bar/baz/SomeThing.ts', '<Anonymous>'],
+            ['windows', 'C:\\foo\\bar\\baz\\windows_file.vue', '<WindowsFile>'],
+            ['windows', 'C:\\foo\\bar\\baz\\windows_file.ts', '<Anonymous>'],
+          ])('returns the filename (%s)', (_, filePath, expected) => {
+            // arrange
+            vm.$options.__file = filePath;
+
+            // act
+            const formattedName = formatComponentName(vm, false);
+
+            // assert
+            expect(formattedName).toEqual(expected);
+          });
+        });
+
+        describe('and we wish to include the filename', () => {
+          it.each([
+            ['unix', '/foo/bar/baz/SomeThing.vue', '<SomeThing>'],
+            ['unix', '/foo/bar/baz/SomeThing.ts', '<Anonymous>'],
+            ['windows', 'C:\\foo\\bar\\baz\\windows_file.vue', '<WindowsFile>'],
+            ['windows', 'C:\\foo\\bar\\baz\\windows_file.ts', '<Anonymous>'],
+          ])('returns the filename (%s)', (_, filePath, expected) => {
+            // arrange
+            vm.$options.__file = filePath;
+
+            // act
+            const formattedName = formatComponentName(vm);
+
+            // assert
+            expect(formattedName).toEqual(`${expected} at ${filePath}`);
+          });
+        });
+      });
+    });
+  });
 });