box / box/box-content-preview

ContentPreview Resize Generates Many Uncaught Promise Rejections

Open
#1,362 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
120
Forks
137
Avg merge
12h 36m
Merged PRs (30d)
17

Description

When resizing the `ContentPreview` component in `box-ui-elements`, the call to `this.preview.resize();` can generate promises that get cancelled and that then throw errors when they're rejected. We use `sentry` to monitor frontend errors in our app and whenever anyone resizes their bowser window we get hundreds of uncaught promise rejections from this component. I tried using an error boundary to catch the errors and silence them (since they're just cancelled resize tasks) but was unable to.

**Environment:**

- Elements version: 13.0.0

**Desktop (please complete the following information):**

- OS: MacOS 11.2.3
- Browser: Safari, Brave
- Version: Safari 14.0.3, Brave Version 1.22.72 Chromium: 89.0.4389.128 (Official Build) (x86_64)

**Steps to reproduce the problem:**

1. Render a `` component with a `.docx` file (though it doesn't seem to matter what file)
2. Resize the viewport either by dragging the window corners or dragging the development tools
3. See many uncaught promise rejections happen:
```
Uncaught (in promise) Error: TextLayer task cancelled.
at B.cancel (pdf.min.js:482)
at f.value (pdf_viewer.min.js:62)
at e.value (pdf_viewer.min.js:138)
at e.value (pdf_viewer.min.js:134)
at e.value (pdf_viewer.min.js:138)
at e.value (pdf_viewer.min.js:172)
at e.value (pdf_viewer.min.js:175)
at e.set (pdf_viewer.min.js:190)
at n.value (preview.js:33)
at e.value (preview.js:58)
at Object.onResize (ContentPreview.js:849)
at index.esm.js:133
```

**What is the expected behavior? (Screenshots can be helpful here)**

The component resizes sucessfully without throwing errors in the console.

**What went wrong? (Screenshots, console logs, or HAR files can be helpful here)**
Nothing visually, just all these uncaught promise rejections trigger a lot of events in Sentry

**Expected behavior**
The component resizes sucessfully without throwing errors in the console.

Contributor guide

Open the contributing guide

Research direction

Start at the onResize handler in ContentPreview.js and follow the this.preview.resize() call into preview.js. Reproduce the issue by resizing a rendered ContentPreview, then verify that cancelled resize tasks no longer produce uncaught promise rejections while resizing still succeeds.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.