App doesn't load in older version of Safari. In Chrome, PDF creation unresponsive

dan-langridge commented 5 months ago

Reproduction steps

On our slightly old MacBooks in the Warehouse, the app webpage doesn't load at all on Safari (blank white page)

In Chrome on the same laptop, the page loads, but hangs when creating a PDF, such as a Shopping List, Label or Driver overview.

The pop-up appears to enter quantity, driver name etc, but the submit button does nothing.

Expected behaviour

If the app doesn't work on our fleet of 4 MacBooks we have in the warehouse then we may need to upgrade all of our computers - yikes

Screenshots / Videos

IMG_1105 Large

https://github.com/NorwoodAndBrixtonFoodbank/nbf-website/assets/80202270/b60a6d7c-90c1-431d-9503-eea6eda09367

https://github.com/NorwoodAndBrixtonFoodbank/nbf-website/assets/80202270/5f335880-8af4-428e-85c8-96bd8835c298

What browsers are you seeing the problem on?

Chrome, Safari

What OS is your computer running on?

macOS

dan-langridge commented 2 months ago

MacBooks used in the warehouse below New app only works on MacBook#4(2015)

MacBook Pro (15-inch, Mid 2010) W80405XKAGU

MacBook Pro (15-inch, 2.53GHz, Mid 2009) W89251EX7XK

MacBook Pro (15-inch, Mid 2012) A1286 C02JH38JDV33

MacBook Pro (Retina, 15-inch, Mid 2015) A1398 C02PX3F0G8WL

dan-langridge commented 2 months ago

![Uploading 372054785...]![Uploading 372054897...]![Uploading 372055167...]

stonelink commented 1 month ago

Repro results on a MacBook running macOS High Sierra (version 10.13.6)

Safari: behaviour reproduced

On Safari 13.1.2, console errors include:

HierarchyRequestError: The operation would yield an incorrect node tree.
> appendChild...

NotFoundError: The object can not be found here.
> removeChild...

Error: Minified React error #185, visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev envirojnment for full errors and additional helpful warnings.

Error: Minified React error #327, visit https://reactjs.org/docs/error-decoder.html?invariant=327 for the full message or use the non-minified dev envirojnment for full errors and additional helpful warnings.

Error 185 is Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Error 327 is Should not already be working.

Even with browserslist support for Safari 13.1.2, the errors above are still occurring as well as the following (which was probably occurring before the browserslist change, but the console error list had been trimmed:

TypeError: e.addEventListener is not a function. (In 'e,addEventListener("change",listener)', 'e.addEventListener' is undefined)

Chrome: not reproduced

Running Chrome 116 (latest installable version), I successfully logged in and generated both shipping labels and shopping lists. The generated PDFs work fine in Preview and eventually displayed correctly in Chrome (but took some time).

The error message shown in the attached video is a database query error ("Failed to fetch parcels with Shipping Labels Downloaded events."), which will need to be investigated separately.

stonelink commented 1 month ago

Hi @dan-langridge, thank you for the version information on this ticket. I have a few more questions:

Q: Are all the Safari versions on which the application doesn't work Safari version 13.1.2?
Q: Which version of Chrome do you have installed on these machines?

I have a 2010 MacBook running macOS High Sierra on which I installed the latest permitted version of Chrome (116). It was a new installation, because the previous older version of Chrome would not upgrade. The PDF generation and other functionality is working for me on that instance of Chrome.

Q: Would you mind doing a little more testing of the PDF generation on Chrome, with the latest version of the app please?
- The error that is shown in the mp4 is a failed database query, so might be a different bug that was fixed in the last month. (I tested with 2 clients & NFA, but it worked for me)

FYI I've diagnosed the initial error occurring on Safari and am endeavouring to add support for that version, but there are a few more steps involved. I have confidence that the system will work on your warehouse laptops soon.

Thanks, Lincoln

dan-langridge commented 1 month ago

Q: Are all the Safari versions on which the application doesn't work Safari version 13.1.2? A: Correct

Q: Which version of Chrome do you have installed on these machines? A: 83.0.4103.97. Ancient! Today I installed the latest version it would allow me to (116.0.5845.187) and the app now works in this version of Chrome.

Q: Would you mind doing a little more testing of the PDF generation on Chrome….. A: Now we are running this newer version of Chrome the app works, PDFs can be created and downloaded as expected.

From a user perspective, the downside of Chrome is when you have downloaded a PDF, its default behaviour is to open the PDF in a new tab in chrome rather than opening the file in Preview. You can’t print to our printers from the Browser, so you then have to navigate to finder, downloads, and open the file from there in Preview to print. It’s a slower process than Safari which opens the file in Preview by default.

On 13 Oct 2024, at 15:27, Lincoln Stone @.***> wrote:

Hi @dan-langridge https://github.com/dan-langridge, thank you for the version information on this ticket. I have a few more questions:

Q: Are all the Safari versions on which the application doesn't work Safari version 13.1.2? Q: Which version of Chrome do you have installed on these machines? I have a 2010 MacBook running macOS High Sierra on which I installed the latest permitted version of Chrome (116). It was a new installation, because the previous older version of Chrome would not upgrade. The PDF generation and other functionality is working for me on that instance of Chrome.

Q: Would you mind doing a little more testing of the PDF generation on Chrome, with different clients please? The error that is shown in the mp4 is a failed database query, so might be a different bug that is specific to something about those clients. (I tested with 2 clients & NFA, but it worked for me) FYI I've diagnosed the initial error occurring on Safari and am endeavouring to add support for that version, but there are a few more steps involved. I have confidence that the system will work on your warehouse laptops soon.

Thanks, Lincoln

— Reply to this email directly, view it on GitHub https://github.com/NorwoodAndBrixtonFoodbank/nbf-website/issues/397#issuecomment-2409000950, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATD4UHVMBMJESLFK7OJH6CLZ3J7MXAVCNFSM6AAAAABKCCONCGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMBZGAYDAOJVGA. You are receiving this because you were mentioned.

stonelink commented 1 month ago

Thanks @dan-langridge

I have fixes for the major issues under Safari v13, and have verified that PDF generation for Shopping Lists and Shipping Labels is working and the files open in Preview.

These fixes have been deployed to the Dev site. I'll look at getting that released to the beta site so that you can test on your machines. Note that #523 is a known issue about the logo image not working.

The other priority at the moment is the upgrade to NextJS v14 (VFB-282) - I'll try to get that released in the next few days because that could have subtle effects across the system. After that I'll look at the other tickets you've prioritised.

NorwoodAndBrixtonFoodbank / nbf-website