Clearer logging when developing

No source files or tests are named. Start by locating the configuration and the default event logging path, then compare it with the custom Logger plugin described in the issue. Done means custom event logging can be used without overwriting the logger or disabling unrelated debug and error logs.

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;
  }
}