Skip to main content
BeagleLogPlugin is an abstract class that serves as the foundation for creating custom log plugins. Plugins determine how different types of logs are displayed and handled in the Beagle interface.

​
Type Parameters

​
T
extends BeagleLog
The specific log type this plugin handles. Must extend BeagleLog.

​
Properties

​
name
string
required
The unique identifier for the plugin. This name is used to identify the plugin type throughout the system.

​
Abstract Methods

These methods must be implemented by all plugin subclasses.

​
canHandle()

abstract canHandle(log: BeagleLog): log is T;
Type guard that determines whether this plugin can handle a given log.
​
log
BeagleLog
The log to check
​
returns
log is T
TypeScript type predicate that narrows the log type to T if the plugin can handle it

​
provideDetailContent()

abstract provideDetailContent(log: T): DetailContent;
Generates the detailed content view for a log entry.
​
log
T
The log to generate content for
​
returns
DetailContent
The detail content structure, either ListContent or TabBarContent

​
Optional Methods

These methods have default implementations but can be overridden.

​
provideCardFooter()

provideCardFooter(_: T): Content | BoxContent | null;
Provides optional footer content for the log card in the list view.
​
log
T
The log to generate footer content for
​
returns
Content | BoxContent | null
default:"null"
Footer content to display, or null for no footer

​
exportToJSON()

exportToJSON(log: T): string;
Customizes how the log is exported to JSON format.
​
log
T
The log to export
​
returns
string
default:"JSON.stringify(log)"
JSON string representation of the log

​
Example

import { BeagleLogPlugin } from 'react-native-beagle';
import type { DetailContent } from 'react-native-beagle';

class MessageLogPlugin extends BeagleLogPlugin<MessageLog> {
  name: string = 'Message';

  canHandle(log: BeagleLog): log is MessageLog {
    return log instanceof MessageLog;
  }

  provideDetailContent(log: MessageLog): DetailContent {
    return {
      key: 'message',
      kind: 'list',
      children: [
        {
          kind: 'text',
          text: log.message,
          selectable: true,
        },
      ],
    };
  }
}

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us