jupyter-ui icon indicating copy to clipboard operation
jupyter-ui copied to clipboard
verified publisher icon datalayer

Cell execution errors after page reload

Open MarcosVn opened this issue 1 year ago • 1 comments

Description

I am using Plotly as a library to plot some charts in a Cell component, and when I reload the page (F5), an error occurs in the code executed within the cell that does not occur in JupyterLab. Video evidence below:

https://github.com/datalayer/jupyter-ui/assets/6693483/23811d4a-cdf6-4bb8-a839-ac682980322a

Reproduce

  1. Configure a simple Cell
  2. Install plotly;
  3. Put the code below into it:
import plotly.express as px
px.scatter(px.data.iris(), x='sepal_width', y='sepal_length', color='species', title='Test')
  1. Execute the Cell (the chart will be displayed)
  2. Reload the page (with F5 or another shortcut);
  3. Try to execute the Cell again; this will produce empty output
  4. Open the console and see the error:
Uncaught TypeError: Cannot read properties of undefined (reading 'newPlot')
    at <anonymous>:1:248
    at Object.execCb (require.min.js:1:16727)
    at e.check (require.min.js:1:10499)
    at e.enable (require.min.js:1:13242)
    at e.init (require.min.js:1:9605)
    at require.min.js:1:15109
(anonymous) @ VM874:1
execCb @ require.min.js:1
check @ require.min.js:1
enable @ require.min.js:1
init @ require.min.js:1
(anonymous) @ require.min.js:1
setTimeout (async)
req.nextTick @ require.min.js:1
s @ require.min.js:1
requirejs @ require.min.js:1
(anonymous) @ VM874:1
attachWidget @ index.es6.js:2601
insertWidget @ index.es6.js:2504
_insertOutput @ widget.js:557
onModelChanged @ widget.js:300
invokeSlot @ index.es6.js:566
emit @ index.es6.js:522
emit @ index.es6.js:112
_onListChanged @ model.js:262
invokeSlot @ index.es6.js:566
emit @ index.es6.js:522
emit @ index.es6.js:112
push @ observablelist.js:139
_add @ model.js:219
add @ model.js:136
OutputArea._onIOPub @ widget.js:101
_handleIOPub @ future.js:246
await in _handleIOPub (async)
handleMsg @ future.js:215
_handleMessage @ default.js:1243
(anonymous) @ default.js:182
Promise.then (async)
KernelConnection._onWSMessage @ default.js:179
Show 20 more frames
Show lessUnderstand this error
18:15:41.000 VM875:1 Uncaught TypeError: Cannot read properties of undefined (reading 'newPlot')
    at <anonymous>:1:248
    at Object.execCb (require.min.js:1:16727)
    at e.check (require.min.js:1:10499)
    at e.enable (require.min.js:1:13242)
    at e.init (require.min.js:1:9605)
    at require.min.js:1:15109

Expected behavior

The cell should be executed as it was the first time: The chart should be rendered without any JS errors in the console.

Context

  • Datalayer version: 0.14.0
  • Operating System and version: Ubuntu
  • Browser and version: Chrome Version 125.0.6422.141
Browser Output 
WebSocket connection to 'ws://127.0.0.1:8686/api/jupyter-server/api/events/subscribe?token=test' failed: 
(anonymous) @ index.js:113
_subscribe @ index.js:99
factory @ index.js:30
_execute @ index.es6.js:284
execute @ index.es6.js:220
Show 5 more frames
Show lessUnderstand this error
18:53:39.560 State.js:135 Kernel Manager is Ready KernelManager {_isDisposed: false, _disposed: Signal, serverSettings: {…}, _isReady: true, _kernelConnections: Set(0), …}
18:53:39.561 State.js:170 Starting Kernel Name: python
18:53:39.576 applyTheme.js:154 Theme is light based on '--jp-layout-color1' value: white.
18:53:39.663 default.js:80 Starting WebSocket: ws://127.0.0.1:8686/api/jupyter-server/api/kernels/204000b7-3539-4738-9b95-16f33d9b7e69
18:53:39.671 State.js:187 Kernel is Ready Kernel {_clientId: '899c7971-0416-41fc-aa74-be85cb379fec', _connectionStatus: 'connected', _id: '204000b7-3539-4738-9b95-16f33d9b7e69', _info: undefined, _kernelConnection: KernelConnection, …}
18:53:39.769 Kernel.js:102 Kernel Info {path: 'kernel-d4b9a84e-d88b-462a-8af0-5a63219039e9', id: '204000b7-3539-4738-9b95-16f33d9b7e69', clientId: '899c7971-0416-41fc-aa74-be85cb379fec', sessionId: '6bd41ef7-6fbf-4230-b149-56778599d7b7', kernelInfo: {…}}
18:53:39.772 default.js:80 Starting WebSocket: ws://127.0.0.1:8686/api/jupyter-server/api/kernels/204000b7-3539-4738-9b95-16f33d9b7e69
18:53:39.773 CellAdapter.js:194 Current Kernel Connection KernelConnection {_id: '204000b7-3539-4738-9b95-16f33d9b7e69', _createSocket: ƒ, _onWSOpen: ƒ, _onWSMessage: ƒ, _onWSClose: ƒ, …}
18:53:39.814 index.js:113 WebSocket connection to 'ws://127.0.0.1:8686/api/jupyter-server/api/events/subscribe?token=test' failed: 
(anonymous) @ index.js:113
_subscribe @ index.js:99
factory @ index.js:30
_execute @ index.es6.js:284
execute @ index.es6.js:220
Show 5 more frames
Show lessUnderstand this error
18:53:40.816 index.js:113 WebSocket connection to 'ws://127.0.0.1:8686/api/jupyter-server/api/events/subscribe?token=test' failed: 
(anonymous) @ index.js:113
_subscribe @ index.js:99
factory @ index.js:30
_execute @ index.es6.js:284
execute @ index.es6.js:220
Show 5 more frames
Show lessUnderstand this error
18:53:42.505 index.js:113 WebSocket connection to 'ws://127.0.0.1:8686/api/jupyter-server/api/events/subscribe?token=test' failed: 
(anonymous) @ index.js:113
_subscribe @ index.js:99
factory @ index.js:30
_execute @ index.es6.js:284
execute @ index.es6.js:220
Show 5 more frames
Show lessUnderstand this error
18:53:42.939 plotly.js:1 Uncaught SyntaxError: Unexpected token ':1:248
    at Object.execCb (require.min.js:1:16727)
    at e.check (require.min.js:1:10499)
    at e. (require.min.js:1:12915)
    at require.min.js:1:1542
    at require.min.js:1:13376
    at each (require.min.js:1:1020)
    at e.emit (require.min.js:1:13344)
    at e.check (require.min.js:1:11058)
    at e.enable (require.min.js:1:13242)

MarcosVn avatar Jul 09 '24 21:07 MarcosVn

I'm able to reproduce when running the Next.js example, but I'm getting a slightly different errors. Not sure if it's the exact same issue, but the repro steps seem the same.

https://github.com/user-attachments/assets/6b404aca-2793-47ff-b591-21447a0d9ffa

GET http://localhost:3000/plotly.js net::ERR_ABORTED 404 (Not Found)

require.min.js:1 Uncaught Error: Script error for "plotly"
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.min.js:1:1067)
    at HTMLScriptElement.onScriptError (require.min.js:1:13218)

Wells-Codes avatar Dec 03 '24 22:12 Wells-Codes

Closing as I can not reproduce it with the latest release. Please reopen if you want.

echarles avatar Jul 20 '25 09:07 echarles