Troubleshooting

Debug SDK state

Print the current state of the Screeb SDK to the console:

import { useScreeb } from "@screeb/sdk-react";

const DebugComponent = () => {
  const { debug } = useScreeb();

  const printDebugInfo = async () => {
    await debug();
    // ******************* SCREEB SESSION DEBUG *********************
    // Screeb channel id: <UUID>
    // Screeb channel type: widget
    // Screeb respondent id: <UUID>
    // Screeb survey id: none
    // Screeb response id: none
    //
    // Screeb current session start: Thu May 04 2023 16:53:49 GMT+0200 (Central European Summer Time)
    // Screeb current session last activity: Thu May 04 2023 17:41:30 GMT+0200 (Central European Summer Time)
    //
    // Screeb targeting engine status: disabled
    // Screeb targeting engine: 3 surveys
    //
    // Detected platform: desktop
    // Detected locale: en-GB
    // Detected timezone: -120
    // **************************************************************
  };

  return <button onClick={printDebugInfo}>Debug Screeb</button>;
};

Debug targeting conditions

Print the current state of the targeting engine and see which conditions are passing or failing:

import { useScreeb } from "@screeb/sdk-react";

const DebugComponent = () => {
  const { targetingDebug } = useScreeb();

  const printTargetingDebug = async () => {
    const result = await targetingDebug();
    console.log(result);
    // ************ SCREEB TARGETING RULES DEBUG **************
    // Disabled surveys are not listed here.
    //
    // Screeb channel id: <UUID>
    // Screeb respondent id: <UUID>
    //
    // Survey <UUID>:
    // https://admin.screeb.app/org/last/survey/<UUID>/share
    //
    //   - Rule of type "Device type (desktop/mobile/tablet)": true 🟢
    //   - Rule of type "Multiple display": true 🟢
    //   - Rule of type "Capping per time between survey display on current respondent": true 🟢
    //   - Rule of type "User event count": false 🔴
    //   - Rule of type "Capping per respondent display count": false 🔴
    // ********************************************************
  };

  return <button onClick={printTargetingDebug}>Debug Targeting</button>;
};

Force targeting check

Manually trigger a targeting check to see if any surveys should be displayed:

import { useScreeb } from "@screeb/sdk-react";

const DebugComponent = () => {
  const { targetingCheck } = useScreeb();

  const runTargetingCheck = async () => {
    await targetingCheck();
  };

  return <button onClick={runTargetingCheck}>Check Targeting</button>;
};

Common issues

Provider not wrapping component

Make sure your component is inside the ScreebProvider:

// ❌ Wrong
const App = () => {
  const { eventTrack } = useScreeb(); // Error: useScreeb must be used within ScreebProvider
  return <YourApp />;
};

// ✅ Correct
const App = () => (
  <ScreebProvider autoInit websiteId="<YOUR-CHANNEL-ID>">
    <YourApp />
  </ScreebProvider>
);

const YourApp = () => {
  const { eventTrack } = useScreeb(); // Works!
  return <div>...</div>;
};

SDK not initialized

If you're not using autoInit, make sure to call init before using SDK methods:

import { useScreeb } from "@screeb/sdk-react";

const App = () => {
  const { init } = useScreeb();

  React.useEffect(() => {
    init("<YOUR-CHANNEL-ID>", "<USER-ID>", { plan: "premium" });
  }, []);

  return <YourApp />;
};

CI environments creating anonymous users

Deactivate Screeb in CI environments to avoid creating anonymous users:

const App = () => (
  <ScreebProvider
    autoInit
    shouldLoad={process.env.NODE_ENV !== 'test'}
    websiteId="<YOUR-CHANNEL-ID>"
  >
    <YourApp />
  </ScreebProvider>
);