[Bug] App crashes when a modal has a filepicker?

[riodeuno]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

Reported by A-Cityzen#3550 on discord.

The user added a filepicker - which calls a multipart POST api - into a modal. The modal crashes the application on showModal Logs from the crash:

.

Steps To Reproduce

Not clear at the moment. We can attempt to do the following

• Create a multipart POST API
• Create a modal
• Add a file picker into the modal, and configure it to call the multipart POST API.
• We can further try selecting a video/PDF/Excel to try and recreate this issue.

Environment

Production

Version

Cloud

[jsartisan]

It is happening due to:

Chrome’s security policy will only allow you to access your device’s microphone/camera when a sites has a secure origin

Following this article helped users unblocked for the time being - https://medium.com/@Carmichaelize/enabling-the-microphone-camera-in-chrome-for-local-unsecure-origins-9c90c3149339. The user who was facing the issue will be adding the SSL certificate as well.

Not sure why it started happening in v1.6.6. Shri will be checking this soon. Still need to do RCA for this.

cc: @somangshu

[sharat87]

Okay, so first up, media devices API is not available without HTTPS, which means widgets like Camera, AudioRecorder etc. will require HTTPS to work.

Second, this is true of our previous Appsmith version, v1.6.5 as well. The difference is that in that version, we weren't crashing, it was just another error logged to the console. Screenshot:

Third, in the latest version, v1.6.6,

1. The Camera widget produces the same error, but doesn't crash the page.
2. The AudioRecorder widget doesn't log the error anymore, but doesn't work on HTTP either.
3. The FilePicker widget logs an error related to the same problem (media devices not available on HTTP), but the problem here is that it crashes the whole page.

I'm not sure why dropping a file picker widget is making the call to enumerateDevices that's there in the Camera widget's code. I tried looking into the imports to see how dropping a file picker can call code from Camera widget, but couldn't find a connection.

So, in summary, widgets based on media device APIs were never working on HTTP, they require HTTPS. What changed in v1.6.6 is the addition of the Camera widget, and the File picker is calling into this and is crashing. That part we still need to figure out.

PS: I have a temp instance running an Appsmith installation on HTTP, where I reproduced this. Let me know if you need access to troubleshoot this.

[jsartisan]

We should at least wrap the enumerateDevices function in a try-catch so that the app doesn't crash. @somangshu, can paul do this?

[sharat87]

Yes.

1. When this error happens, we shouldn't crash.
2. When a widget can't work because SSL is not available, this should be informed to the user. Perhaps the widget in the sidebar itself shows a little indicator that it's not available in HTTP, and dropped widgets show an error message overlay about this or something.
3. The file picker widget, ideally, shouldn't depend on the media devices API at all. Prefarably, it should work on HTTP just fine.

[RakshaKShetty]

@jsartisan, @sharat87 I could repro this issue in the below scenario I have checked scenario in the link : http://3.110.209.147/applications/61e67a4c5e0814517e03a582/pages/61e67a4c5e0814517e03a585/edit

[somangshu]

@RakshaKShetty we have pushed the fix, please check