Electron goes blank when audio element src attribute has changed in a React component and the window reloads on linux

Question

Helloooo!

I am facing this weird problem with Electron in use with React in my linux mint x64. In a component there is an audio element. I fill the scr attribute with a prop called stream_url. All its fine, the track is loaded and the music plays. I changed to another track and its ok.

But when the page reloads (just hit the default menu item reload), the main window goes blank. I can see the elements in DOM throught devtools and no error in the console. Also when I resize the window i can see the background of my application but nothing else..

As I understand I have to clear something.. but I cant find what.

Also I register in main.js

process.on('uncaughtException', function (err) {
 console.log(err);
})

but no exception happens

My first thought is that the renderer process has crached so I register the crashed event in main process

mainWin.webContents.on('crashed', event => {
 console.log('crashed');
})

but nothing is printed at the console.

I have tried the https://github.com/justinmc/react-audio-player with the same results..

Also I add to the main process the crashReported module

crashReporter.start({
 productName: 'name',
 companyName: 'company',
 submitURL: 'http://127.0.0.1:3001/submit',
 uploadToServer: true
});

to send the crash log in a test nodejs server but nothing is POSTed.

Your help is needed :)

Here is the code

in parent component render

    render() {
     return (
      <div className="app-content">
        <Header />
        <Main track={this.state.active_track} />
        <AppPlayer track={this.state.active_track}/>
      </div>
     )
    }

AppPlayer component

    import config from './config';
    import React from 'react';

    export default class AppPlayer extends React.Component {
     constructor(props) {
      super(props);

      this.setAudioSrc = this.setAudioSrc.bind(this);
      this.play = this.play.bind(this);
      this.stop = this.stop.bind(this);
     }

     setAudioSrc() {
       if (this.props.track && this.props.track.stream_url) {
        return this.props.track.stream_url + "?client_id=" + 
        config.client_id
       };
       return null;
     }

     play(e) {
      e.preventDefault();

      let playPromise = this.audioEl.play();
      if (playPromise !== undefined) {
       playPromise.then(() => {}).catch(function(error) {
        throw new Error(error);
       });
      }
     }

     componentWillUnmount() {
      this.audioEl.pause();
     }

     stop(e) {
      if (e) {
       e.preventDefault();
      }
      this.audioEl.pause();
      this.audioEl.currentTime = 0;
     }

     render() {
      return (
       <section className="current-track">
        <audio src={this.setAudioSrc()} ref={(audioEl) => {
            this.audioEl = audioEl
          }}/>
        <div className="current-track__actions hide">
          <a href="#" onClick={this.play}>
            <i className="fa fa-play"></i>
          </a>
          <a href="#" onClick={this.stop}>
            <i className="fa fa-stop"></i>
          </a>
        </div>
       </section>
      )
     }     
    }

• In windows 10 x64 there is no issue

Answer 1

The problem can be avoided, by disabling GPU compositing:

in main process if the OS is linux run the command

app.commandLine.appendSwitch('disable-gpu-compositing');

Happens for me on Linux Mint with an AMD GPU. You can easily see if GPU compositing is enabled by opening up chrome://gpu/ in Electron or as comparison in Chrome/Chromium.

test ok.

yo! :)