diff --git a/.changeset/easy-loops-admire.md b/.changeset/easy-loops-admire.md new file mode 100644 index 00000000..a86d1e95 --- /dev/null +++ b/.changeset/easy-loops-admire.md @@ -0,0 +1,7 @@ +--- +"@naverpay/react-pdf": patch +--- + +pdfjs-dist의 버전을 최신화합니다 + +PR: [pdfjs-dist의 버전을 최신화합니다](https://github.com/NaverPayDev/pie/pull/191) diff --git a/packages/react-pdf/src/components/page/Canvas.tsx b/packages/react-pdf/src/components/page/Canvas.tsx index 2b6509c1..dd8955c0 100644 --- a/packages/react-pdf/src/components/page/Canvas.tsx +++ b/packages/react-pdf/src/components/page/Canvas.tsx @@ -7,6 +7,9 @@ import type {RenderTask} from 'pdfjs-dist' export const PageCanvas = memo(function PageCanvas() { const pageRenderTask = useRef() + + const renderingId = useRef(0) + const {page, viewport: renderViewport, scale} = usePdfPageContext() const drawCanvas = useCallback( @@ -23,6 +26,9 @@ export const PageCanvas = memo(function PageCanvas() { pageRenderTask.current?.cancel() + // Generate new rendering ID (for tracking the last request) + const currentRenderingId = ++renderingId.current + const canvasViewport = page.getViewport({scale: scale * getPixelRatio()}) canvas.width = canvasViewport.width @@ -32,6 +38,15 @@ export const PageCanvas = memo(function PageCanvas() { canvas.style.height = `${Math.floor(renderViewport.height)}px` pageRenderTask.current = page.render({canvasContext, viewport: canvasViewport}) + + pageRenderTask.current.promise.catch((error) => { + // Ignore errors if they are not from the latest rendering + if (currentRenderingId !== renderingId.current) { + return + } + + throw error + }) }) }, [page, renderViewport.height, renderViewport.width, scale],