Improve thumbnail rendering reliability and error handling
Added delays in `EnvelopeViewer.razor` to ensure the DOM is ready and to render thumbnails sequentially, preventing browser overload and keeping the UI responsive. Enhanced error handling in `RenderThumbnailsAsync` with detailed debug logs. In `pdf-viewer.js`, introduced a retry mechanism to wait for canvas elements to appear in the DOM and added detailed error logging for missing canvases or PDF document issues. Replaced generic comments with specific error messages to improve debugging. These changes enhance the robustness, reliability, and user experience of the PDF viewer.
This commit is contained in:
@@ -223,7 +223,8 @@
|
|||||||
_currentPage = await JSRuntime.InvokeAsync<int>("pdfViewer.getCurrentPage");
|
_currentPage = await JSRuntime.InvokeAsync<int>("pdfViewer.getCurrentPage");
|
||||||
await InvokeAsync(StateHasChanged);
|
await InvokeAsync(StateHasChanged);
|
||||||
|
|
||||||
// Render thumbnails
|
// Wait for DOM to be ready, then render thumbnails
|
||||||
|
await Task.Delay(100);
|
||||||
await RenderThumbnailsAsync();
|
await RenderThumbnailsAsync();
|
||||||
}
|
}
|
||||||
} catch (Exception ex) {
|
} catch (Exception ex) {
|
||||||
@@ -304,11 +305,18 @@
|
|||||||
|
|
||||||
async Task RenderThumbnailsAsync() {
|
async Task RenderThumbnailsAsync() {
|
||||||
try {
|
try {
|
||||||
|
// Sequential rendering to avoid overwhelming the browser
|
||||||
for (int i = 1; i <= _totalPages; i++) {
|
for (int i = 1; i <= _totalPages; i++) {
|
||||||
await JSRuntime.InvokeVoidAsync("pdfViewer.renderThumbnail", i, $"thumb-canvas-{i}");
|
await JSRuntime.InvokeVoidAsync("pdfViewer.renderThumbnail", i, $"thumb-canvas-{i}");
|
||||||
|
|
||||||
|
// Small delay between renders to keep UI responsive
|
||||||
|
if (i < _totalPages) {
|
||||||
|
await Task.Delay(50);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
} catch (Exception) {
|
} catch (Exception ex) {
|
||||||
// Thumbnail rendering is not critical
|
// Thumbnail rendering is not critical
|
||||||
|
System.Diagnostics.Debug.WriteLine($"Thumbnail rendering error: {ex.Message}");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -234,11 +234,25 @@ window.pdfViewer = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
async renderThumbnail(pageNum, canvasId) {
|
async renderThumbnail(pageNum, canvasId) {
|
||||||
if (!this.pdfDoc) return;
|
if (!this.pdfDoc) {
|
||||||
|
console.error('PDF document not loaded for thumbnail:', pageNum);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const canvas = document.getElementById(canvasId);
|
// Wait for canvas to be in DOM
|
||||||
if (!canvas) return;
|
let canvas = document.getElementById(canvasId);
|
||||||
|
let retries = 0;
|
||||||
|
while (!canvas && retries < 10) {
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 100));
|
||||||
|
canvas = document.getElementById(canvasId);
|
||||||
|
retries++;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!canvas) {
|
||||||
|
console.error('Canvas not found after retries:', canvasId);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const page = await this.pdfDoc.getPage(pageNum);
|
const page = await this.pdfDoc.getPage(pageNum);
|
||||||
const viewport = page.getViewport({ scale: 0.2 });
|
const viewport = page.getViewport({ scale: 0.2 });
|
||||||
@@ -254,7 +268,7 @@ window.pdfViewer = {
|
|||||||
|
|
||||||
await page.render(renderContext).promise;
|
await page.render(renderContext).promise;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// Thumbnail rendering errors are non-critical
|
console.error('Error rendering thumbnail', pageNum, ':', error);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user