diff --git a/docs/integrations/index.mdx b/docs/integrations/index.mdx
index 18bc1703..eaff4bc0 100644
--- a/docs/integrations/index.mdx
+++ b/docs/integrations/index.mdx
@@ -191,5 +191,14 @@ DevCycle APIs, as well as third party integrations to connect DevCycle to the to
'Send DevCycle Feature/Variation data from Tag Manager to Google Analytics 4 for A/B test analysis',
icon: 'simple-icons:googleanalytics',
},
+ {
+ type: 'link',
+ href: '/integrations/rollbar',
+ label: 'Rollbar',
+ description:
+ 'Enhance error logging with DevCycle Feature and Variable data',
+ icon: '',
+ customIconPath: '/integrations/rollbar-icon.svg'
+ }
]}
/>
diff --git a/docs/integrations/rollbar.md b/docs/integrations/rollbar.md
new file mode 100644
index 00000000..e990a1c0
--- /dev/null
+++ b/docs/integrations/rollbar.md
@@ -0,0 +1,124 @@
+---
+title: Rollbar
+
+---
+
+Rollbar is a tool used for error logging and real-time performance tracking for your applications. Rollbar provides you with the ability to capture detailed information on errors to help diagnose and resolve issues faster. Enrich your logs further by including DevCycle Feature data into your error logging.
+
+The DevCycle Rollbar integration enhances error tracking by adding feature configuration data directly to your Rollbar error logs. By sending DevCycle Feature and Variable data from the DevCycle SDKs to Rollbar, developers can gain valuable insights into the specific feature configuration that was delivered to a user during an error.
+
+## Configuration
+
+### Including DevCycle Features in your Rollbar Config
+
+Include DevCycle Feature data to the initialization of Rollbar to allow all Rollbar errors to be populated with the specific DevCycle feature configuration at that time of the error. The exact DevCycle data and format that you pass to Rollbar can be easily configured, so feel free to experiment with the data that's available on your SDK.
+
+In our example below, we supply all Features and Variables that the user/device received to the Rollbar config.
+
+**Steps**:
+1. Get all Features and/or all Variables from the DevCycle SDK.
+2. Create a custom field called `devCycleSettings` within your Rollbar config payload.
+3. Add your Features and Variables to the `devCycleSettings` object.
+
+```jsx
+import { Provider, useRollbar } from '@rollbar/react
+import {
+ useDevCycleClient, useIsDevCycleInitialized, useVariableValue, withDevCycleProvider
+} from '@devcycle/react-client-sdk'
+...
+function MyComponent() {
+ const devCycleClient = useDevCycleClient()
+ const devCycleFeatures = devCycleClient.allFeatures()
+ const devCycleVariables = devCycleClient.allVariables()
+ const rollbarConfig = {
+ accessToken: 'YOUR_ROLLBAR_CLIENT_ACCESS_TOKEN',
+ captureUncaught: true,
+ captureUnhandledRejections: true,
+ environment: 'production',
+ payload: {
+ custom: {
+ devCycleSettings: {
+ features: devCycleFeatures, // this will send all DevCycle features in the error payload to Rollbar
+ variables: devCycleVariables // this will send all DevCycle variables in the error payload to Rollbar
+ }
+ }
+ }
+ }
+
+ return (
+
+
+
+}
+
+function App() {
+ const devcycleReady = useIsDevCycleInitialized()
+
+ if (!devcycleReady) return
DevCycle is not ready! Loading State...
+
+ return (
+ <>
+
+
+
+ } />
+
+
+
+
+ )
+}
+
+export default withDevCycleProvider({
+ sdkKey: 'YOUR_DEVCYCLE_SDK_KEY',
+ user: { user_id: 'USER_ID', isAnonymous: false }
+})(App)
+
+```
+
+---
+
+### Including DevCycle Features on Specific Errors
+
+Rollbar allows you to define extra properties for an error. Instead of providing all Feature data on initialization, you may want to supply DevCycle Feature data to specific errors of you choice.
+
+In our example below, we're using DevCycle to determine whether a user should receive a new Feature with new behavior or the existing old behavior. If there is an error running any of those behaviors, we're logging an error to Rollbar and supplying all DevCycle Features to the error as an extra property.
+
+**Steps**:
+1. Get all Features and/or all Variables from the DevCycle SDK.
+2. In your `rollbar.error` properties, add a custom field (ex: `devCycleFeature`) containing your Feature or Variable data.
+
+Example:
+```jsx
+const rollbar = useRollbar();
+const variableValue = useVariableValue('variable_key', false)
+
+try {
+ if (variableValue) {
+ testNewBehavior()
+ } else {
+ oldBehavior()
+ }
+} catch(error) {
+ if (variableValue) {
+ const devcycleClient = useDevCycleClient()
+ const features = devcycleClient.allFeatures()
+
+ rollbar.error(error, { devCycleFeature: {
+ name: 'New Feature',
+ id: features['feature-key']['_id']
+ }})
+ }
+}
+
+```
+
+---
+
+## Service Links
+
+Rollbar service links allow you to create links that connect directly with DevCycle, to provide easy access to Features and Variables from the Rollbar interface.
+
+
+
+To learn how to create service links for DevCycle, visit the Rollbar docs [here](https://docs.rollbar.com/docs/service-links#devcycle).
\ No newline at end of file
diff --git a/docs/integrations/slack.md b/docs/integrations/slack.md
index b2959920..c09a9cc5 100644
--- a/docs/integrations/slack.md
+++ b/docs/integrations/slack.md
@@ -11,7 +11,7 @@ You can use the DevCycle App for Slack to keep track of and monitor feature flag
1. Navigate to the Settings page in the DevCycle Dashboard, click on Integrations in the side navigation bar, and click `View` on the Integration for Slack.
-
+
2. Click on the `Add to Slack` button and connect the DevCycle App for Slack with your workspace.
diff --git a/src/components/CustomDocCard/index.js b/src/components/CustomDocCard/index.js
index 11897838..a81704a3 100644
--- a/src/components/CustomDocCard/index.js
+++ b/src/components/CustomDocCard/index.js
@@ -19,11 +19,12 @@ function CardContainer({ href, children }) {
)
}
-function CardLayout({ href, icon, title, description }) {
+function CardLayout({ href, icon, title, description, customIcon }) {
return (
-
+ {!customIcon ?
+ : }
{title}
@@ -61,6 +62,7 @@ function CardLink({ item }) {
title={item.label}
icon={item?.customProps?.icon ? item.customProps.icon : item.icon}
description={doc?.description ?? item.description}
+ customIcon = {item?.customIconPath ? item.customIconPath : ""}
/>
)
}
diff --git a/static/integrations/rollbar-icon.svg b/static/integrations/rollbar-icon.svg
new file mode 100644
index 00000000..2849e2da
--- /dev/null
+++ b/static/integrations/rollbar-icon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/integrations/rollbar-service-link.png b/static/integrations/rollbar-service-link.png
new file mode 100644
index 00000000..f61592bb
Binary files /dev/null and b/static/integrations/rollbar-service-link.png differ