Transcript editor + Electron crashes the app (white screen)

[pietrop]

Mirror of bbc#4

Describe the bug
@bbc/react-transcript-editor + Electron crashes the app (white screen)

This was initially encountered by @greggcorp while correcting text using the app.

To Reproduce
Steps to reproduce the behavior:

1. Go to releases - 1.0.9-alpha.1
2. Download an install the app.
3. Get to the transcript view

At this point, is unclear how to reproduce. It's been reported that

• This happens while correcting the text of the transcript
• it might be happening when clicking the rollback btn repeatedly?

Expected behavior
Expecting the app not to crash to white screen when correcting text.

Screenshots
NA

Additional context
I have a hunch that It might be a problem with local storage in electron version of chrome v8 maxing out on space, and not handling that very well.

Transcript editor saves to local storage every time you stop typing. (also see bbc/react-transcript-editor#177 (comment))

To test this hypothesis

Used this snippet from stack overlow Find the maximum length of a single string that can be stored in localStorage and copy and pasted it in the console of electron. with minor modification to remove the dependency from the html element on the page.

+window.result = {}
-window.result = window.result || document.getElementById('result');

for convenience

//Clear localStorage
for (var item in localStorage) delete localStorage[item];

window.result = {}

result.textContent = 'Test running…';

//Start test
//Defer running so DOM can be updated with "test running" message
setTimeout(function () {

   //Variables
   var low = 0,
       high = 2e9,
       half;

   //Two billion may be a little low as a starting point, so increase if necessary
   while (canStore(high)) high *= 2;


   //Keep refining until low and high are equal
   while (low !== high) {
       half = Math.floor((high - low) / 2 + low);

       //Check if we can't scale down any further
       if (low === half || high === half) {
           console.info(low, high, half);
           //Set low to the maximum possible amount that can be stored 
           low = canStore(high) ? high : low;
           high = low;
           break;
       }


       //Check if the maximum storage is no higher than half
       if (storageMaxBetween(low, half)) {
           high = half;
           //The only other possibility is that it's higher than half but not higher than "high"
       } else {
           low = half + 1;
       }

   }

   //Show the result we found!
   result.innerHTML = 'The maximum length of a string that can be stored in localStorage is <strong>' + low + '</strong> characters.';

   //Functions
   function canStore(strLen) {
       try {
           delete localStorage.foo;
           localStorage.foo = Array(strLen + 1).join('A');
           return true;
       } catch (ex) {
           return false;
       }
   }


   function storageMaxBetween(low, high) {
       return canStore(low) && !canStore(high);
   }

}, 0);

Slowly but surely the page went blank, with no error on the console 🤷‍♂

If I do the same thing with the web version of the transcript editor component using the storybook demo there doesn't seem to be the same problem. see console log in screenshot below.

possibly related electron/electron#2357 (comment) from a search for "electron white screen crash"

electron/electron#2357 (comment)

---

Should have been fixed with latest release https://github.com/pietrop/digital-paper-edit-electron/releases/tag/1.0.3-alpha.9 but needs testing

[pietrop]

Tested in 1.0.3-alpha.13

TL;DR It doesn't crash but seems to hang

Using apple script to automated the typing

Setup

System preferences --> Security and privacy --> privacy

Allow the apps below to control your computer

check box for Script Editor

Apple script

repeat 3000 times
	delay 1
	tell application "System Events" to keystroke "some text "
end repeat

Or

delay 2
set counter to 0
repeat 3000 times
	repeat 30 times
		set counter to counter + 1
		tell application "System Events" to keystroke "SOME TEXT " & counter & " "
		delay 2
	end repeat
	delay 6
	tell application "System Events" to keystroke (ASCII character 31) --down arrow
	tell application "System Events" to keystroke (ASCII character 31) --down arrow
	tell application "System Events" to keystroke (ASCII character 31) --down arrow
end repeat

Run the text

1. Click run

2. and then click transcript editor in DPE
3. Let it run for a bit
4. See if it crashes

Optional

1. Optional, open console in electron
2. Optional start a screen recording program eg quicktime (as if it crashes you might not see the error message as the console gets disconnected etc..)

---

It doesn't crash, but it hangs. After 8 iteration of the loop, in the test run of the screenshot.

This might mean that electron fixed the crashing issue (?) (tested with release 7 of electron and might be worth testing with lasted version 8 as well tho) bu that react-transcript-editor is still very process heavy and hangs the render process (?) worth checking with demo browser version to see if it hangs as well.

[pietrop]

Seems to fixed after updating electron version. But feel free to re-open if the issue comes back.