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 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

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.

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...');
    }
}

Content Security Policy

If your site uses Content Security Policy (CSP), you need to allow specific domains and rules for the Feedback Widget to work correctly.

Rules

• script-src: The initial Feedback Widget snippet uses an inline <script> tag. To allow it, you must either include unsafe-inline or, more securely, pass a random nonce to authorize it. Then use the nonce on the script tag as follows:

  <script type='text/javascript' nonce="THISISASECRETNONCE">
  // ... ybug script goes here
  </script>

• img-src: The widget uses images or icons served from our domain or as data URIs.
• style-src: Some inline styles are necessary for rendering the widget, so unsafe-inline is required here. Google Fonts also need to be whitelisted.
• connect-src: Used for API calls the widget makes to our backend and for loading resources.
• font-src: Google Fonts need to be whitelisted.

Example CSP Setup

You can apply the policy using a <meta> tag in your HTML. Just make sure to allow your own domains:

<meta http-equiv="Content-Security-Policy" content="
  script-src https://*.ybug.io 'nonce-THISISASECRETNONCE';
  img-src https://*.ybug.io data:;
  style-src 'unsafe-inline' https://fonts.googleapis.com;
  connect-src https://*.ybug.io https://*.s3.eu-central-1.amazonaws.com;
  font-src https://fonts.googleapis.com https://fonts.gstatic.com;
">

Alternatively, the CSP can be sent as an HTTP response header from your server.

Make sure to replace THISISASECRETNONCE with a secure, dynamic value generated by your server for each request.