Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Clearer logging when developing

Aperta
  • Qualcosa non va?
#1,089 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
35/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
react-native, typescript
Ambito
developer-experience, observability

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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;
  }
}
Lingua principale
TypeScript
Stelle
384
Fork
205
Merge medio
4h 10m
PR unite (30g)
2

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di segmentio/analytics-react-native

Tutte le issue di segmentio/analytics-react-native

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.