Sentry-javascript: Plugin: Take a screenshot when errors occur

Created on 2 Sep 2016  路  8Comments  路  Source: getsentry/sentry-javascript

It might be useful to automatically take a screenshot of the web page when an exception is captured.

This was inspired by https://twitter.com/luthyr/status/771734588335022081, a game developer sending screenshots to Trello when a bug is reported.

http://stackoverflow.com/questions/4912092
http://stackoverflow.com/questions/18231259
https://github.com/niklasvh/html2canvas
http://www.xpertdeveloper.com/2012/10/webpage-screenshot-with-html5-js/

Feature

Most helpful comment

What about leaving the storage up to the implementator? Just ask the dev to provide a fonction that receive image data and returns an url. Sentry could then use that URL to display it in the event detail view.

(Of course it could also be implemented entirely as a plugin if sentry allowed to define custom fields with types like image/url, is there a feature request somewhere for this?)

All 8 comments

Unfortunately, this feature is very "data heavy" in both ways. SDK size and events payload. I don't think we're going to implement this anytime soon, but I'll leave this marked as a "Feature" so we can come back to this one day.

It turns out there's quite a few companies that provide screen recording as a service. We're currently using https://logrocket.com in addition to Sentry.

They even have integrations with Sentry :)

What about leaving the storage up to the implementator? Just ask the dev to provide a fonction that receive image data and returns an url. Sentry could then use that URL to display it in the event detail view.

(Of course it could also be implemented entirely as a plugin if sentry allowed to define custom fields with types like image/url, is there a feature request somewhere for this?)

@guillaume86 event processors and beforeSend methods are async. You can already do this :)

Sentry.configureScope(scope => {
  scope.addEventProcessor(async (event, hint) => {
    const screenshot = await makeScreenshot();
    const screenshotUrl = await uploadScreenshot(screenshot);

    return {
      ...event,
      extra: {
        ...event.extra,
        screenshot: screenshotUrl
      }
    }
  });
});

Or you can use beforeSend, or write a custom integration. It's up to you. https://docs.sentry.io/platforms/javascript/

Yes I mean a special field with integration into the sentry UI (show a thumbnail + open on click).

@guillaume86 you'd have to ask here for this https://github.com/getsentry/sentry :)

Is there a KB article or resource illustrating how to implement screenshot functionality?

Was this page helpful?
0 / 5 - 0 ratings