vaadin / observability-kit

Other
5 stars 2 forks source link

Add client-side instrumentation to trace JavaScript errors #174

Closed mcollovati closed 1 year ago

mcollovati commented 1 year ago

Currently, there is no out of the box instrumentation to intercept and trace JavaScript errors. We may add an instrumentation implementation to be added to observability-client that listens for errors and creates spans to be sent to the backend observability kit component.

Error interception can be intercepted by implementing listeners for error and unhandledrejection events.

UserInteractionInstrumentation module can be taken as inspiration.

Below, a simple code example on how to record a JavaScript error

    const tracer = opentelemetry.trace.getTracer(
        'example-basic-tracer-node'
    );
    window.addEventListener('error', event => {
      tracer.startActiveSpan("myerror", span => {
        span.setAttribute("component", "error-logger");
        span.recordException(event.error);
        span.end();
      });
    });
  }
mcollovati commented 1 year ago

Currently, we can trace client-side errors (e.g. error and unhandledrejection events), but unfortunately JavaScript errors raised executing code sent from server-side (e.g. Page.executeJs) cannot be traced in production because Flow client silently suppresses them.

vaadin/flow#2028 vaadin/flow#2963