Troubleshooting

Canvas support

Ybug's rendering engine supports canvases in its screenshots, but not every canvas can be rendered.

Tainted canvas

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

WebGL

To allow capture of your WebGL app, set preserveDrawingBuffer to true when creating your WebGL context:

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

You may also 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 console log, the error originates from a JavaScript file on a different origin (domain, scheme, or port). This is also known as a CORS error.

To fix CORS errors, 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 will be able to capture errors that happen in your script even if it's hosted on a different domain.

If you can't set the CORS attributes or headers, you can alternatively use Ybug's Custom error logging JavaScript API to log 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...');
    }
}

Content Security Policy

If your site uses a Content Security Policy, see the Content Security Policy guide for the rules and an example setup.