Fix up error message argument wrapping and Error page styling

[phryneas]

I noticed that someone shared an error link in the form

https://go.apollo.dev/c/err#%7B%22version%22%3A%223.8.0-rc.2%22%2C%22message%22%3A12%2C%22args%22%3A%5B%5D%7D

which leads to this error page:

I could reproduce a code path that didn't serialize the args correctly.

This PR changes a few things:

• For invariant.log etc., error arguments are now serialized correctly in the link to the error page
• The error message is displayed with lineHeight: "normal", whiteSpace: "pre-wrap"
• The "condition" is now hidden if it is empty (but not removed - it still takes up space to prevent layout jumping as good as possible)

The generated link now looks like

https://go.apollo.dev/c/err#%7B%22version%22%3A%223.8.3%22%2C%22message%22%3A12%2C%22args%22%3A%5B%22fields%22%2C%22User%22%2C%22%22%2C%22User.fields%22%2C%22%5B%5Cn%20%20%7B%5Cn%20%20%20%20%5C%22foo%5C%22%3A%20%5C%22bar%5C%22%5Cn%20%20%7D%2C%5Cn%20%20%7B%5Cn%20%20%20%20%5C%22foo%5C%22%3A%20%5C%22baz%5C%22%5Cn%20%20%7D%5Cn%5D%22%2C%22%5B%5Cn%20%20%7B%5Cn%20%20%20%20%5C%22foo%5C%22%3A%20%5C%22bar%5C%22%5Cn%20%20%7D%5Cn%5D%22%5D%7D

And the rendering now looks like this:

This can be reproduced e.g. using this code snippet:

import { InMemoryCache, gql } from "./dist/index.js";

const cache = new InMemoryCache();
const query = gql`
  query {
    me {
      __typename
      id
      fields {
        foo
      }
    }
  }
`;
cache.writeQuery({
  query,
  data: {
    __typename: "Query",
    me: {
      __typename: "User",
      id: "123",
      fields: [
        {
          foo: "bar",
        },
        {
          foo: "baz",
        },
      ],
    },
  },
});

cache.writeQuery({
  query,
  data: {
    me: {
      __typename: "User",
      id: "123",
      fields: [
        {
          foo: "bar",
        },
      ],
    },
  },
});

Checklist:

• If this PR contains changes to the library itself (not necessary for e.g. docs updates), please include a changeset (see CONTRIBUTING.md)
• If this PR is a new feature, please reference an issue where a consensus about the design was reached (not necessary for small changes)
• Make sure all of the significant new logic is covered by tests

[changeset-bot]

🦋 Changeset detected

Latest commit: a16cca9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@apollo/client	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
dist/apollo-client.min.cjs	37.28 KB (-0.01% 🔽)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs"	43.75 KB (+0.01% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs" (production)	42.32 KB (+0.01% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js"	32.52 KB (+0.01% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js" (production)	31.27 KB (+0.01% 🔺)
import { ApolloProvider } from "dist/react/index.js"	1.21 KB (+0.17% 🔺)
import { ApolloProvider } from "dist/react/index.js" (production)	1.2 KB (+0.17% 🔺)
import { useQuery } from "dist/react/index.js"	4.27 KB (+0.05% 🔺)
import { useQuery } from "dist/react/index.js" (production)	4.08 KB (+0.08% 🔺)
import { useLazyQuery } from "dist/react/index.js"	4.58 KB (+0.07% 🔺)
import { useLazyQuery } from "dist/react/index.js" (production)	4.4 KB (+0.07% 🔺)
import { useMutation } from "dist/react/index.js"	2.52 KB (+0.08% 🔺)
import { useMutation } from "dist/react/index.js" (production)	2.51 KB (+0.08% 🔺)
import { useSubscription } from "dist/react/index.js"	2.24 KB (+0.09% 🔺)
import { useSubscription } from "dist/react/index.js" (production)	2.2 KB (+0.14% 🔺)
import { useSuspenseQuery } from "dist/react/index.js"	4.76 KB (+0.09% 🔺)
import { useSuspenseQuery } from "dist/react/index.js" (production)	4.19 KB (+0.07% 🔺)
import { useBackgroundQuery } from "dist/react/index.js"	4.28 KB (+0.05% 🔺)
import { useBackgroundQuery } from "dist/react/index.js" (production)	3.7 KB (+0.06% 🔺)
import { useReadQuery } from "dist/react/index.js"	2.96 KB (+0.07% 🔺)
import { useReadQuery } from "dist/react/index.js" (production)	2.91 KB (+0.07% 🔺)
import { useFragment } from "dist/react/index.js"	2.08 KB (+0.1% 🔺)
import { useFragment } from "dist/react/index.js" (production)	2.03 KB (+0.1% 🔺)

[netlify]

✅ Deploy Preview for apollo-client-docs ready!

Name	Link
🔨 Latest commit	a16cca9
🔍 Latest deploy log	https://app.netlify.com/sites/apollo-client-docs/deploys/64f883f95454a300088e3511
😎 Deploy Preview	https://deploy-preview-11195--apollo-client-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jerelmiller]

Good catch!