DevTools crash somewhere in timelineEventAdded

[jods4]

After I activate the Vue Devtools by opening the Vue tab once, I sometimes get JS crashes because Devtools code tries to dereference a null object.

Here's what I so far, hopefully you'll be able to take an educated guess on what the condition that triggers the bug is.

From my experience so far, it could be linked to @intlify/unplugin-vue-i18n but I am not 100% sure. Maybe just a coincidence.

The problem occurs in a hook for timelineEventAdded. Here's the call stack (obfuscated though).

Here's the crashing code, with a little bit of context so hopefully you can locate the un-minified source:

The problem is that e is a plain object. You can see its fields in the screenshot above, but it has no constructor. So e.constructor.name fails with Cannot read properties of undefined (reading: 'name').

[alexzhang1030]

Hi, can you provide a minimal reproduction? Thanks!

[jods4]

hi @alexzhang1030 .

I'm sorry, this is a very large project and I can't easily extract a minimal repro.
I was hopeful that maybe you could make a guess based on call stack and error details, but I know it may not be enough.

If there's nothing actionable in this issue, just close it.

[CedricHildbrand]

@jods4 @alexzhang1030

We have a similar issue, even sometimes crashes due to maximum call stack (Probably related: #605)

The problem must be related to vue-i18n. Couldn't re-produce it in a mini repo, but one thing that can be observed is that the issue only happens when i18n is called after the component is fully initialized.

Causes lags:

<div>
    {{ t('hello') }}
</div>

Causes lags:

const mystring = computed(() =>  t('hello'))

<div>
    {{ mystring }}
</div>

Works fine:

const mystring = t('hello')

<div>
    {{ mystring }}
</div>

If the div is conditional on runtime (for example on an pinia boolean ref) and the case above is present in multiple components, a full maximum call stack occurs