sillsdev / sillsdev/languageforge-lexbox

Using zone.js in otel is a bit risky and buggy

Open
#612 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

📦 Lexbox bug OpenTelemetry
Dominant language
C#
Stars
9
Forks
8
Avg merge
2d 13h
Merged PRs (30d)
49

Description

I finally understand this warning about using the ZoneContextManager for OTEL tracing in the browser:

Please note that due to an issue with zone.js, the ZoneContextManager does not work with JS code targeting ES2017+. In order to use the ZoneContextManager, please transpile back to ES2015.

And I'm pretty sure it explains this issue that @rmunn was having:

  • Add a .refine() call to the project code field
    • Zod docs say that refine() can be async
    • But the async refine call didn't produce a validation error when it returned false
    • When I returned Promise.fulfill(false) from a sync refine call, it produced a validation error
    • But when I returned fetch('/api/...').then(return false), i.e. a Promise that isn't already fulfilled, no validation error showed up in the form

I don't think we're currently having any "real" issues, like this one. We don't use afterNavigate, but there could be other affected hooks etc.

Essentially, ZoneContextManager (or zone.js more specifically) doesn't support native Promises or async/await syntax (because that syntax using native Promises). So, its tracking of asynchronous operations gets buggy in those scenarios. And then I guess weird things can happen.

Here's the issue tracking zone.js' support of async/await syntax. Essentially it sounds like it will never happen.

Our options:

  1. Leave things the way they are:
    ➕ we benefit from ZoneContextManager handling the async APIs that it can track/instrument
    ➖ weird bugs could arise
  2. Try to transpile back to ES2015 out async/await syntax using babel-plugin-transform-async-to-promises. Which is apparently how Angular solves it
    ZoneContextManager would be happy and we might even get better traces (e.g. this might actually end up in the context of a trace)
    ➖ It's trickier to do this with Svelte than with other non-compiler based frameworks
    ➖ Transpiled code results in uglier/less readable stack traces
  3. Drop ZoneContextManager
    ➕ The risk is gone
    ➖ Some of our traces might fall apart

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the linked ZoneContextManager warning and the related async validation discussion. Compare the three options in the issue—keep ZoneContextManager, transpile async/await, or remove it—and establish which approach the project should adopt. Done means a documented decision with its tracing and browser behavior validated.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
observability
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.