26

For example in javascript

var image = new Image();
image.onerror = function(e) {
    // handle error my way
}
image.src = "http://bad.location.com/img.jp"

I've tried

e.preventDefault()
return false

but the error is still logged to the console. Maybe this is not such a bad thing but what I'm doing is uploading files to the server and then processing them and loading the artifacts to S3. This all takes a long time. I do this in the background and return the S3 URL's to the browser early and use some javascript to ping the image urls using the image.onerror callback to detect if the image is arrived on S3 or not.

It all works but I get a load of console errors. This is a bit ugly. Is there any way to hide this.

bradgonesurfing
  • 30,949
  • 17
  • 114
  • 217

2 Answers2

15

Sorry there is seemingly no way to suppress that error, at least in Google Chrome.

See also: Check if file exists but prevent 404 error in console from showing up

Community
  • 1
  • 1
Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
1

Thought to share what I just discovered. :) Googling around didn't help, so I've spent quite some time and seems like it worth it! There is indeed one solution (if you control the backend too)

For example in nodejs: 

 /*
 * Custom 404 middleware to handle missing image for certain routes
 */

const path = require ( 'path' );
const fs = require ( 'fs-extra' );

// @root - root folder
// @exclude - exclude folder
module.exports = ( root, exclude ) => ( req, res, next ) => {

    if ( req.originalUrl.match ( exclude ) ) {
        fs.stat ( path.join ( root, req.originalUrl ), function ( err, stat ) {

            if ( err === null ) {

                // if file exist call next = fallback to static handler
                next ();

            } else {

                // if file does not exist, return a fake 200 img response
                res.writeHead ( 200, {
                    'Content-Type'  : 'image/png',
                    'Content-Length': 0,
                    'Cache-Control' : 'public, max-age=0',
                    'X-Status'      : '404'
                } );

                return res.end ();
            }
        } );
    } else {
        next ();
    }

};

Then you can call it like: 

let static_path = path.join ( __dirname, 'public' );
app.use ( require ( './middleware/missing-image' ) ( static_path, 'img/path' ) );
app.use ( express.static ( static_path ) );

X-Status is just a custom header added so you can detect in client side JS that the response been overwritten.

Note: res.end() can be used to stream back a fallback image too.

ShQ
  • 756
  • 7
  • 10
  • 1
    This is such a bad hack.. on so many levels.. id rather deal with the console error than magic responses.. its so much easier to just return 200 or 201 with no content instead (if you control the backend) – Piotr Kula Apr 27 '22 at 20:01
  • > id rather deal with the console error than magic responses - Sure, if you don't like it, please don't use it. The question was: "Is there any way to hide this?" And the answer is yes, there is. If the question was: "Is there a proper way to hide this?" Then the answer is most likely no as Simon pointed. – ShQ May 02 '22 at 07:06