vuejs / vuejs/devtools

Cannot add custom layer to timeline

Open
#832 0 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.9k
Forks
279
PR merge metrics
No merged PRs in 30d

Description

I'm trying to add events for our API client to a custom timeline layer, but it won't appear. The plugin looks like so:

export const myPlugin = {
    install( app, options = {} ) {
        setupDevtoolsPlugin( {
            app,
            id: 'com.matchory.devtools',
            label: 'Matchory',
            logo: new URL( '/logo.svg', window.location.origin ).toString(),
            packageName: '@matchory/app',
        }, api => {
            const layerId = 'com.matchory.devtools.http';

            console.log( 'Devtools API is ready:', api );
            api.addTimelineLayer( {
                id: layerId,
                color: 0xff984f,
                label: 'API Events',
            } );

            window.addEventListener( 'api:response', ( event: CustomEvent ) => {
                console.log( 'HTTP response:', event );

                api.addTimelineEvent( {
                    layerId,
                    event: {
                        data: event.detail.toString(),
                        time: api.now(),
                        logType: 'default',
                        title: 'API Response',
                        subtitle: 'Received a response',
                        meta: {},
                    },
                } );
            } );
        } );
    },
} satisfies ObjectPlugin;

From everything I can gather from the documentation, this should definitely create a layer in the layer list, and record my event as it arrives. However, while both console.logs are logged to the console, the devtools neither pick up on my plugin, nor do they show the new layer, or record the event.

The v7 documentation looks like an early prototype that is still missing the actual content; it feels like there's something missing to register my plugin, but neither the old docs nor the new ones show me which.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the setupDevtoolsPlugin call in the issue and compare it with the v7 plugin-registration documentation, since no repository file or test is identified. Trace how the install hook is expected to register the plugin, then reproduce the example and verify that the plugin, custom layer, and API response event appear in Devtools.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
devtools
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.