Skip to content

Circular structure of SDK client breaks next.js SRR #16

Open
@FilipStenbeck

Description

@FilipStenbeck

We get a SDK client on the server by running createInstance({...})

Next.js serialize all objects to json when sending them to the client.
We then get

Error: Circular structure in "getInitialProps" result of page "/_error". https://err.sh/zeit/next.js/circular-structure

The reason is that the SDKClient has a circular structure whitch is not supported in JSON

TypeError: Converting circular structure to JSON

Creating on client at the server side and the create it again in the client browser leads to a flickering behavior, since we recreate the SDK client and the turned on feature temporary goes away until we load data in the newly created client

It would be great if you could you change your SDK client to not use circular structure, so it can be serialized.

Our created SDK client looks like this

OptimizelyReactSDKClient {
  user: { id: null, attributes: {} },
  isUserPromiseResolved: false,
  onUserUpdateHandlers: [],
  initialConfig: { sdkKey: 'DNNv456Qy6tj6TuosxyyvE' },
  userPromiseResovler: [Function],
  _client:
   Optimizely {
     clientEngine: 'react-sdk',
     clientVersion: '1.0.1',
     errorHandler: NoopErrorHandler {},
     eventDispatcher: { dispatchEvent: [Function: dispatchEvent] },
     __isOptimizelyConfigValid: true,
     logger: OptimizelyLogger { messagePrefix: '' },
     projectConfigManager:
      ProjectConfigManager {
        __updateListeners: [Array],
        jsonSchemaValidator: [Object],
        skipJSONValidation: false,
        __configObj: null,
        datafileManager: [NodeDatafileManager],
        __readyPromise: [Promise] },
     __disposeOnUpdate: [Function: bound ],
     __readyPromise: Promise { <pending> },
     decisionService:
      DecisionService {
        audienceEvaluator: [AudienceEvaluator],
        forcedVariationMap: {},
        logger: [OptimizelyLogger],
        userProfileService: null },
     notificationCenter:
      NotificationCenter {
        logger: [OptimizelyLogger],
        errorHandler: NoopErrorHandler {},
        __notificationListeners: [Object],
        __listenerId: 1 },
     eventProcessor:
      LogTierV1EventProcessor {
        dispatcher: [Object],
        queue: [DefaultEventQueue],
        notificationCenter: [NotificationCenter] },
     __readyTimeouts: { '0': [Object] },
     __nextReadyTimeoutId: 1 },
  userPromise: Promise { <pending> },
  dataReadyPromise: Promise { <pending> } }

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions