Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Clearer logging when developing

Offen
  • Stimmt etwas nicht?
#1,089 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
35/100
Issue-Typ
Feature
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
react-native, typescript
Bereich
developer-experience, observability

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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;
  }
}
Vorherrschende Sprache
TypeScript
Sterne
383
Forks
207
Ø Merge
4 Min.
Gemergte PRs (30 T.)
1

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus segmentio/analytics-react-native

Alle Issues in segmentio/analytics-react-native

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.