Bug with Symbol on OculusBrowser

[YixiongLin]

Bug report

What

My company website is using some features on polyfill-library and we would like to launch our web in the browser of Oculus Quest 2 VR headset. We found that an issue with Symbol always breaks while launching the app.

Details

• Expected behavior: Company website should be able to launch in the browser of Oculus Quest 2 VR headset. User Agent for this browser is: 'Mozilla/5.0 (X11; Linux x86_64; Quest 2) AppleWebKit/537.36 (KHTML, like Gecko) OculusBrowser/18.1.0.2.46.337441587 SamsungBrowser/4.0 Chrome/95.0.4638.74 VR Safari/537.36'
• Follow steps of local development to setup local env based on mainline, then open Google Chrome browser -> devtools -> more tools -> network conditions. Under the user agent section, deselect "Use browser default" and use the above user agent.
• Environment
  • Browser: Mozilla/5.0 (X11; Linux x86_64; Quest 2) AppleWebKit/537.36 (KHTML, like Gecko) OculusBrowser/18.1.0.2.46.337441587 SamsungBrowser/4.0 Chrome/95.0.4638.74 VR Safari/537.36
  • Device: Oculus Quest 2 VR headset
  • Screenshot:
    

[romainmenke]

@YixiongLin Is it possible to capture the error message you get on the device?
The guide you linked is intended for feature development and not very useful for debugging.

I am not familiar with the OculusBrowser, so my comment might be besides the point.

---

Issues with Symbol are often caused by duplicate Symbol polyfills.
Are you also using a tool like core-js or babel-preset-env?

[YixiongLin]

Hi @romainmenke,

Thanks for your quick response! The screenshots of directly error in my app is:

You're right that seems like my project is using a few packages that has core-js as sub-dependencies. Those packages are: babel-polyfill, babel-register, babel-runtime and graphql-extensions.

[romainmenke]

In general polyfill-library is not compatible with core-js.

You could try to disable some features from core-js via : https://babeljs.io/docs/en/babel-preset-env#exclude

Which polyfill-library features do you depend on for your project?

[YixiongLin]

In general polyfill-library is not compatible with core-js.

You could try to disable some features from core-js via : https://babeljs.io/docs/en/babel-preset-env#exclude

Which polyfill-library features do you depend on for your project?

Thanks for your direction! I am using following features: 'default',
'es2015',
'es2016',
'es2017',
'es2018',
'es2019',
'fetch',
'navigator.sendBeacon',
'IntersectionObserver',
'ResizeObserver'

I could definitely give a shot to your suggestion for disabling core-js through the link you included

[romainmenke]

Alternatively you can keep using core-js and manually include the needed web features.

First step is to determine to this issue is indeed caused by a conflict between core-js and polyfill-library.

A next step would be to pick the right way to include the needed polyfills.
This might be build around core-js with extra polyfills for fetch, sendBeacon, ...
Or build around polyfill-library by disabling core-js.

The right solution depends on your stack.

[JakeChampion]

@romainmenke would core-web be a possible solution for this situation?

[romainmenke]

Yup :)

But I try to avoid immediately proposing it without having enough context.
It's a big hammer and if the actual issue is something else it is better to solve that.

@YixiongLin core-web is a babel plugin that automatically injects imports for needed polyfills from polyfill-library but excludes any features that would be polyfilled by core-js.

So Symbol would be polyfilled by core-js and fetch would be polyfilled by core-web (actual polyfill coming from here)

[YixiongLin]

Yup :)

But I try to avoid immediately proposing it without having enough context. It's a big hammer and if the actual issue is something else it is better to solve that.

@YixiongLin core-web is a babel plugin that automatically injects imports for needed polyfills from polyfill-library but excludes any features that would be polyfilled by core-js.

So Symbol would be polyfilled by core-js and fetch would be polyfilled by core-web (actual polyfill coming from here)

Thanks for your comment! After some investigation, I think the issue is not caused by conflict between core-js and polyfill-library, since in the chrome browser, we have both dependencies and Symbol is not polyfilled at all. I think polyfill-library manually avoid polyfilling Symbol by this change: #935, and core-js is also not polyfilling Symbol either. Therefore a simple solution from me is to avoid polyfilling Symbol for "OculusBrowser" in Symbol -> config.toml. Do you think it's a valid route to go with? Thanks

[romainmenke]

This looks more like the Oculus User Agent string is not normalised or detected correctly by : https://github.com/Financial-Times/polyfill-useragent-normaliser or https://github.com/Financial-Times/useragent_parser

https://polyfill.io/v3/polyfill.js?features=Symbol

Mozilla/5.0 (X11; Linux x86_64; Quest 2) AppleWebKit/537.36 (KHTML, like Gecko) OculusBrowser/18.1.0.2.46.337441587 SamsungBrowser/4.0 Chrome/95.0.4638.74 VR Safari/537.36

If it was detected correctly I don't think it would return Symbol here.

https://github.com/Financial-Times/polyfill-library/blob/master/polyfills/Symbol/config.toml#L30

chrome = "<49"

/* Polyfill service v3.110.1
 * For detailed credits and licence information see https://github.com/financial-times/polyfill-service.
 * 
 * Features requested: Symbol
 * 
 * - _ESAbstract.CreateMethodProperty, License: CC0 (required by "Symbol", "Object.freeze")
 * - _ESAbstract.Type, License: CC0 (required by "Symbol")
 * - Object.freeze, License: CC0 (required by "Symbol")
 * - Symbol, License: MIT */

vs. the same UA with another parser :

https://core-web.mrhenry.studio/.ua

{
    "browser": {
        "kind": "SAMSUNG_BROWSER",
        "version": 4
    },
    "browser_engine": {
        "kind": "BLINK",
        "version": 95
    },
    "operating_system": {
        "kind": "LINUX",
        "version": null
    },
    "bot": null,
    "equivalent_browser": {
        "kind": "CHROME",
        "version": 95
    },
    "estimated_year_of_release": 2021
}

---

Update :

Can you try in the Oculus browser with the gated flag?

https://polyfill.io/v3/polyfill.js?features=Symbol&flags=gated

This wraps each polyfill in a feature detect first and skips them when not needed.
This should resolve your issue for now.

[YixiongLin]

Update :

Can you try in the Oculus browser with the gated flag?

https://polyfill.io/v3/polyfill.js?features=Symbol&flags=gated

This wraps each polyfill in a feature detect first and skips them when not needed. This should resolve your issue for now.

Thank you so much for providing this solution! I think it works for my case and I am testing the change for inhouse environment. Regarding future plan, do you guys plan on including OculusBrowser check in the UA parser in order to rule out Symbol polyfill?

[JakeChampion]

@romainmenke could you send a link to how core-web is doing the useragent parsing? I would like to see if we can incorporate that into Financial-Times/polyfill-useragent-normaliser or Financial-Times/useragent_parser