Cannot add custom layer to timeline
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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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