Web tracer, zone context manager and User Interaction plugin does not work with Angular #1206
Assignees
Labels
bug
Something isn't working
Comments
|
I will investigate this soon and let you know, thx for raising the issue |
|
Thank you. Please let me know if you need more info or if I can help somehow. |
|
another fix is here |
|
and finally a contrib repo open-telemetry/opentelemetry-js-contrib#88 |
|
Thank you. I can confirm these patches fix the bug. |
pichlermarc
pushed a commit
to dynatrace-oss-contrib/opentelemetry-js
that referenced
this issue
Dec 15, 2023
removed wrong dataloader and mongoose entries from release-please manifest. sort entries in release-please config. Co-authored-by: Rauno Viskus <Rauno56@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Please answer these questions before submitting a bug report.
What version of OpenTelemetry are you using?
I'm using the following Otel packages:
Output of
npm ls:Click to expand
What version of Node are you using?
What did you do?
If possible, provide a recipe for reproducing the error.
I checked out the Angular real world app (https://github.com/gothinkster/angular-realworld-example-app) and tried to instrument it with the web tracer, zone context manager and user interaction plugin.
Changes I made to
src/main.ts:What did you expect to see?
Expected the app to run normally, generate spans and print them to console.
What did you see instead?
App generates some spans but crashes as soon as a blog post is clicked and navigation is triggered.
Additional context
As soon as I click a blog post, the app crashes with the following error from Angular in console:
The UI breaks as well and looks like this:
It looks like Angular does not like it when we patch
runTaskand pass it a Zone.js zone instead of an NgZone here: https://github.com/open-telemetry/opentelemetry-js-contrib/blob/master/plugins/web/opentelemetry-plugin-user-interaction/src/userInteraction.ts#L324The following patch silences the error:
_patchZoneRunTask() { const plugin = this; return (original) => { return function patchRunTask(task, applyThis, applyArgs) { + const currentNgZone = this; const target = plugin._getClickedElement(task); let span; if (target) { span = plugin._createSpan(target, 'click'); if (span) { plugin._incrementTask(span); try { return plugin._tracer.withSpan(span, () => { const currentZone = Zone.current; + currentNgZone.set('OT_ZONE_CONTEXT', currentZone.get('OT_ZONE_CONTEXT')); task._zone = currentZone; - return original.call(currentZone, task, applyThis, applyArgs); + return original.call(currentNgZone, task, applyThis, applyArgs); }); } finally { plugin._decrementTask(span); } } } else { span = plugin._getCurrentSpan(this); } try { return original.call(this, task, applyThis, applyArgs); } finally { if (span && plugin._shouldCountTask(task, Zone.current)) { plugin._decrementTask(span); } } }; }; }It looks like we either need to work with the original zone objects and add/duplicate context to them or accept a Zone implementation using some sort of dependency injection mechanism. This can allow all the plugins and the zone context manager to use whatever implementation of Zone is used by the app.
Another option is to have a special
angular-context-managerthat specifically uses NgZone, and then have all the plugins work with whatever kind of zone object is used by the context.I've not used Angular, NgZone or Zone.js before so may be I'm doing something horribly wrong.
The text was updated successfully, but these errors were encountered: