Troubleshooting

Screenshot issues/Protected sites

To render screenshots correctly, Ybug's rendering server needs access to your site's static assets (fonts, stylesheets and images). If your site or static assets are protected and require authentication, you may need to grant access to the Ybug servers.

HTTP Basic Authentication

If your site uses HTTP Basic Authentication, you can pass your credentials in the ybug_settings object (it is recommended to create special credentials just for Ybug):

window.ybug_settings = {
    id:'XXXXXXXXX', 
    auth: { 
        type: 'basic',
        username: 'user',
        password: 'pwd',
    }
};

  We store these credentials encrypted and delete them as soon as your screenshot is rendered.

Localhost

Ybug can render screenshots of sites hosted locally, however there may be some issues with missing images/fonts etc. Our rendering engine must have access to your site's static resources (fonts + css + images) to render site screenshots properly.

You may also try our browser extensions, which take pixel perfect screenshots even on localhost. Or expose your local web server via a localhost tunneling service like PageKite or Ngrok.

Canvas support

Ybug's rendering engine supports canvases in its screenshots. However not every canvas gets rendered.

Tainted canvas

If you draw cross-origin image onto your canvas, it gets tainted and browser will not allow Ybug to capture this cross-origin content. More details on tainted canvas.

WebGL

In order to allow capture of your WebGL app, please set preserveDrawingBuffer to true when creating your WebGL context.

const gl = canvas.getContext('webgl', {
  preserveDrawingBuffer: true
});

You may try our browser extensions, which take pixel perfect screenshots with tainted and WebGL canvases.

Console log - "Script error."

If you see "Script error." in your Ybug's console log, it means that the error originates from a Javascript file from a different origin (domain, scheme, or port). This is also known as a CORS error.

In order to fix the CORS errors, you need to do two things:

1. Add a crossorigin script attribute to tell the browser it is safe to load the script with CORS enabled:

<script src="//different-domain.com/script.js" crossorigin></script>

2. Configure your web server to send the CORS header:

Access-Control-Allow-Origin: *

After applying these changes, Ybug should be able to capture errors that happen in your script even it is hosted on a different domain.

If it is not possible for you to set the CORS attributes or headers, you can alternatively use our Custom error logging Javascript API to log any errors from your script:

try {
    // Some JS code ...
} catch (err) {
    if (Ybug) {// Make sure Ybug is loaded
        Ybug.log('error', err);

        // You can also log a message
        Ybug.log('log', 'An error happened...');
    }
}