Detect when HTTP error is trigerred in angular when request takes too long

Question

I have a function which is used for exporting files to excel. It detects when file is ready and then downloads it. This is how it looks:

private exportData() {
        this.isExporting = true;

        let streams = this.series.filter(s => !!s.streamId && !s.value);
        let downloadToken = new Date().getTime() + '_' + (Math.round(Math.random() * 100000000)).toString();

        let url = this.service.url + '/export/';

        // Create invisible iframe which will navigate to request url.
        // Content-Type will be application/octet-stream, which will cause
        // the browser to download instead of displaying it.
        let element = document.createElement('iframe');
        element.style.visibility = 'hidden';
        document.body.appendChild(element);
        element.src = url;

        // Detecting the beginning of a download is absolutely not straight
        // Tried a couple of things, but all event listeners fire when the iframe is created.
        // Ended up with this approach:
        // https://stackoverflow.com/questions/1106377/detect-when-browser-receives-file-download
        let interval = Observable.interval(500);
        let subscription = interval.subscribe((value: number) => {
            if (Cookie.Get('download_token') == downloadToken) {
                Cookie.Expire('download_token');
                this.isExporting = false;
                this.exportModal.close();
                subscription.unsubscribe();
            }
        }, (error: any) => {
            this.service.HandleUiError(error);
            this.isExporting = false;

        });
    }

However, when file is big it sometimes takes long time to create that in the backend, and I get 504 Gateway Time-out error, but it is not caught in

                this.service.HandleUiError(error);
                this.isExporting = false; });

does anyone know why this could happen and how to fix it?

@SoumenMukherjee no, actually I didn't try that. Can it be added only to this specific function or should it be added in providers in app.module? — user122222, Nov 16 '19 at 22:10

score 0 · Answer 1 · answered Nov 16 '19 at 22:10

0

If your running it on a server you can change your timeout parameters to be much longer. If you're using Nginx check out you sites-enabled and sites-avaible files and look for time out paramters. On local host you can increase timeout duration on your sever.js file. I had a similar problem with running long subprocesses on a request and poking around nginx files on ubuntu /etc/Nginx (i think) and thdn finding where it mandated timeout for requests and increasing it fixed my problem.

answered Nov 16 '19 at 22:10

booth

1
1

yes, but it still would be nice to have error message in UI if that ever happens than having endless spinner – user122222 Nov 16 '19 at 22:12
you can still do that.... this will just fix his problem. You won't need an error message if it works evertime – booth Nov 16 '19 at 22:16

Detect when HTTP error is trigerred in angular when request takes too long

1 Answers1