fix: do not access promise before resolve

[obecny]

Which problem is this PR solving?

• Fixes exporter-collector browser generate console error during sending trace #1601
• Fixes OpenTracing collector exporter throws ReferenceError after trace export in Web application #1610

Short description of the changes

• The problem was that the promise was not yet resolved before it has been already removed from the Promise.all. So after it is resolved now can be removed
• During testing it turn out that the example for web hasn't been updated with B3 Propagator

[codecov]

Codecov Report

Merging #1641 into master will increase coverage by 0.32%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #1641      +/-   ##
==========================================
+ Coverage   90.61%   90.94%   +0.32%     
==========================================
  Files         151      153       +2     
  Lines        4229     4449     +220     
  Branches      878      913      +35     
==========================================
+ Hits         3832     4046     +214     
- Misses        397      403       +6     

Impacted Files	Coverage Δ
...ckages/opentelemetry-exporter-zipkin/src/zipkin.ts	80.43% <0.00%> (-19.57%)	⬇️
...elemetry-exporter-zipkin/src/platform/node/util.ts
...telemetry-node/src/instrumentation/PluginLoader.ts
...ges/opentelemetry-exporter-jaeger/src/transform.ts
...ckages/opentelemetry-exporter-jaeger/src/jaeger.ts
...kages/opentelemetry-node/src/NodeTracerProvider.ts
...exporter-prometheus/src/PrometheusLabelsBatcher.ts
...ry-exporter-prometheus/src/PrometheusSerializer.ts
...ackages/opentelemetry-exporter-jaeger/src/types.ts
...es/opentelemetry-node/src/instrumentation/utils.ts
... and 18 more

[dyladan]

This PR still does not solve the reference error. You cannot access the promise from within the lexical scope of the promise handler.

Please test in the latest firefox as this seems to be where people are seeing the issue. It may have a stricter lexical scope policy than other browsers?

[obecny]

This PR still does not solve the reference error. You cannot access the promise from within the lexical scope of the promise handler.

Please test in the latest firefox as this seems to be where people are seeing the issue. It may have a stricter lexical scope policy than other browsers?

Did you check out this PR and opened any web example in firefox ?

[dyladan]

Approving this with a more detailed explanation below because the fix was not obvious to me.

If you look at the actual text of the error Uncaught (in promise) ReferenceError: can't access lexical declaration 'promise' before initialization it points you to this documentation https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init

The code in question does something like this:

// broken
const x = new Promise(resolve => {
	console.log(x); // access x is illegal here
	resolve();
});

// fixed
const x = new Promise(resolve => {
	resolve();
	console.log(x); // access x is fine here
});

new Promise(cb) calls cb synchronously and only returns a value when resolve is called. This means in example 1, when the code tries to log x, it has not yet been assigned. In example 2, calling resolve causes new Promise to return the new promise which makes it accessible.

[obecny]

@open-telemetry/javascript-approvers ^^

[mwear]

Approving this with a more detailed explanation below because the fix was not obvious to me.

If you look at the actual text of the error Uncaught (in promise) ReferenceError: can't access lexical declaration 'promise' before initialization it points you to this documentation https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init

The code in question does something like this:

// broken
const x = new Promise(resolve => {
	console.log(x); // access x is illegal here
	resolve();
});

// fixed
const x = new Promise(resolve => {
	resolve();
	console.log(x); // access x is fine here
});

new Promise(cb) calls cb synchronously and only returns a value when resolve is called. This means in example 1, when the code tries to log x, it has not yet been assigned. In example 2, calling resolve causes new Promise to return the new promise which makes it accessible.

☝️ Thanks for the explanation. It's super helpful.

[dyladan]

Approving this with a more detailed explanation below because the fix was not obvious to me.
If you look at the actual text of the error Uncaught (in promise) ReferenceError: can't access lexical declaration 'promise' before initialization it points you to this documentation developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init
The code in question does something like this:

// broken
const x = new Promise(resolve => {
	console.log(x); // access x is illegal here
	resolve();
});

// fixed
const x = new Promise(resolve => {
	resolve();
	console.log(x); // access x is fine here
});

new Promise(cb) calls cb synchronously and only returns a value when resolve is called. This means in example 1, when the code tries to log x, it has not yet been assigned. In example 2, calling resolve causes new Promise to return the new promise which makes it accessible.

☝️ Thanks for the explanation. It's super helpful.

It was not at all obvious to me. I think this is a good change for now but in the future we should refactor this to a more obvious implementation if possible.