one icon indicating copy to clipboard operation
one copied to clipboard
verified publisher icon onejs

Deploying a new version of a One website will cause hover-preloads of loaders to crash the page

Open DCzajkowski opened this issue 1 year ago • 3 comments

The problem

I was browsing the main landing page through a newsletter link, and (I think) on hover of one of the underlined words in "One is a new React framework [...]" the page completely crashed to white screen.

Link I used: https://onestack.dev/?ck_subscriber_id=1866536533&utm_source=convertkit&utm_medium=email&utm_campaign=%E2%9A%9B%EF%B8%8F%20This%20Week%20In%20React%20#204:%20React%20at%20Meta,%20React%20Compiler,%20React%20Router,%20Next.js,%20StyleX,%20Mitosis,%20One,%20Hermes,%20BottomTabs,%20Zeego,%20Storybook,%20Nitro,%20TC39,%20Vite,%20Deno,%20Bun,%20Brisa,%20Lucia...%20-%2015271121

Reproduction

At this point, I cannot reproduce the issue.

Environment

Firefox 131.0b2 (64-bit) macOS Sonoma 14.6.1

Stack trace

11:48:38.692 RootErrorBoundary.error TypeError: can't access property "useRef", ae.H is null
    useRef https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:10
    Vx https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:74
    IT https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:85
    o_ https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:90
    Es https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    no https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    Cg https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    up https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    nR https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    zi https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    Ig https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    E https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:40
    ge https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:40
_virtual_one-entry-CpsvVQzd.js:55:39271
    getDerivedStateFromError https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:55
    payload https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    Cl https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    Hd https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    Cg https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    up https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    nR https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    zi https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    Ig https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    E https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:40
    ge https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:40
11:48:38.695 RootErrorBoundary.error TypeError: can't access property "useRef", ae.H is null
    useRef https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:10
    Vx https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:74
    IT https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:85
    o_ https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:90
    Es https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    no https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    Cg https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    up https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    nR https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    zi https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    ep https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    Ig https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    E https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:40
    ge https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:40
_virtual_one-entry-CpsvVQzd.js:55:39271
11:48:38.698 [one] onCaughtError TypeError: can't access property "useRef", ae.H is null
    useRef https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:10
    Vx https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:74
    IT https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:85
    o_ https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:90
    Es https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    no https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    Cg https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    up https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    nR https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    zi https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    ep https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    Ig https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54
    E https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:40
    ge https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:40
 
Object { componentStack: "\no_@https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:90:327\nc_@https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:90:28\n$p@https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:55:39170\nr_@https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:85:16647", errorBoundary: {…} }
_virtual_one-entry-By0Kx5pm.js:90:1420
11:48:38.699 RootErrorBoundary.error:
can't access property "useRef", ae.H is null
D.useRef@https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:10:7303
Vx@https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:74:2252
IT@https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:85:15003
o_@https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:90:410
Es@https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54:42148
no@https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54:61508
Cg@https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54:71869
up@https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54:114330
nR@https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54:113452
zi@https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54:113277
ep@https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54:110565
Ig@https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:54:109951
E@https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:40:1562
ge@https://onestack.dev/assets/_virtual_one-entry-By0Kx5pm.js:40:1928


o_@https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:90:327
c_@https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:90:28
$p@https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:55:39170
r_@https://onestack.dev/assets/_virtual_one-entry-CpsvVQzd.js:85:16647 _virtual_one-entry-CpsvVQzd.js:55:39351

Keywords

blank screen, white screen, useRef is null

DCzajkowski avatar Oct 14 '24 10:10 DCzajkowski

Thanks for the heads up, we do preload the next page assets on hover, and those types of errors typically come from duplicate deps.

What I think happened - we had a new release go out while the webpage was already loaded, and so when you hovered it it loaded a new version, and that loaded a new version of React.

It's an interesting problem, we do attach timestamps and hashes, but not to the loaders. Probably we want to do two things:

  1. Instead of _preload.js?cache=key do _preload_cache_key.js so it doesn't grab the wrong one
  2. Some sort of "upgrade detection" that maybe forces a hard navigation if it detects that isn't there, or something along those lines

natew avatar Oct 14 '24 20:10 natew

Yup, new release in the meantime makes total sense — I'd loaded the page a few hours before I started interacting with it.

Nice catch 👍

DCzajkowski avatar Oct 14 '24 21:10 DCzajkowski

Should be fixed with this PR: https://github.com/onejs/one/pull/178

natew avatar Oct 16 '24 04:10 natew