ReferenceError - Can't find variable: IntersectionObserver

[kristjanmar]

Describe the bug

I am running the latest version of SvelteKit and I have errors showing up in Sentry for Intersection Observer from users running old Safari versions.

The line that causes the error is likely in this file, line 1154: https://github.com/sveltejs/kit/blob/master/packages/kit/src/runtime/client/client.js

Here's the browser support for Intersection Observer: https://caniuse.com/?search=intersection%20observer

A guard clause that says "if (typeof IntersectionObserver !== 'undefined') {" would probably suffice to prevent this error.

Reproduction

I'm unable to replicate this myself in Browserstack but I'm getting several of these errors per day according to Sentry.

Logs

No response

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Memory: 52.37 GB / 63.91 GB
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.963.0), Chromium (108.0.1462.54)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @sveltejs/adapter-auto: ^1.0.0 => 1.0.0
    @sveltejs/kit: ^1.0.1 => 1.0.1
    svelte: ^3.55.0 => 3.55.0
    vite: ^4.0.3 => 4.0.3

Severity

annoyance

Additional Information

No response

[dominikg]

Are you building for safari12? sveltekit 1.0 uses vite 4.0 which defaults to safari14 as minimum target. And iirc safari <13 also does not support nullish coalescing which is used inside sveltekit, so i'd expect more errors to happen unless you specifically target legacy browsers too.

As a workaround you should be able to add a polyfill for IntersectionObserver.

According to https://browserslist.dev/?q=c2FmYXJpIDwxMi4xIE9SIGlvcyA8IDEyLjI%3D , global use of affected safari version is below 0.15%, they are severely outdated (released over 3.5 years ago, superseeded by multiple major versions since). Even if people are still using them, i'm not sure sveltekit should add extra guards to prevent errors like this when workarounds exist. If at all we should document how to make it work.

[kristjanmar]

Not sure how it can be but Sentry is reporting 80% of the errors coming from Safari 14 and also 10% from Safari 16.1. Only one report from Safari 13.1 since my last release 17 hours ago.

[nhunzaker]

We are similarly experiencing this in mobile Safari. It only affects a very small number of users (that we have tracked anyway), but when it happens, it seems to occur on every page load, enough to trip our automated alerts.

All instances are for very recent versions of Safari:

Testing as far back as an iPhone 6 via the iOS simulator, the issue is unreproducible. It seems from several sources that older iOS devices (separate from iOS version) can have IntersectionObserver disabled as an experimental feature: https://github.com/thebuilder/react-intersection-observer/issues/495#issuecomment-912482104

You can disable this for yourself in Safari settings to reproduce the issue:

For our purposes it's not a huge deal. The app seems navigable. Still, looking through the code, all setup steps after the IntersectionObserver bit are not going to run do to the exception. Given this preload behavior step is optional anyway, it would be nice to guard to ensure the runtime code fully executes:

https://github.com/sveltejs/kit/blob/68311d632eee69982ce02c39fcf4044a6158c1cd/packages/kit/src/runtime/client/client.js#L1479-L1482