BalenaDash Keeps Crashing/Not Show all Content

So I have been using the BalenaDash system for almost 2 years now, and may I say that it is awesome! I use it to display a sort of dashboard that I created and is web based.

Recently though, when I went to go test the system with the latest release on Github, it appears that when the system tries to play a youtube video which is embedded in a HTML document, the video plays fine, but when the page tries to redirect back it crashes… Any ideas as to why this might be happening?

Here is a photo of what is displayed instead of redirecting:

Also, recently I realized that one of the “widgets” that I have on the dashboard is not displaying on the BalenaDash system anymore. I thought it might have been blocked by the browser because of insecure content, but when looking deeper there is nothing to suggest there is an unsecure connection or content. And when I look at the dashboard using Chrome on my Mac is displays correctly. Has anyone else seen certain things not displayed when using this system recently?

Any suggestions or help would be greatly appreciated!

Hi @rjoel98 – thanks for posting about this. I’ve taken a look at the issues page for balenaDash, and I’m unable to find anything submitted about this already. If you could file an issue (actually, probably two - from what you describe, it seems likely they are separate problems) for what you’re seeing, this would help enormously.

In particular, can you be sure to include the URLs for the pages/widgets you’re having problems with? If they’re private, maybe there is a way for us to duplicate what you’re seeing (eg, “Sign up for an account on WheresMyGoldfish.biz, then include their widget in a page”). If we can duplicate the problems you’re seeing, it’s a lot more likely we’ll be able to figure out what’s going on.

All the best, and please let us know if you run into any further trouble.

Hugh

Hi @saintaardvark, Thank you for the quick reply!

Unfortunately the dashboard that I am using does have some sensitive information on it that makes it so I am not able to make it public. The widget can be found here, http://halfstaff.org/widget/, if anyone would be willing to try and recreate it and help me out, that would be great!

As far as the crashing issue goes, the html for that page specifically is below, and pretty straightforward. I feel like since it is fairly simple it should operate with minimal issues, but it clearly is not. Any suggestions for either my code or the BalenaDash system would be greatly appreciated! Thank you again!

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=1024">
<style>
.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
</style>

<div class="video-background">
    <div class="video-foreground">
      <iframe src="https://www.youtube.com/embed/yuQZYMSUlDg?rel=0&amp;controls=0&amp;showinfo=0&autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
    </div>
  </div>
</head></html>
<script>
    var uri = "/";
    uri = uri + document.location.search;
    window.setTimeout(function(){
        window.location.href = uri;
    }, 15000);
</script>

EDIT: Oh, also I did try posting it in the issues panel on Github, but never got a response. The issue has gotten worse and changed slightly though, so I figured I would reach out here too! https://github.com/balenalabs/balena-dash/issues/30

Hi Ryan

Is it correct you are experiencing the following two issues?

  1. You have a page that loads a YouTube video and then redirects after 15 seconds, however during this redirect the renderer crashes.
  2. You have a page with the American flag widget that does not load.

For issue 1 perhaps this is a memory issue. Which device are you using? The docs recommend setting configuration variable RESIN_HOST_CONFIG_gpu_mem, for this project we recommend setting it to 128. What is your current settings? Can you increase it?

Regarding issue 2. I set my LAUNCH_URL to http://halfstaff.org/widget/, since it does contain the actual widget and it loaded OK. Smart to think it might be a content policy issue. I will ask the balenaLabs team whats the best way to debug on page issues.

1 Like

Hey @codewithcheese,

Thank you for reaching out! You are correct with the overview above of the two issues I am experiencing.

For the first issue I currently have the RESIN_HOST_CONFIG_gpu_mem set to 128 as recommended, and I am mainly using a Pi 3, but I tried on a 4 also and got the same result. I am not positive what the max amount I can do for this variable is, but I did try 200 at one point and got the same result.

As for the second issue, I did not think about trying it on the widget website itself. Its intriguing that it works… That definitely makes me question the mixed content part then. I sent an email to the develop of the widget to inform them of the security issue that is presented, and how they can be fixed fairly easily, but I have not heard back.

Thank you again for you help, and please let me know if you hear anything back from the BalenaLabs Team!

Hi there, there may be a way to debug this on the client running Chrome, by enabling remote debugging capability in the Chromium container.

To do this, please try:

  • expose and publish port 9222 on the chromium container
  • launch Chromium with the following flags:
--remote-debugging-address=0.0.0.0 --headless --remote-debugging-port=9222 --disable-dev-shm-usage  --no-sandbox
  • forward local port 9222 to the remote container published port 9222 (i.e. using balena cli or ssh).
  • on the client navigate to chrome://inspect

This should allow dev. tools debugging of the page running in the container process.

Hey @ab77, I love the idea, but I’m having some trouble executing. Probably due to the fact that I am not very well versed with Balena as a whole.

I believe I exposed the port on the device and added the flags correctly, but I am having a great deal of issues trying to forward the port to my local machine. I am using a MacBook Pro for my local device, and I tried searching for an article or tutorial to help accomplish this, but did not have any luck.

Is there any articles or steps you would recommend in order to get this functioning properly, so I can start the troubleshooting process of the main issue?

Thank you again for your suggestion, I think it will help immensely with this issue and others going forward!

Hey,

Thanks for the patience. I’ll see if I can help clear some things up:

BALENA_HOST_CONFIG_gpu_mem
So this setting is deciding how much of the Pi memory is being dedicated to the GPU. The value you set this to depends on a few things: how much memory the device has, and what work the device is intended to do. So for instance, if you had a Pi3 which has 1Gb of memory you would be more conservative than if you had a Pi4 8Gb model. Work-wise, this setting only helps if your device is using the GPU for hardware accelerated video rendering, either with a video player, a game or the browser with H/W accelerated rendering enabled. For a balenaDash device rendering video I would recommend you set this value to 128Mb but no higher.

balenaDash browser
This project is about to undergo a version bump which will see all supported devices run the Chromium browser (release date TBC) but the current version runs two different browsers depending on the device type you use. It maps like this:

Device Type browser
Raspberry Pi 3 WPE
Raspberry Pi3 (64bit OS) ^ Chromium
Raspberry Pi 4 Chromium

^ you can create a Raspberry Pi 4 application but add a Raspberry Pi 3 running the 64bit OS to it - which will then run Chromium

This is important to understand, since it constrains what we can now do to try and debug why your webpage is crashing after playing a video. Your screenshot in the original post is showing the cog error page from the WPE browser - and AFAIK we cannot remotely debug this.

However, we can try if you either create a “Raspberry Pi 3 (using 64bit OS)” application in balenaCloud and reflash your device, or try a Raspberry Pi 4 in a new (RPi4 device type) application. It’s important that you create a new application and flash a device for it, to ensure the device is running a 64bit OS and therefore gets the Chromium version of the kiosk service.
To check, make sure you aren’t running in kiosk mode (no KIOSK environment variable set to 1) and the page should load with the familiar Chrome/Chromium menu and status bars.

** Remote Debugging **
Once you’re sure your device is running Chromium, we can focus on the remote debugging. As per Anton’s post above, you need to set an environment variable called FLAGS to --remote-debugging-address=0.0.0.0 --headless --remote-debugging-port=9222 --disable-dev-shm-usage --no-sandbox . What this does is tell Chromium that any IP using port 9222 can remotely debug the loaded page. We disable shared memory as part of the browser running in a container. We run the browser headless to allow remote debugging.

Then on your laptop/desktop machine you need to open a Chrome browser and navigate to chrome://inspect make sure “Discover network targets” is checked and click the “Configure” button:

image

Then enter the IP address of the Raspberry Pi (found on your balenaCloud dashboard):
image

with the remote debugging port into the “Target Discovery Settings” dialogue:
image

Now click done, and the device should appear in the list of remote targets:
image

You can now inspect the page, and see if you can debug the crash.

Hope this helps,
Phil

1 Like

Hi @phil-d-wilson,

Thank you so much for your detailed response! I was able to follow your instructions, and used the Raspberry Pi 4 OS to launch the system and when using chromium, it allowed for all of the content to be displayed correctly.

The one issue I am having now, which seems to be a common one when it comes to low user interaction web development and chromium, and that is that it does not automatically play video/audio without user interaction. Is there a way to disable this using the kiosk mode you all have built, or another work around someone might be able to recommend? This is a big part of the system right now, so I have to have it functioning properly. Also, I am unable to fully test the redirect until it can be played. As of now it displays the page and then redirects back, but the video does not fully load or play so I am not sure if that is what causes the crash or not.

Thank you all again for helping with these issue though, I am immensely grateful!

Hello,
Have you tried adding the --autoplay-policy=no-user-gesture-required switch to the chromium command line ?

1 Like

Actually, if you don’t override it, it should be the default, see https://github.com/balenalabs/balena-dash/blob/master/kiosk/start.sh#L35

Hi @zvin,
Thank you so much for that tip! I just added it to the flags that were recommended for the project and it worked! The redirect worked also, but I will keep testing to make sure. And if anything else happens I will be sure to reach out. Thank you again, you all have saved me so much further headache from this project!!

So sorry, but I am appearing to have a different issue now with the updated version that runs chromium. It solved all of my other issues, but I am having trouble setting the Time Zone, which appears to be solved here (https://github.com/balenalabs/balena-dash/issues/16).

And in the documentation it says to set the TZ under scheduler, but when I do so it is still about 6 hours off from the time zone I want, and suggestions on what might be happening here?

I am more than happy to open an issue on the project, but just wanted check with you all to make sure I am not missing something first. Thank you!

What value have you set for TZ?

America/Denver

I also tried AMERICA/DENVER just to see if in the unlikely event that had something to do with it, but it had no affect…

I tried to reproduce but it seems to work for me. Can you double check the TZ variable was entered for the “scheduler” service?
Here’s my output from ssh into the scheduler container on the dashboard terminal:

bash-5.0# date
Tue Sep 22 17:30:39 UTC 2020
(set TZ variable in dashboard to America/Denver - no quotes)
bash-5.0# cannot exec in a stopped state: unknown
SSH session disconnected
SSH reconnecting...
Spawning shell...
bash-5.0# date
Tue Sep 22 11:35:52 MDT 2020
bash-5.0# 

You are correct… I tried testing a couple difference web clocks to see if it is my code or something else. When I point to https://time.is/ the correct time is displayed. But when I point it to a javascript clock (like https://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock for example) it displays the wrong time. Any idea what might be happening here/what the best approach to fixing it would be? The flag widget I mentioned above (BalenaDash Keeps Crashing/Not Show all Content) runs off javascript, so it is having the same issue, just fyi. Thank you!

Oh, also @zvin … what you recommended above (BalenaDash Keeps Crashing/Not Show all Content) for the video playback worked for the video, but the audio is still not playing. Is there another flag or something that you would recommend so both play when the page is loaded?

Can you double check the TZ variable was entered for the “scheduler” service, then run date inside that container and share the output?

So sorry for the delayed response, but here is the redead from the process you asked me to do above. The javascript is still displaying the wrong time though…

Spawning shell…
bash-5.0# date
Wed Sep 23 14:16:28 MDT 2020
bash-5.0#