ApexCharts on iOS: Error rendering data in charts causes page reload and breaks the browser, showing a black screen.

[WildorGuerrero]

Hello, I have an issue using ApexCharts in my Angular application. Everything works correctly on desktop browsers and Android mobile devices, but on physical iOS devices (tested on Safari and Chrome), there is an error. After the data is loaded into the charts, the page reloads a few seconds later, and sometimes the browser shows a black screen with the message "An error has occurred several times."

My flow is as follows:

I have a component that filters data within a date range and emits these values to the main component. This main component updates a service that notifies other components where my charts are located.
The charts in ApexCharts are rendered based on the data provided by the service.

I checked the iPhone console, but it doesn’t show any errors.

[Aghamyr]

I was about to create my own post about this issue myself, glad I double check if it existed.

We have the very same problem that recently started to appear on iOS devices, any page that contains an apexchart with a littles bit of data (something like 20 columns or stacked columns) crashes after a few second.
I first reloads the page with a small banner "this page was reloaded because a problem occurred", and then the tab show the crash screen "A problem repeatedly occurred on url".

We tried a few things:

• updating to latest version of both apexcharts and react-apexcharts
• commenting the chart stop the pages from crashing
• removing chart animation doesn't help
• we have a chart that can dynamicaly show 3/6/12 stacked columns (2/3 dataset per column), when showing 3 or 6 columns, the tab doesn't crash, when showing 12 it crashes.
• these crashes are entirely limited to iOS webkit browsers (chrome & safari, didn't test others), no crashes on Android, no crashes on desktop pc, or mac
• tried using react-scan there is no infinite rerender, once everything finishes loading, nothing renders again
• checked the system console and it shows those type of errors:
  • on chrome:

  Error Domain=RBSServiceErrorDomain Code=1 "((target is not running or doesn't have entitlement com.apple.developer.web-browser-engine.rendering AND target is not running or doesn't have entitlement com.apple.developer.web-browser-engine.networking AND target is not running or doesn't have entitlement com.apple.developer.web-browser-engine.webcontent))"
  Sandbox: com.apple.WebKit.WebContent(45152) deny(1) syscall-unix 494
  Sandbox: com.apple.WebKit.GPU(45089) deny(1) mach-lookup com.apple.diagnosticd
  

  • on safari:

WebKit Process Crash:
MobileSafari	0xca3038c40 - [PID=45439] WebProcessProxy::didClose: (web process 0 crash)
GPU Process Issues:
Sandbox: com.apple.WebKit.GPU(45431) deny(1) mach-lookup com.apple.diagnosticd
Memory/Resource Issues:
Invalid decoded thread state

Now here is the weirdest and most annoying part. In order to try to diagnose and try solution to this problem we tried reproduction this problem:

• locally => no crashes
• dev and staging servers (with same production build and a clone of our production database) => no crashes

We're a bit out of ideas to try, the only next step for us would be to migrate to another library and we would rather avoid doing that.

If someone has any ideas regarding this issue, please do suggest 🙏

[jhohenr]

Same here.

[jhohenr]

@WildorGuerrero @Aghamyr Do you use Microsoft's Clarity? I solved the problem by removing it 😃

[Aghamyr]

I'm not using that, no.
Glad you found a fix that works for you 👍