Serialized error when call in serverSide the getVariant()

[davi-monteiro]

Describe the bug

When call get Variants in serverSide, the response return undefined payload in type IVariant.

Steps to reproduce the bug

1. call getVariant() in server side
2. in time of execution the nextJs, write a error in console.

Expected behavior

When attr payload not exists in response of getVariants, the default is null.

I create a serialization to run without errors.

const serializePayload = (variant: IVariant) => {
  return {
    ...variant,
    payload: variant.payload ?? null,
  };
};

Logs, error output, etc.

⨯ Error: Error serializing `.responseVariant.payload` returned from `getServerSideProps` in "/page/[[...params]]".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.
    at Array.every (<anonymous>)
    at Array.every (<anonymous>)
    at Array.every (<anonymous>)

Screenshots

Our implementation, with serialized solution:

Error in terminal

Additional context

No response

Unleash version

1.4.4 but in new version not found.

Subscription type

None

Hosting type

None

SDK information (language and version)

@unleash/nextjs/client:1.4.4

[Tymek]

Unfortunately I couldn't reproduce it. As you're importing from @/infra/featureFlag black box, not from @unleash/nextjs. Please provide a reproducible example. Our SDK examples repository is a good start. This exercise can also help isolate potential problems in your system. Test code I used:

import { GetServerSidePropsContext } from "next";
import {
  flagsClient,
  getDefinitions,
  evaluateFlags,
  IVariant,
} from "@unleash/nextjs";

const serializePayload = (variant: IVariant) => {
  return {
    ...variant,
    payload: variant.payload ?? null,
  };
};

export const unleashServerSide = async (
  context: GetServerSidePropsContext | any,
  featureName: string,
  isVariant?: boolean
) => {
  const definitions = await getDefinitions({
    fetchOptions: { next: { revalidate: 30 } },
  });

  const { toggles } = evaluateFlags(definitions, { ...context });
  const flags = flagsClient(toggles);
  console.log("x", serializePayload(flags.getVariant(featureName)));

  return isVariant
    ? serializePayload(flags.getVariant(featureName))
    : flags.isEnabled(featureName);
};

export default async function Page() {
  return (
    <>
      TEST
      <br />
      <pre>
        {JSON.stringify(
          await unleashServerSide({}, "your-test-flag", true),
          null,
          2
        )}
      </pre>
    </>
  );
}

Unleash customers can contact support and get help from subject matter experts in debugging custom setups and proprietary code. If that's you, please use this option.

Closing for now. I'll reopen this if any issue is confirmed.

[davi-monteiro]

To reproduce, remove the serializePayload I put in, as it is the solution we found.

import { GetServerSidePropsContext } from "next";
import {
  flagsClient,
  getDefinitions,
  evaluateFlags,
  IVariant,
} from "@unleash/nextjs";

export const unleashServerSide = async (
  context: GetServerSidePropsContext | any,
  featureName: string,
  isVariant?: boolean
) => {
  const definitions = await getDefinitions({
    fetchOptions: { next: { revalidate: 30 } },
  });

  const { toggles } = evaluateFlags(definitions, { ...context });
  const flags = flagsClient(toggles);
  console.log("x", flags.getVariant(featureName));

  return isVariant
    ? flags.getVariant(featureName)
    : flags.isEnabled(featureName);
};

export default async function Page() {
  return (
    <>
      TEST
      <br />
      <pre>
        {JSON.stringify(
          await unleashServerSide({}, "your-test-flag", true),
          null,
          2
        )}
      </pre>
    </>
  );
}