OVERVIEW HOW IT WORKS

 

Overview

Session replay has become a powerful debugging tool. That's why FullStory and Bugsnag have teamed up to make tracking down and fixing bugs easier than ever. Through FullStory session replay, we provide you with all the relevant details you need to quickly diagnose problems, getting you quickly back to building products people love. If you find a bug and the fix is obvious, consider yourself lucky. More often, bugs are subtle and require a time-consuming investigation through byzantine layers of code. Simply reproducing the issue is often the most challenging step, involving multiple back and forth communications with the customer through a support agent, triangulation through logs, and a best-guess diagnosis cycle of reading code, manual setup, and insertion of debugging code. Yuck! Bugsnag detects exceptions in every major programming language and framework and displays them in an easy to use dashboard. This eliminates the effort of digging through server logs, with the additional support of providing contextual information on your bugs.

 

 

 

How it Works

The FullStory integration lets you watch your users interact with your application, letting you see the exact actions they took before encountering a bug. You’ll get useful information about their browser version, User Agent info, operating system, and location. More importantly, FullStory allows you to see the particular DOM events that occurred with the browser console messages and user actions in sync, all in high fidelity playback. Virtually all the cumbersome back and forth between engineering, support, and your customer is eliminated: the answers you need are provided by FullStory and Bugsnag.

 

 

Instructions

The FullStory integration with Bugsnag lets you see the FullStory session associated with the JavaScript exception. If you haven't already, sign up for Bugsnag. After you setup your Bugsnag account, make sure the Bugsnag script is installed.


1. Login to FullStory


2. Navigate to Settings > Integrations & API Keys


3. Toggle on Bugsnag under Available Integrations


Now, when you open a Javascript exception in Bugsnag, you'll see a FullStory tab containing a clickable play-back link to the session in which the Javascript exception occurred.


If you would like to be linked directly to the exact moment in the session that the Javascript exception occurred, you can modify your Bugsnag implementation code. Here's some sample code, that was passed along to us by one of our users, to help you get started (thanks, Cameron!). If you're using version 3 of the Bugsnag API, add the following code after you set up the Bugsnag script.


// capture fullstory url at current time	
// make sure fullstory has started recording (the getCurrentSessionURL method exists)	
bugsnag.beforeNotify = (payload, metaData) => {	
    // our existing beforeNotify block...
    if (window.FS && window.FS.getCurrentSessionURL) {	
        if (!metaData.fullstory) {	
            Object.assign(metaData, { fullstory: {} });	
        }	
        Object.assign(metaData.fullstory, { urlAtTime: window.FS.getCurrentSessionURL(true) });	
    }	
}


If you're using version 4 of the Bugsnag API, use the following code to create the Bugsnag client.


window.bugsnagClient = bugsnag({
    apiKey: 'API KEY',
    beforeSend: function (report) {
        // Make sure FullStory object exists.
        if (window.FS && window.FS.getCurrentSessionURL) {
            report.updateMetaData('fullstory', {'urlAtTime': window.FS.getCurrentSessionURL(true)});
       }
    }
});


 

 

Built by: FullStory

Setup: Turnkey 

Support: support@fullstory.com 

Version: 1.0 

Contact