[Bug]: React crashes when profile picture upload fails due to image processing error

[FahmiYoshikage]

What happened?

Hello Affine Team,

I am running a self-hosted instance of Affine using the ghcr.io/toeverything/affine-graphql:stable Docker image.

When I try to upload a profile picture, the application crashes with a "Minified React error #31". This happens consistently if browser fingerprinting protection is enabled.

Error Logs:

1 profile.tsx:62 Error: Image could not be reduce :Error: Pica: cannot use getImageData on canvas, make sure fingerprinting protection isn't enabled

1 notify.tsx:30 Error: Minified React error #31; visit https://react.dev/errors/31?args[]=%5Bobject%20Error%5D for the full message...

Analisis Masalah:

1. The root cause appears to be an error in the image resizing process (using the Pica library), which is triggered by browser fingerprinting protection blocking canvas data extraction.
2. The subsequent React crash is a secondary issue. The error handling logic in profile.tsx seems to be passing the entire Error object to the notification/toast component. React cannot render an object as a child, which causes the app to crash (Error #31).

Usulan Perbaikan:

The error handling logic in profile.tsx (around where the image processing error is caught) should be modified to pass the error message (error.message) to the notification component, not the entire error object.

Example (conceptual):

Kode Bermasalah (Kemungkinan): 1 try { 2 // ... image processing logic 3 } catch (error) { 4 notify.error(error); // This causes the crash 5 }

Usulan Perbaikan:

1 try { 2 // ... image processing logic 3 } catch (error) { 4 if (error instanceof Error) { 5 notify.error(error.message); // Pass only the message string 6 } else { 7 notify.error('An unknown error occurred.'); 8 } 9 }

This change will prevent the React app from crashing and will display a much more user-friendly error message.

Thank you!

Distribution version

Linux

App Version

No response

What browsers are you seeing the problem on if you're using web version?

No response

Are you self-hosting?

• [x] Yes

Self-hosting Version

No response

Relevant log output

Anything else?

No response

[affine-issue-bot[bot]]

Issue Status: 🆕 *Untriaged

*🆕 Untriaged

The team has not yet reviewed the issue. We usually do it within one business day. Docs: https://github.com/toeverything/AFFiNE/blob/canary/docs/issue-triaging.md

^{_{This is an automatic reply by the bot.}}

[ddybing]

I am looking into this. In your opinion, would it be better to just abort the upload if image resize cannot be done and show an error to the user, or would you like the image to be uploaded in the original size and dimensions?