getPersistedSnapshot should have null fields instead of undefined?

[rmgryan]

getPersistedSnapshot() serves the purpose of serializing data to restore state (for example, across network requests - see blog reference here: https://stately.ai/blog/2023-10-02-persisting-state#persisting-and-restoring-state). However, the resulting object returned by the function sets output and error properties to undefined by default.

This causes issues in cases where you might try to persist state from getServerSideProps to the client side in Next.js page router, for example, with errors like:

Error: Error serializing .machine.snapshot.output returned from getServerSideProps in "/page/[slug]"
Reason: undefined cannot be serialized as JSON. Please use null or omit this value.

I imagine there are other use cases where trying to serialize undefined can cause issues. I suggest the output and error properties are instead initialized to null for compatibility with serialization.

[Andarist]

This would be a breaking change at this point. This value can be post-processed to remove/convert what affects you. JSON is just one of the serialization formats that can be used (a very popular one though).

I'm not saying that we won't change this but there are some extra things to consider here.

[rmgryan]

No problem, thanks for the quick response! Just wanted to get this potential issue on your radar.

[rmgryan]

For anyone who might run into similar issue, workaround is straightforward and simple:

const persistedSnapshot = actor.getPersistedSnapshot();
if (typeof persistedSnapshot.error === 'undefined') {
  persistedSnapshot.error = null;
}
if (typeof persistedSnapshot.output === 'undefined') {
  persistedSnapshot.output = null;
}

[davidkpiano]

A simpler workaround:

const persistedSnapshot = JSON.parse(JSON.stringify(actor.getPersistedSnapshot());

More info on the issue here: vercel/next.js#11209

It's unfortunate that NextJS doesn't play nicely with undefined but it's something to consider when using any 3rd-party library with NextJS, not just XState. The safest thing to do is to process the data regardless.

[rmgryan]

This will cause issue with Typescript since JSON.parse returns any.

You'll need to use type assertion:

const persistedSnapshot = JSON.parse(
    JSON.stringify(actor.getPersistedSnapshot())
) as SnapshotFrom<typeof machine>;

[felipesabino]

I think a more sane workaround is instead to use a replacer function when calling stringily, ensuring all undefined values are set to null

const snapshot = JSON.stringify(
  actor.getPersistedSnapshot()
  , (_, value) => { if (typeof value === "undefined") { return null } else { return value } }
);

This is not a NextJS issue, this is part of the JS specification, and will happen in other environments as well (more info at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).

It seems this is a miss on the snapshot object creation from Xstate side. Ideally, Xstate should return null for the values, instead of undefined, to prevent this from happening. Specially when considering that the main usage (IMO) of the snapshot value is to be serialized and later reused.