Catch Load Errors

[davehibshman]

When using viewer.js code in an iframe (web/viewer.html?file=my.pdf") and getting a load error like Error: file origin does not match viewer's how do I catch this error? The console reports app.js:2140 Uncaught (in promise) Error: file origin does not match viewer's. I have setup the load listener and am using the PDFViewerApplication.initializedPromise. I was hoping the PDFViewerApplication.initializedPromise would reject, but it does not. I could not find an eventbus event to listen to specifically for load errors either.

I would like to programmatically detect such load errors and dynamically remove the iframe hosting the pdf viewer and instead replace it with my own error messaging. I can't figure out how to do that.

Configuration:

• Any, but testing on Chrome 97.0.4692.71 64-bit
• Ubuntu 20.04
• PDF.js version: v2.12.313
• Is a browser extension: No

Steps to reproduce the problem:

1. Purposely try to load a PDF in a way that would cause the app.js:2140 Uncaught (in promise) Error: file origin does not match viewer's error.

[Snuffleupagus]

I was hoping the PDFViewerApplication.initializedPromise would reject, but it does not.

That's actually somewhat expected, since the initializedPromise is connected to the viewer initialization rather than a particular PDF document; please note that the promise is resolved already in

pdf.js/web/app.js

Lines 262 to 295 in e003281

	async initialize(appConfig) {
	this.preferences = this.externalServices.createPreferences();
	this.appConfig = appConfig;
	await this._readPreferences();
	await this._parseHashParameters();
	this._forceCssTheme();
	await this._initializeL10n();
	if (
	this.isViewerEmbedded &&
	AppOptions.get("externalLinkTarget") === LinkTarget.NONE
	) {
	// Prevent external links from "replacing" the viewer,
	// when it's embedded in e.g. an <iframe> or an <object>.
	AppOptions.set("externalLinkTarget", LinkTarget.TOP);
	}
	await this._initializeViewerComponents();
	// Bind the various event handlers *after* the viewer has been
	// initialized, to prevent errors if an event arrives too soon.
	this.bindEvents();
	this.bindWindowEvents();
	// We can start UI localization now.
	const appContainer = appConfig.appContainer || document.documentElement;
	this.l10n.translate(appContainer).then(() => {
	// Dispatch the 'localized' event on the `eventBus` once the viewer
	// has been fully initialized and translated.
	this.eventBus.dispatch("localized", { source: this });
	});
	this._initializedCapability.resolve();
	},

I could not find an eventbus event to listen to specifically for load errors either.

No such thing exists, or has ever existed, since the use-case does seem somewhat specialized.

(Perhaps we could add a new "documenterror" event, but please note that neither of this really applies to the Firefox PDF viewer.)

Purposely try to load a PDF in a way that would cause the app.js:2140 Uncaught (in promise) Error: file origin does not match viewer's error.

Are you already modifying the viewer source-code by e.g. extending the HOSTED_VIEWER_ORIGINS list?
If so, you could also (quite easily) dispatch your own (custom) event e.g. somewhere around

pdf.js/web/app.js

Lines 2136 to 2139 in e003281

	} catch (ex) {
	PDFViewerApplication.l10n.get("loading_error").then(msg => {
	PDFViewerApplication._documentError(msg, { message: ex?.message });
	});

and then listen for that one.

[davehibshman]

I can fire the custom event suggested. Thanks.