Uncaught (in promise) ReferenceError: read is not defined

[akselinurmio]

We’re experiencing following errors in browser console with every client fetch():

Uncaught (in promise) ReferenceError: read is not defined
    at fetch-patch.js:36:11
(anonymous)	@	fetch-patch.js:36
Promise.then (async)		
f	@	fetch-patch.js:32
(anonymous)	@	fetch-patch.js:99
Promise.then (async)		
bh	@	utils.js:332
bl.fetchInProgress	@	fetch-patch.js:94
Promise.then (async)		
(anonymous)	@	fetch-patch.js:91
window.fetch	@	fetch-patch.js:76
u	@	areena-api.ts:64 <------------- This is where our app calls `fetch(…)`
(anonymous)	@	areena-api.ts:433
j	@	runtime.js:46
(anonymous)	@	runtime.js:275
a.<computed>	@	runtime.js:98
d	@	_async_to_generator.mjs:4
h	@	_async_to_generator.mjs:26
(anonymous)	@	_async_to_generator.mjs:30
(anonymous)	@	_async_to_generator.mjs:22
K	@	areena-api.ts:424
J	@	areena-api.ts:451
m	@	useReference.ts:20
(anonymous)	@	index.mjs:1049
i	@	index.mjs:1049
(anonymous)	@	index.mjs:1049
(anonymous)	@	index.mjs:1049
e	@	index.mjs:1049
(anonymous)	@	index.mjs:1049
(anonymous)	@	index.mjs:1049
g6	@	react-dom.production.min.js:245
hm	@	react-dom.production.min.js:262
hl	@	react-dom.production.min.js:261
ie	@	react-dom.production.min.js:260
id	@	react-dom.production.min.js:282
hX	@	react-dom.production.min.js:270
x	@	scheduler.production.min.js:14
E	@	scheduler.production.min.js:15

I debugged this far enough to discover that the error starts to happen when we import the apm-rum init function by calling:

import { init } from '@elastic/apm-rum';

In other words, the init doesn’t even have to be called for this problem to appear.

[devcorpio]

Hi @akselinurmio,

Thanks for reaching out!

I have a few questions:

• What browser (and version) is reporting the error?
• Have you tested the behaviour on a different browser?
• Does your application use a fetch polyfill? If so, do you know the name?
• Is your website public? (I'm saying that in case there is the possibility of having a look directly there. Could this be an option?

Thanks, Alberto

[akselinurmio]

Hi @devcorpio,

And thanks for taking time for the issue. I'm more than happy to reply to your questions.

1. At least Chrome 105, Firefox 104 and Safari 15.6 are reporting an error about the same thing.
2. All the browsers mentioned above have the same behavior.
3. Our application doesn’t use a fetch polyfill.
4. The application is public, you can see the error live here: https://areena.yle.fi/1-50887903

[devcorpio]

Hi @akselinurmio,

Thanks for your answer!

--

I have been checking the application and I believe that there is something going on with the minification/compression of your javascript:

When checking the code involved I'm seeing this:

For some reason the read function is not defined at any place. That's what causing the error.

The original code released for the version 5.12.0 (the one you are using on that page) differs from the one you have (at least on the area where you are seeing the error):

A few questions:

• How are you installing the agent on your website?
• What javascript minifier/compressor are you using?

Thanks, Alberto

[devcorpio]

Hi @akselinurmio,

Have you found a solution for this? Ping us if you need further help

Thanks, Alberto

[akselinurmio]

Sorry for the long delay. It seems that the latest update to our minification module fixed the problem. Closing this issue now. Thank you for your time! 🙂