Clearer logging when developing

[dr-thca]

Summary

Our use case:
Visualize all the events in the app from the developer tools console tab. Currently they are quite hard to differentiate

We decided to create a custom plugin since we want to log each event with some nice CSS (Yes, the console supports a limited subset of CSS(!)). But for this implementation it would nice to remove the default logging behaviour of events, but without needing to overwrite the logging instance. I would prefer to have an API or abstraction level where I only work with events.

With our custom plugin we have to disable "debug", but that would probably swallow some imporant logs. We did add a errorHandler though

Proposed Solution

Add a disableDefaultLoggingOfEvents:boolean to the config. Or make it easier to handle events in the Logger

Here is our logger for the curious

/* eslint-disable no-console */
import { PluginType, Plugin } from '@segment/analytics-react-native';

export class LoggerPlugin extends Plugin {
  type = PluginType.after;

  execute(event: any) {
    // This is actually a SegmentEvent, but we use 'any' because its such a pain to make correct
    try {
      const version = event.context?.protocols?.event_version ?? 1;
      const kind = event.type?.toUpperCase() === 'SCREEN' ? 'SCREEN' : 'TRACK';
      const tag = `[${kind}V${version}]`;

      const name = (event.type === 'screen' ? event.name : event.event) || event.name || 'Unknown Event';

      const props = event.properties ?? {};

      const tagStyle =
        version === 1
          ? 'background:#0969da;color:#fff;padding:1px 6px;border-radius:999px;font-weight:700'
          : 'background:#8250df;color:#fff;padding:1px 6px;border-radius:999px;font-weight:700';

      const nameStyle =
        'background:rgba(9,105,218,0.18);color:#e6edf3;padding:1px 6px;border-radius:8px;font-weight:800;font-size:12.5px';

      const sepStyle = 'color:#8b949e';

      console.log(
        '%c%s %c%s %c',
        tagStyle,
        tag,
        nameStyle,
        name,
        sepStyle,
        props 
      );
    } catch (error) {
      console.error('[LoggerPlugin] Error logging event:', error);
      console.log('Event data:', event);
    }

    return event;
  }
}