ReferenceError: Plotly is not defined

I have a web application running through anvil, It has been working well till now with no errors noticed through Logs.

However, recently I have been noticing the following error:
‘ReferenceError: Plotly is not defined’

This pops up 4 times for each session (Thinking for the 4 graph objects in the web application)
Since i cannot see if this is causing the web app to crash or it just does not display the graphs. What’s interesting is that I never had this issue before, started seeing them since 2 months now.
I call plotly on both client and server side.
I have not been able to replicate the error yet, could use some advice regarding the cause, solution and effect of this error.

Link to Web App : https://fluid-properties-kanda.anvil.app/

Suggestion while using App, Can select between Field and SI units.
Here are some value thresholds:

API value between 6 and 65
gas gravity value between 0.56 and 2.0
Temperature value between 50 and 350 Fahrenheit (For SI) or between 10 and 176 degrees Celsius (for field)
Maximum Pressure or Bubble point Pressure value below 20000 psia (For SI) or 137895 KPa (For Field)
Minimum Pressure above 14.7 psia (SI) or 101 KPa (Field)
Table Entry value Between 15 and 50

Can pick between Bubble Point pressure and Solution Gas oil ratio ( I recommend the former just value has to be less than Max pressure value)

Then click ‘Confirm input’ to check if values are within constraint , Then ‘Run’ to get results.

How very strange, do you have any users that are able to reproduce this reliably?

I’d suggest adding some more logging statments.
Logging the user’s browser and anything else that might be useful

from anvil.js import window


print(window.navigator.userAgent)

Without a reproduction it’s difficult to debug. Off the top of my head it looks like plotly is failing to load but that error is being swallowed and then continuing regardless.

Will do. I will update you once I receive any updates regarding the same.

1 Like

I have mostly been getting errors from Des Moines US and Germany, I made a post regarding this for people to try and send back any errors they come across. Users from India, Armenia, Norway etc. showed no error. This seems to be repeated for only these selected users.

Error User : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36
: ReferenceError: Plotly is not defined
: ReferenceError: Plotly is not defined
: ReferenceError: Plotly is not defined
: ReferenceError: Plotly is not defined

Non Error User: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Mobile Safari/537.36
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Mobile Safari/537.36

ok nothing unusual about the browser info (though you might want to encourage that user to upgrade chrome to the latest version it’s a couple of years old now)

I tried replicating the issue on the same OS/browser and the app ran as expected.

You should perhaps add some more logging statements.
I assume the error only occurs after they hit the run button.
But that’s not clear from the logs.

Could an outdated browser cause this issue?
Yes, On clicking run, the table of values and plots are generated.
So far no one else has reported the issue.
Would it be possible to send more logging statements ?
I could include them as well.

Quick updated, When I try to use the Web app i do not get an errors, but recently instead of :
: ReferenceError: Plotly is not defined
: ReferenceError: Plotly is not defined
: ReferenceError: Plotly is not defined
: ReferenceError: Plotly is not defined
i get :
: [object Event]
: [object Event]
: [object Event]
: [object Event]

Are there any more logging statements I should add to get more information regarding these errors ?

I don’t think it is a browser issue. I have the same issue, but it works fine in a freshly created application. It’s only my production application where this issue occurs on multiple browsers (Arc/Safari/Chrome).

Here is the console line in Plot.js where it is failing. It looks like the global Plotly variable is never defined. Not sure where that is suppose to occur.

        PyDefUtils.withDelayPrint(
            loadPlotly(self)
                .then(getTemplate)
                .then(() => {
                    const outerEl = self._anvil.domNode;
                    // react is faster than newPlot on the same div element
                    Plotly.react(outerEl, jsData, jsLayout, jsConfig); #FAILING HERE line 603 in Plot.js
                    if (!self._anvil.plotlyUpdated) {
                        outerEl.on("plotly_click", onPlotlyClick.bind(null, self));
                        outerEl.on("plotly_doubleclick", onPlotlyDoubleClick.bind(null, self));
                        outerEl.on("plotly_selected", onPlotlySelect.bind(null, self));
                        outerEl.on("plotly_hover", onPlotlyHover.bind(null, self));
                        outerEl.on("plotly_unhover", onPlotlyUnhover.bind(null, self));
                        outerEl.on("plotly_afterplot", onPlotlyAfterplot.bind(null, self));
                    }
                    self._anvil.plotlyUpdated = true;
                    // For some reason, this doesn't ever get called. Possibly we're on an old version of Plotly. Work it out if anyone needs it.
                    //self._anvil.element[0].on("plotly_legendclick", onPlotlyLegendClick.bind(null, self));
                })
        );

It fails on setting the data attribute of the plot:

    self.plot_completed_work_by_date.data = [
      go.Scatter(
        x = [1,2,3],
        y = [1,2,3],
        marker = dict(
          color= 'rgb(16, 32, 77)'
        )
      )
    ]

@anthonys thanks for sharing, loadPlotly is what creates the window.Plotly element.

Are your error messages the same/different to above?
Are they frequent, 1 user, multiple users?

Feel free to share app-id and an app session and we can go take a closer look.

1 Like

This is the direct Error copied from the console:

Uncaught runtime error: null at null:null, column null ReferenceError: Plotly is not defined
    at Plot.js:603:21

It has not been rolled out to production because I can’t get around this error, so it’s just me experiencing it. I’ll share the app-id and session via pm. Thank you!

@stucork was kind enough to go back and forth with me and we found the issue.

The plotly error only occurred when using a custom component and adding it to the dom.

1 Like