ZoneContextManager breaks sveltekit lifecycle functions normal operation

[crisguitar]

trafficstars

What happened?

Steps to Reproduce

• Import ZoneContextManager in any sveltekit app
• Navigate to the page that uses the afterNavigate lifecycle function

Expected Result

Code inside afterNavigate is called normally

Actual Result

Code inside afterNavigate is not called; however, if you navigate away from the page the callback is called. This suggests the callback was registered too late. Somehow importing ZoneContextManager breaks how sveltekit is rendering and registering callbacks.

Additional Details

I created a repo to reproduce this: https://github.com/crisguitar/after-navigate-issue

OpenTelemetry Setup Code

// this is all you need to break it

import { ZoneContextManager } from '@opentelemetry/context-zone';

package.json

{
  "name": "svelte-app",
  "version": "0.0.1",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "package": "svelte-kit package",
    "preview": "vite preview",
    "check": "svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
    "lint": "prettier --check --plugin-search-dir=. . && eslint .",
    "format": "prettier --write --plugin-search-dir=. ."
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "next",
    "@sveltejs/kit": "next",
    "@typescript-eslint/eslint-plugin": "^5.27.0",
    "@typescript-eslint/parser": "^5.27.0",
    "eslint": "^8.16.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-svelte3": "^4.0.0",
    "prettier": "^2.6.2",
    "prettier-plugin-svelte": "^2.7.0",
    "svelte": "^3.44.0",
    "svelte-check": "^2.7.1",
    "svelte-preprocess": "^4.10.6",
    "tslib": "^2.3.1",
    "typescript": "^4.7.4",
    "vite": "^3.0.0"
  },
  "type": "module",
  "dependencies": {
    "@opentelemetry/api": "1.1.0",
    "@opentelemetry/auto-instrumentations-node": "0.31.0",
    "@opentelemetry/context-zone": "1.5.0",
    "@opentelemetry/exporter-trace-otlp-http": "0.29.2",
    "@opentelemetry/exporter-trace-otlp-proto": "0.29.2",
    "@opentelemetry/instrumentation-fetch": "0.29.2",
    "@opentelemetry/sdk-node": "0.30.0",
    "@opentelemetry/sdk-trace-base": "1.3.1",
    "@opentelemetry/sdk-trace-web": "1.3.1",
    "@sveltejs/adapter-node": "^1.0.0-next.86"
  }
}

Relevant log output

No response

[vmarchaud]

Did you try to reproduce by only using zone.js ? Seems likely that the problem comes from zonejs instead of our implementation

[crisguitar]

@vmarchaud I haven't. I'll give it a try and report back.

[crisguitar]

@vmarchaud I just confirmed that the issue comes from zone.js. Setting __Zone_disable_ZoneAwarePromise to true makes the issue go away. How does that setting affect opentelemetry? I am not familiar with either library so I am not sure about the consequences.

[dyladan]

For now I'm going to label this as P2 but it may end up being a bug in zone.js and not here. @vmarchaud since you already started looking into this can you take this issue?

[vmarchaud]

@vmarchaud since you already started looking into this can you take this issue?

I answered because someone on slack asked a similar question few days ago (https://cloud-native.slack.com/archives/C01NL1GRPQR/p1660673184710719). I honestly don't think this is solvable for us as the problem is with upstream dependencies. I believe the best we can do is document when zonejs break so user know what to expect

[justin0mcateer]

I am also having problems with zone.js and a library which I am using. The library makes heavy use of async-generators and this seems to completely break the functioning of zone.js.

Is there any plausible alternative to using zone.js when using async/await in the browser?