[Vue warn]: Property ("_isVue" | "constructor") was accessed during render but is not defined on instance.

[ordago]

I'm using honeybadger with Laravel, Inertia and Vue3.

Honeybadger seems to be accessing a Vue2 deprecated property.

I found the equivalent issue in Sentry while searching the error
getsentry/sentry-javascript#4170

And the PR that fixed it:
https://github.com/getsentry/sentry-javascript/pull/4461/files

What are the steps to reproduce this issue?

1. The error happened when calling includes on null in a computed property.

What happens?

Some errors but not others make it so honeybadger throws its own error.
[Vue warn]: Property "_isVue" was accessed during render but is not defined on instance.

What were you expecting to happen?

…

Any logs, error output, etc?

Following the stacktrace in the browser points to this line:
Function.prototype.apply.call(original, _window.console, arguments);

Any other comments?

Here are the places where it's used:

honeybadger-js/packages/vue/src/vue-debug.js

Line 17 in 3172203

: vm._isVue

honeybadger-js/packages/vue/src/vue-debug.js

Line 44 in 3172203

if (vm._isVue && vm.$parent) {

What versions are you using?

Operating System: Windows 10
Package Name: @honeybadger-io/vue
Package Version: 4.8.2
Browser Version: Chrome

[subzero10]

Hello @ordago,

Thank you for reporting this with all the detailed information. We'll work on it soon.

[subzero10]

Hey @ordago, we just published @honeybadger-io/vue@4.9.1 that should fix this!

[ordago]

Hi @subzero10!, I've updated to the latest version and now instead of _isVue it says constructor.

[Vue warn]: Property "constructor" was accessed during render but is not defined on instance.

Stacktrace points to the same line:

Function.prototype.apply.call(original, _window.console, arguments);

constructor seems to be used near where the _isVue was:

honeybadger-js/packages/vue/src/vue-debug.js

Lines 51 to 58 in 7766fbe

	export const generateComponentTrace = vm => {
	if (vm && (vm.__isVue || vm._isVue) && vm.$parent) {
	const tree = []
	let currentRecursiveSequence = 0
	while (vm) {
	if (tree.length > 0) {
	const last = tree[tree.length - 1]
	if (last.constructor === vm.constructor) {

The warning appears several times on the console. All pointing to the same line.

If I edit to make it check for existence, it throws it only once.

if ((last?.constructor && vm?.constructor) && last.constructor === vm.constructor) {

I've tried to make a minimal reproduction, but I haven't managed to make it throw the same error.

[subzero10]

Hey @ordago, thanks for trying this out so promptly!

To be honest, I got the constructor warning my self as well, but I wasn't sure if it was related to the example project I was working on or if indeed a more general issue.
This line of code seems to be in the sentry package as well, so I'm wondering if this warning appears on their package as well 🤔 .

Thank you for the suggested improvement, I will see if I can make that go away entirely.

[subzero10]

Hey @ordago, I just published v4.9.3.

It seems that we get this warning from Vue 3's special Proxy wrappers and if we check any property that does not exist on the vm it raises the warning. I didn't find a reliable way to check for recursive components so I decided to disable this block of code for Vue 3. I think it's fine without it, as it doesn't appear to be a very common scenario.

[ordago]

Hi @subzero10, I triggered the original error with the new version and now the console only shows my error. Thanks!

[subzero10]

@ordago Awesome! Thank you for using Honeybadger!