Fullstory in a managed Expo app using the power of Expo’s development builds

Do you have a managed Expo app and want to integrate Fullstory but think you need to eject?

Think again.

My colleague (Nick Gordon) and I initially thought Fullstory was not supported for a managed Expo app (it’s okay, Fullstory thought so too) but we, being the determined folks we are, tried it anyway. Turns out, Expo’s development builds makes this possible.

You can migrate to using development builds. Development builds in Expo allow you to use 3rd party libraries that use custom native code without having to eject your app.

Check out there guide: Getting Started guide for development builds

Once you have your app up and running using development builds, you are ready to add the power of Fullstory. (And many other 3rd party libraries).

1. Use the expo-cli to install the correct (if known) version:

npx expo install @fullstory/react-native

2. Add the Fullstory plugin to your babel.config.js file:

module.exports = {
  ...
  plugins: [
    ...
    '@fullstory/react-native', ['@fullstory/annotate-react', { native: true }],
  ]
};

3. Add the Fullstory plugin to your your app.json or app.config.json or your dynamic config file app.config.js:

*Note -> You need to add your organization’s id and check Fullstory’s release note’s page to find the latest stable version and use that as the version.

You can find your org id in your browser when you are logged into Fullstory. https://app.fullstory.com/ui/<ORG_ID>/home

{
 "expo": {
   "plugins": [
     [
       "@fullstory/react-native",
       {
         "version": "<THE PLUGIN VERSION>",
         "org": "<YOUR ORG ID HERE>"
       }
     ]
   ]
 }
}

4. Create a new development build for your app with these changes.

5. Install the new development build on your device or emulator/simulator and you should be able to see your sessions captured in Fullstory. Check under mobile segments and specifically mobile applications. And it really is that easy.

*Note -> By default, all text will be masked. So don’t be alarmed if your app at first looks like a redacted document. Check Fullstory’s documentation to get more details about privacy levels and how you can manage using the following attributes.

fsAttribute
fsClass
fsTagName

Troubleshooting:

A way to check yourself is to see what the sessionURL is showing. Check the sessionURL:

FullStory.getCurrentSessionURL().then(function(result) {
  const sessionUrl = result;
});

If this is showing a URL, then you are creating a session in Fullstory and good to go. Just need to track down the session in Fullstory.

If this is showing as null, then check your settings in Fullstory to ensure mobile capturing is turned on.

If this is undefined, then something isn’t configured correctly. Check the above steps again.

Now bask in the relief that your Expo app is safe of any eject threats and you can continue integrating the libraries you want.