Clearer logging when developing

Open
#1,089 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
react-native, typescript
Domain
developer-experience, observability

Research direction

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.

Written by the indexing model from the issue text.

Description

enhancement

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

Image 
/* 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;
  }
}
Dominant language
TypeScript
Stars
383
Forks
206
Avg merge
14h 45m
Merged PRs (30d)
11

Contributor guide

Open the contributing guide

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.

More from segmentio/analytics-react-native

All issues in segmentio/analytics-react-native

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.