FAQ
Answers to common questions about @screeb/sdk-react.
Can I use Screeb without identifying users?
Yes. Screeb assigns an anonymous ID automatically when you initialize the SDK. You don't need to call screeb.identity() if you want to track anonymous users. Anonymous users count toward your Monthly Tracked Users (MTU).
How do I prevent Screeb from loading in test/CI environments?
Use the shouldLoad prop on ScreebProvider to conditionally initialize Screeb:
<ScreebProvider
websiteId="YOUR_WEBSITE_ID"
shouldLoad={process.env.NODE_ENV === 'production'}
>
<App />
</ScreebProvider>
This prevents Screeb from loading in development, testing, or CI environments.
Can I call init() multiple times?
No. ScreebProvider initializes Screeb once when it mounts. Mounting multiple ScreebProvider instances or remounting it may cause unexpected behavior. If you need to switch users, use screeb.identityReset() followed by screeb.identity() from the useScreeb() hook.
How do I switch to a different user (e.g., after login)?
Use the useScreeb() hook to call identityReset() first, then identity() with the new user ID:
const { screeb } = useScreeb();
const handleLogin = (userId: string) => {
screeb.identityReset();
screeb.identity(userId, {
email: 'support@screeb.app',
// other properties
});
};
Where do I find my Channel ID (Website ID)?
Your Channel ID (also called Website ID) is available in the Screeb admin console under Settings > Install. It looks like a UUID: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.
Why is my survey not showing?
Common reasons a survey might not appear:
- Targeting rules: Check the survey targeting rules in the admin console
- User identification: Ensure the user is identified before the survey trigger fires
- shouldLoad is false: Check that
shouldLoadis not set tofalseonScreebProvider - Provider missing: Ensure
ScreebProvideris an ancestor of components usinguseScreeb()
See the Troubleshooting page for more detailed debugging steps.
Do I need to wrap my whole app in ScreebProvider?
Yes. ScreebProvider must be an ancestor of any component using the useScreeb() hook. Typically, you place ScreebProvider at the top level in App.tsx or index.tsx:
// index.tsx or App.tsx
<ScreebProvider websiteId="YOUR_WEBSITE_ID">
<App />
</ScreebProvider>
If you only need Screeb in certain routes, you can place ScreebProvider around those specific route components instead.
Can I use Screeb with React Server Components?
No. Screeb is a client-side SDK that requires browser APIs. In Next.js App Router, you must mark components using useScreeb() with the "use client" directive:
'use client';
import { useScreeb } from '@screeb/sdk-react';
export default function MyComponent() {
const { screeb } = useScreeb();
// ...
}
Place ScreebProvider in a client component at the root of your app (e.g., layout.tsx with "use client").
Can I access the Screeb instance outside of React components?
Yes. The useScreeb() hook returns the underlying Screeb instance. If you need to call Screeb methods outside of a React component (e.g., in a utility function), pass the screeb instance as a parameter:
// In your component
const { screeb } = useScreeb();
// Pass it to a utility
myUtilityFunction(screeb);
// In your utility file
function myUtilityFunction(screeb: ScreebType) {
screeb.trackEvent('custom_event', { foo: 'bar' });
}
Alternatively, you can use @screeb/sdk-browser directly for non-React code.
Does useScreeb() cause re-renders?
No. The useScreeb() hook returns a stable reference to the Screeb instance. It does not trigger re-renders when Screeb state changes. You can safely use screeb in useEffect without adding it to the dependency array (ESLint will not complain because the reference is stable).
Can I use multiple ScreebProvider instances for different website IDs?
No. Screeb is designed to use one website ID per app. If you need to track multiple websites or environments, use separate deployments or configure the website ID dynamically based on environment variables.