Tracing Page Load Times

[stevenG-dv]

I have set up Faro & Telemetry in my application. I want to be able to trace the load times of pages (page-load & navigation). Otel has DocumentLoadInstrumentation -- but this only captures the initial load of an application (refresh / initial-load) and it also appears to trace more than this -- I am trying to reduce potentially taxing payloads -- including Otel's UserInteraction.

Is there any other Faro implementation that can trace page-load & navigation times? Or a way to reduce one of Otel's implementations?

This is my current set up:

initialize() {
    initializeFaro({
      url: FARO_URL,
      apiKey: '...',
      app: {
        name: '...',
        version: '1.0.0',
        environment: environment.currentEnvironment,
      },
      instrumentations: [
        new ConsoleInstrumentation({
          disabledLevels: [LogLevel.INFO, LogLevel.LOG, LogLevel.TRACE, LogLevel.DEBUG],
        }),
        new SessionInstrumentation(),
        new WebVitalsInstrumentation(),
      ]
    });

    faro.api.initOTEL(trace, context);

    const resource = Resource.default().merge(
      new Resource({
        [SemanticResourceAttributes.SERVICE_NAME]: NAME,
        [SemanticResourceAttributes.SERVICE_VERSION]: VERSION,
      })
    );

    const provider = new WebTracerProvider({ resource });

    provider.addSpanProcessor(new FaroSessionSpanProcessor(new BatchSpanProcessor(new FaroTraceExporter({ ...faro })), faro.metas));

    provider.register({
      propagator: new W3CTraceContextPropagator(),
      contextManager: new ZoneContextManager(),
    });

    const ignoreUrls = [FARO_URL];
    registerInstrumentations({
      instrumentations: [
        new DocumentLoadInstrumentation(), // will be removed pending more efficient implementation
        new XMLHttpRequestInstrumentation({ ignoreUrls }),
        new FetchInstrumentation({ ignoreUrls }),
      ],
    });
  }

  setUser(userDetails: UserClaims) {
    faro.api.setUser({
      attributes: {
        ...
      },
    });
  }

  pushError(event: any, type: string) {
    faro.api.pushError(new Error(event), {
      type, skipDedupe: true
    });
  }

[codecapitano]

Hi @stevenG-dv,

you can use Faros' own PerformanceTimeleineInstrumentation.
In it's default configuration it only tracks Resource and Navigation timings.

You can add or remove Performance Timings so that it fit's your use case.

The Instrumentation additionally provides a hook to filter, mutate or drop Performance Timings.
This can be used for example to remove noise, trim payloads to reduce beacon payload etc.

Cheers,
Marco

cc @cedricziel