Option to hook in to `warnAboutDataLoss`

[trevor-scheer]

👋 from the other side! We'd like to notify devs (at dev time) outside of the console where we'd normally see invariant warnings, etc. from Apollo Client. Would y'all be open to an option that allows us to provide a callback for when these issues occur?

There's a(n awful) path forward today using private API which I'll share for posterity but of course I'd rather not use it if it can be avoided. Thanks in advance!

import { ApolloErrorMessageHandler } from "@apollo/client/utilities/globals/invariantWrappers";
type ApolloErrorMessageHandlerType = NonNullable<
  (typeof window)[typeof ApolloErrorMessageHandler]
>;

// Either resolve to the handler we intend to wrap or reject after 5s
async function getApolloErrorHandlerOnWindowOrThrow(): Promise<ApolloErrorMessageHandlerType> {
  return Promise.race([
    new Promise<never>((_resolve, reject) => {
      setTimeout(() => {
        reject();
      }, 5000);
    }),
    new Promise<ApolloErrorMessageHandlerType>(resolve => {
      const interval = setInterval(() => {
        if (!!window[ApolloErrorMessageHandler]) {
          clearInterval(interval);
          resolve(window[ApolloErrorMessageHandler]);
        }
      }, 100);
    }),
  ]);
}

export async function interceptApolloErrorsInDevOnly(): Promise<void> {
  if (__DEV__) {
    try {
      const apolloErrorHandler = await getApolloErrorHandlerOnWindowOrThrow();
      const wrapped = (message: number, args: string[]) => {
        // notify!
        return apolloErrorHandler(message, args);
      };
      window[ApolloErrorMessageHandler] = wrapped as typeof apolloErrorHandler;
    } catch (error) {
      console.error(error);
    }
  }
}

[phryneas]

I believe it should be possible to do this at least a little bit more elegantly right now:

import {
  loadErrorMessageHandler,
  loadDevMessages,
  loadErrorMessages,
  setErrorMessageHandler
} from '@apollo/client/dev';

const handler = loadErrorMessageHandler();
loadDevMessages();
loadErrorMessages();
const myHandler = (...args) => {
  const retVal = handler(...args);
  console.log("Custom Error Handler:", retVal);
  return retVal;
};
setErrorMessageHandler(Object.assign(myHandler, handler));

We plan to add OTEL support at some point probably within this year, so this will definitely get better support, but I think right now this should at least work for you.

[trevor-scheer]

Thanks @phryneas! That's certainly a bit nicer and probably an easier sell than what I had.

[fbartho]

@phryneas is there somewhere where I can subscribe to your OTEL feature/package for updates? :P

[jerelmiller]

@fbartho nothing right now but we'll likely put out an RFC or a prototype. It will likely be one of the first initiatives after our release of 4.0 in July. We'll post that as an issue in the apollo-client repo once we have an idea of how we are going to tackle this 🙂

[trevor-scheer]

Ah, I'm going to specify my request a bit since the existing solution is effectively a dev-only "feature". It'd be great for this hook to work in prod as well so we can report these occurrences. I believe the error messages aren't shipped in prod but having some additional context (like type/field names) that concern the data loss would be particularly helpful in burning down these issues.

[phryneas]

The problem is that the whole invariant.warn call gets modified during build & stripped out as dead code when you bundle:

- invariant.warn
+ __DEV__ && invariant.warn

It's generally a tradeoff between bundle size and usefulness we have to make, so we generally remove all warnings as they are not meant for end users.

So you'd probably have to patch-package if you wanted to keep this in for prod.