[{"_1":2,"_36":-5,"_37":-5},"loaderData",{"_3":4},"routes/_main.tags.$tag",{"_5":6,"_35":20},"posts",[7],{"_8":9,"_10":11,"_12":13,"_14":15,"_16":17,"_29":30,"_31":32,"_33":34},"slug","frontend-error-tracking","title","Frontend Error Tracking in 2024","description","A comprehensive guide to modern frontend error tracking solutions, comparing Sentry, OpenTelemetry, and Grafana Faro for JavaScript applications.","date","2024-08-31","tags",[18,19,20,21,22,23,24,25,26,27,28],"angular","error-tracking","faro","frontend","grafana","honeycomb","javascript","monitoring","opentelemetry","sentry","typescript","content","

The JavaScript browser error tracking market has undergone significant changes in 2024. I had previously set up a self-hosted instance of Sentry, but they've introduced a breaking change with version 8 of their JavaScript library, now based on OpenTelemetry. Unfortunately, this v8 SDK isn't compatible with my self-hosted Sentry instance, and updating seems too complex at the moment.

Considering this, I thought about bypassing the middleman and going directly to OpenTelemetry as the source. However, I discovered that OpenTelemetry for JavaScript isn't yet a complete replacement for Sentry. While it excels at tracing, it falls short when it comes to logging.

Moreover, I found that all OpenTelemetry-compatible tools—including Sentry—primarily accept OpenTelemetry data but then convert it into their own proprietary format, supporting only that API.

By sheer luck, I discovered that Grafana’s wrapper, Faro, has some of the Sentry-like features that I was missing (simple exception handling, console.log interception) and has an alternative experimental Transport @grafana/faro-transport-otlp-http that allows export to OpenTelemetry format.

I tried this with Honeycomb.io as shown below:

import { ErrorHandler, Provider } from '@angular/core'\nimport { OtlpHttpTransport } from '@grafana/faro-transport-otlp-http'\nimport {\n    getWebInstrumentations,\n    initializeFaro,\n    LogLevel,\n} from '@grafana/faro-web-sdk'\nimport {\n    getDefaultOTELInstrumentations,\n    TracingInstrumentation,\n} from '@grafana/faro-web-tracing'\nimport { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load'\nimport { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction'\n\nconst faro = initializeFaro({\n    app: {\n        name: 'my-app',\n    },\n    sessionTracking: {\n        enabled: true,\n    },\n    transports: [\n        new OtlpHttpTransport({\n            logsURL: 'https://api.honeycomb.io/v1/logs',\n            tracesURL: 'https://api.honeycomb.io/v1/traces',\n            requestOptions: {\n                headers: {\n                    'x-honeycomb-team': '{{HONEYCOMB_TEAM_HERE}}',\n                },\n            },\n        }),\n    ],\n    instrumentations: [\n        ...getWebInstrumentations({\n            captureConsole: true,\n            captureConsoleDisabledLevels: [LogLevel.DEBUG, LogLevel.TRACE],\n        }),\n        new TracingInstrumentation({\n            instrumentations: [\n                ...getDefaultOTELInstrumentations({\n                    ignoreUrls: [/api.honeycomb.io/],\n                }),\n                new DocumentLoadInstrumentation(),\n                new UserInteractionInstrumentation(),\n            ],\n        }),\n    ],\n})\n

If you are using Angular and Zone.js, you can manually set the contextManager to the context-zone-peer-dep, and also provide your own custom Angular ErrorHandler to catch template errors:

import { ZoneContextManager } from '@opentelemetry/context-zone-peer-dep';\nimport { ErrorHandler, Provider } from '@angular/core';\n\n// ...\nnew TracingInstrumentation({\n  instrumentations: [\n    ...getDefaultOTELInstrumentations({\n      ignoreUrls: [/api.honeycomb.io/],\n    }),\n    new DocumentLoadInstrumentation(),\n    new UserInteractionInstrumentation(),\n  ],\n  contextManager: new ZoneContextManager(), // using peer-dep version because this is Angular\n}),\n// ...\n\nconst myErrorHandler: ErrorHandler = {\n  handleError(error) {\n    console.error(error);\n    faro.api.pushError(error);\n  },\n};\n\nexport const tracingProviders: Provider[] = [\n  {\n    provide: ErrorHandler,\n    useValue: myErrorHandler,\n  },\n];\n

It still feels quite difficult to actually do any logging. I'm not sure how to get the active span, or if I should use the same span or create a new one. When in doubt, create a new span, I suppose, because it makes it easier to see what is happening in the trace. In any case, through trial and error, I was able to create the following function wrapper which seemed to work:

export function wrapFn<T>(fn: () => T, name?: string): Promise<Awaited<T>> {\n    const otel = faro.api.getOTEL()\n    if (!otel) throw new Error('Faro not initialized')\n\n    const tracer = otel.trace.getTracer('default')\n\n    const result = tracer.startActiveSpan(name ?? 'wrap-fn', async (span) => {\n        try {\n            const result = await fn()\n            span.setStatus({ code: SpanStatusCode.OK })\n            return result\n        } catch (err) {\n            faro.api.pushError(err as any)\n\n            span.setStatus({ code: SpanStatusCode.ERROR, message: String(err) })\n\n            throw err\n        } finally {\n            span.end()\n        }\n    })\n\n    return result as any\n}\n

After this, I tried wrapping a click handler in my wrapFn(), called it, and was able to produce the following error trace with information about the error:

$\"Screenshot$

","excerpt","The JavaScript browser error tracking market has undergone significant changes in 2024. I had previously set up a self-hosted instance of Sentry, but they've introduced a breaking change with...","readingTime",3,"tag","actionData","errors"]

Posts tagged "faro"

Frontend Error Tracking in 2024