ContentPreview Resize Generates Many Uncaught Promise Rejections
- 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
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