GrowthBook

Utilizing feature flags is a great way to experiment and rollout features to users and reduce the risk should things go wrong. As a developer you want to know the exact configuration when an issue appears and using features flags in your code can complicate this as different users may have different flags enabled or disabled.

Using this integration with Rollbar and GrowthBook you can easily identify the exact configuration and feature flags delivered to the user (client or server application) at the time of the error.

Configuration

You can find GrowthBook SDK integration documents here to setup GrowthBook with your project: https://docs.growthbook.io/lib/

In this example we have a feature in GrowthBook that is created to control certain features in our project.

The GrowthBook features can have variations served depending on the user. This will modify the page (DOM) and should an error occur the flags served will be very important to understand the exact experience the end user had during this interaction.

Here is an example configuring GrowthBook in conjunction with Rollbar in a React project, where we want to log all the GrowthBook features active in this session to a custom 'growthBookSettings' field to enrich our experience:

import { Provider, useRollbar } from '@rollbar/react
import { GrowthBook, GrowthBookProvider, useFeatureIsOn  } from "@growthbook/growthbook-react";
...
const gb = new GrowthBook({
  apiHost: "https://cdn.growthbook.io",
  clientKey: "growthbook_client_key",
  enableDevMode: true
});
gb.init({
  // Optional, enable streaming updates
  streaming: true
})

function MyComponent() {
  const rollbarConfig = {
    accessToken: 'YOUR_ROLLBAR_CLIENT_ACCESS_TOKEN',
    captureUncaught: true,
    captureUnhandledRejections: true,
    environment: 'production',
    payload: {
      growthBookSettings: {
        variables: gb.getDecryptedPayload().features // this will send all GrowthBook features in the error payload to Rollbar
      }
    }
  }
  
  return (
    <Provider config={rollbarConfig} >
      <GrowthBookProvider growthbook={gb}>
        <TestError />
      </GrowthBookProvider>
    </Provider>
}

export default function App() {
  return (
    <>
      <div>
        <Router>
          <Routes>
              <Route path="/" element={<MyComponent />} />
          </Routes>
        </Router>
      </div>
    </>
  )
}  

Feature-related Errors

Suppose you want to test out a new feature in your application, and catch any errors related to the new feature.

You can set your code to send the GrowthBook feature information to Rollbar within a certain scope/only under certain conditions:

const rollbar = useRollbar();
// here, we are using a variable for our GrowthBook feature 'upload_enable'
const feature = 'upload_enable'
const uploadEnableValue = useFeatureIsOn(feature)

try {
  if (uploadEnableValue) {
    testNewBehavior()
  } else {
    oldBehavior()
  }
} catch(error) {
  if (uploadEnableValue) {
    // here we added a growthBookFeature custom field with name subfield
    rollbar.error(error, { growthBookFeature: { 
      name: feature
    }})
  }
}

Having a GrowthBook feature name in the custom payload to Rollbar will allow you to create a Rollbar service link that takes you directly to the related feature page.

Service Links

📘

How to create service links for GrowthBook click here

You can reference the GrowthBook documentation for additional details and features, and incorporate more information from GrowthBook with your Rollbar integration.