new error extraction mechanism #10887

phryneas · 2023-05-17T11:24:22Z

This is just the current WIP status to see what we would generate on publish.

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 · 2023-05-17T11:24:26Z

🦋 Changeset detected

Latest commit: 4f3b270

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	Minor

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

phryneas · 2023-05-17T11:24:51Z

/release:pr

github-actions · 2023-05-17T11:25:31Z

Please add a changeset via npx changeset before attempting a snapshot release.

github-actions · 2023-05-17T11:25:51Z

size-limit report 📦

Path	Size
dist/apollo-client.min.cjs	36.58 KB (+1.15% 🔺)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/main.cjs"	42.98 KB (-6.46% 🔽)
import { ApolloClient, InMemoryCache, HttpLink } from "dist/index.js"	32.46 KB (-5.75% 🔽)
import { ApolloProvider } from "dist/react/index.js"	1.31 KB (+24.61% 🔺)
import { useQuery } from "dist/react/index.js"	4.36 KB (-4.3% 🔽)
import { useLazyQuery } from "dist/react/index.js"	4.67 KB (-4.02% 🔽)
import { useMutation } from "dist/react/index.js"	2.58 KB (-5.25% 🔽)
import { useSubscription } from "dist/react/index.js"	2.34 KB (-7.95% 🔽)
import { useSuspenseQuery_experimental } from "dist/react/index.js"	3.46 KB (-6.98% 🔽)
import { useBackgroundQuery_experimental } from "dist/react/index.js"	2.89 KB (-8.05% 🔽)
import { useReadQuery_experimental } from "dist/react/index.js"	1.65 KB (+31.21% 🔺)
import { useFragment_experimental } from "dist/react/index.js"	2.13 KB (+7.45% 🔺)

src/cache/inmemory/key-extractor.ts

phryneas · 2023-05-17T11:32:16Z

/release:pr

github-actions · 2023-05-17T11:33:47Z

A new release has been made for this PR. You can install it with npm i @apollo/[email protected].

phryneas · 2023-05-17T11:39:20Z

The released invariantErrorCodes.js can be found here:

https://cdn.jsdelivr.net/npm/@apollo/[email protected]/invariantErrorCodes.js

It boils down to:

// This file is meant to help with looking up the source of errors like
// "Invariant Violation: 35" and is automatically generated by the file
// @apollo/client/config/processInvariants.ts for each @apollo/client
// release. The numbers may change from release to release, so please
// consult the @apollo/client/invariantErrorCodes.js file specific to
// your @apollo/client version. This file is not meant to be imported.
globalThis["ApolloErrorCodes_0.0.0-pr-10887-20230517113257"] = {
  "@apollo/client version": "0.0.0-pr-10887-20230517113257",

  1: {
    file: "@apollo/client/cache/inmemory/entityStore.js",
    condition: "typeof dataId === \"string\"",
    message: "store.merge expects a string ID"
  },

  2: {
    file: "@apollo/client/cache/inmemory/key-extractor.js",
    condition: "extracted !== void 0",
    message: "Missing field '%s' while extracting keyFields from %s"
  },

  // ...
}

We can now create a HTML "error reader" file that imports this file from CDN and then accesses the error messages via globalThis["ApolloErrorCodes_${version}"][errorCode].message.

phryneas · 2023-05-17T12:57:41Z

/release:pr

github-actions · 2023-05-17T12:58:57Z

A new release has been made for this PR. You can install it with npm i @apollo/[email protected].

phryneas · 2023-05-17T12:59:58Z

I changed the format of the invariantErrorCodes.js to have a default export - we should be able to use dynamic imports on the browser error side.

I also added a global hook globalThis[Symbol.for('ApolloErrorMessageHandler')] to allow overriding the error formatter - that way we can offer an optional entry point that people can include in their dev builds that directly formats the errors correctly without the external link.

That way, error handling becomes opt-in instead of being opt-out.

phryneas · 2023-05-17T13:37:14Z

Example link showing an error message from the CDN:
ApolloProvider was not passed a client instance. Make sure you pass in your client via the "client" prop.
or
Missing selection set for object of type foo returned for query field bar

The HTML for it is also not very complicated, we should be able to add that anywhere in our docs: https://github.com/phryneas/apollo-error-message-viewer/blob/main/index.html

phryneas · 2023-05-17T14:18:51Z

Testing it out locally...

And after opting in by

import { loadErrorMessages } from "@apollo/client/utilities/errors";
loadErrorMessages();

phryneas · 2023-05-17T14:20:26Z

/release:pr

github-actions · 2023-05-17T14:21:45Z

A new release has been made for this PR. You can install it with npm i @apollo/[email protected].

phryneas · 2023-05-19T16:46:09Z

All error warnings/messages are now extracted and can be loaded by

import { loadErrorMessages, loadDevMessages } from "@apollo/client/dev";
loadErrorMessages();
// and/or
loadDevMessages();

or, more granularly, by a subset of

import { devDebug, devError, devLog, devWarn, errorCodes } from "@apollo/client/invariantErrorCodes";
import { loadErrorMessageHandler } from "@apollo/client/dev";

loadErrorMessageHandler(devDebug, devError, devLog, devWarn, errorCodes);

~~But as all errors are still in one shipped file @apollo/client/invariantErrorCodes.js, at least Next.js doesn't seem to tree-shake that nicely. I'll have to play around with that a bit more.~~

phryneas · 2023-05-22T08:50:19Z

Update: it does treeshake, next.js just doesn't display it nicely on build 🤦

Here are three sizes I got from building a Next.js app (minified, with and without gzip; I have no idea what else is in those bundles, so they are just a comparison to each other, total numbers mean nothing):

250528 bytes, 78909 bytes gzipped: nothing added 
262359 bytes, 82231 bytes gzipped: loadErrorMessages
266499 bytes, 83423 bytes gzipped: loadErrorMessages, loadDevMessages

So in the end, in a "real life app", this change comes down to saving users 16kb (4.5kb gzipped), providing an opt-in solution, not an opt-out one.

Next.js also nicely shakes

import { loadErrorMessages, loadDevMessages } from "@apollo/client/dev";
if (process.env.NODE_ENV !== "production") {
  loadErrorMessages();
  loadDevMessages();
}

out on build, so we could document this approach for users.

phryneas · 2023-05-22T13:33:59Z

src/dev/loadErrorMessageHandler.ts

+  }
+
+  for (const codes of errorCodes) {
+    Object.assign(global[ApolloErrorMessageHandler], codes)  


The only problem I could maybe see would be if someone would use multiple versions of Apollo Client on the same website, and multiple of them would ship their error messages. In that case, those could override each other.

We could solve that by changing ApolloErrorMessageHandler from Symbol.for(...) to just Symbol() to make that unique per version, or by including version in the Symbol.for string - if you think that is necessary.

I like this idea of making sure its different per version. Sounds like a small lift to make it work and would help us avoid (potentially) opened issues about this in the future.

Great - I did that now :)

phryneas · 2023-05-22T13:35:11Z

src/link/core/ApolloLink.ts

-class LinkError extends Error {
-  public link?: ApolloLink;
-  constructor(message?: string, link?: ApolloLink) {
-    super(message);
-    this.link = link;
-  }
-}
-


This class was only created to be logged with invariant.warn - it didn't have any more use beyond that.

phryneas · 2023-05-22T13:48:34Z

src/utilities/globals/invariantWrappers.ts

+ * pretty-stringified objects.  
+ * Excess `optionalParams` will be swallowed.
+ */
+function newInvariantError(message?: string | number, ...optionalParams: unknown[]) {


I had initially sub-classed the original InvariantError here, but that is much more bundle size (as classes are downlevelled), so I opted for a wrapper function instead.

[nit] Could we just call this invariantError? Not sure we need the new qualifier here. I find it to read a bit nicer:

if (somethingFailed) { invariantError('You did it wrong'); }

It made the change from throw new InvariantError to throw newInvariantError pretty easy - and usually, stuff we throw is a class constructor and needs to be newed, so I fear we would at some point instinctivly start calling the invariantError function with the new keyword.

So I'd opt for keeping it like this, but please tell me if you really can't live with it, then I'll change it :)

phryneas · 2023-05-22T13:50:03Z

This part should be ready for review - I will have to adjust the HTML template to the latest changes and then will make PRs against the docs & shortlinks in parallel.

phryneas · 2023-05-22T14:12:09Z

/release:pr

github-actions · 2023-05-22T14:13:27Z

A new release has been made for this PR. You can install it with npm i @apollo/[email protected].

phryneas · 2023-05-22T16:52:36Z

I was just shown this tool and it might actually come in handy when reviewing this PR: https://npmdiff.dev/%40apollo%2Fclient/3.8.0-alpha.15/0.0.0-pr-10887-20230522141246/package/apollo-client.cjs/

jerelmiller

This is incredible work! Really appreciate you taking the time to get this in time for v3.8! Apologies for my annoying style comments 🤣.

config/processInvariants.ts

jerelmiller · 2023-05-25T16:50:59Z

src/dev/loadErrorMessageHandler.ts

+  }
+
+  for (const codes of errorCodes) {
+    Object.assign(global[ApolloErrorMessageHandler], codes)  


I like this idea of making sure its different per version. Sounds like a small lift to make it work and would help us avoid (potentially) opened issues about this in the future.

src/utilities/globals/invariantWrappers.ts

Co-authored-by: Jerel Miller <[email protected]>

jerelmiller

I'm super excited about this. Really appreciate the work you've done here!

…ction

first prototype for new error extraction mechanism

7a88872

phryneas commented May 17, 2023

View reviewed changes

src/cache/inmemory/key-extractor.ts Outdated Show resolved Hide resolved

changeset

0979afb

phryneas added 2 commits May 17, 2023 14:12

tests passing again

52ac7c1

allow overriding ApolloErrorMessageHandler

36840da

phryneas force-pushed the pr/error-extraction branch from b305e44 to 36840da Compare May 17, 2023 13:32

opt-in via import & function call

4a94dce

phryneas added 6 commits May 17, 2023 16:40

update tests

07d7e78

no dev conditionals for InvariantError

a44f0f7

also extract invariant.debug,log,warn,error

139ad85

use newInvariantError wrapper fn

1854f2a

udpate size limits

1f0ce65

add multiple ways of loading granular error codes/dev messages

970e4cd

size-limit

be0da2f

phryneas self-assigned this May 22, 2023

update changeset

83398e6

phryneas commented May 22, 2023

View reviewed changes

adjust comments

ef38765

phryneas commented May 22, 2023

View reviewed changes

Merge branch 'release-3.8' into pr/error-extraction

33d662f

phryneas marked this pull request as ready for review May 22, 2023 13:50

phryneas requested review from alessbell, benjamn and jerelmiller May 22, 2023 13:50

add return statement to loadErrorMessageHandler

f477bec

jerelmiller reviewed May 25, 2023

View reviewed changes

phryneas and others added 6 commits May 26, 2023 10:46

Update src/config/jest/setup.ts

1298ad9

Co-authored-by: Jerel Miller <[email protected]>

code review feedback

77f0825

apply prettier

70be754

rename i to originalInvariant

ff515ba

add apollo client version to ApolloErrorMessageHandler symbol

c797d37

bump bundle size

31f2023

jerelmiller approved these changes May 26, 2023

View reviewed changes

jerelmiller added 2 commits May 26, 2023 09:49

Merge remote-tracking branch 'origin/release-3.8' into pr/error-extra…

6db9bc2

…ction

Bump size limit

4f3b270

jerelmiller merged commit f8c0b96 into release-3.8 May 26, 2023

jerelmiller deleted the pr/error-extraction branch May 26, 2023 15:57

github-actions bot mentioned this pull request May 26, 2023

Version Packages (beta) #10907

Merged

github-actions bot locked as resolved and limited conversation to collaborators Jun 26, 2023

new error extraction mechanism #10887

new error extraction mechanism #10887

Uh oh!

Conversation

phryneas commented May 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checklist:

Uh oh!

changeset-bot bot commented May 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

phryneas commented May 17, 2023

Uh oh!

github-actions bot commented May 17, 2023

Uh oh!

github-actions bot commented May 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

Uh oh!

phryneas commented May 17, 2023

Uh oh!

github-actions bot commented May 17, 2023

Uh oh!

phryneas commented May 17, 2023

Uh oh!

phryneas commented May 17, 2023

Uh oh!

github-actions bot commented May 17, 2023

Uh oh!

phryneas commented May 17, 2023

Uh oh!

phryneas commented May 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

phryneas commented May 17, 2023

Uh oh!

phryneas commented May 17, 2023

Uh oh!

github-actions bot commented May 17, 2023

Uh oh!

phryneas commented May 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

phryneas commented May 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

phryneas May 22, 2023

Choose a reason for hiding this comment

Uh oh!

jerelmiller May 25, 2023

Choose a reason for hiding this comment

Uh oh!

phryneas May 26, 2023

Choose a reason for hiding this comment

Uh oh!

phryneas May 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

phryneas May 22, 2023

Choose a reason for hiding this comment

Uh oh!

jerelmiller May 25, 2023

Choose a reason for hiding this comment

Uh oh!

phryneas May 26, 2023

Choose a reason for hiding this comment

Uh oh!

phryneas commented May 22, 2023

Uh oh!

phryneas commented May 22, 2023

Uh oh!

github-actions bot commented May 22, 2023

Uh oh!

phryneas commented May 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jerelmiller left a comment

phryneas commented May 17, 2023 •

edited

Loading

changeset-bot bot commented May 17, 2023 •

edited

Loading

github-actions bot commented May 17, 2023 •

edited

Loading

phryneas commented May 17, 2023 •

edited

Loading

phryneas commented May 19, 2023 •

edited

Loading

phryneas commented May 22, 2023 •

edited

Loading

phryneas May 22, 2023 •

edited

Loading

phryneas commented May 22, 2023 •

edited

Loading