API Fetch Utility could provide more information on error

[marcustyphoon]

I am like 4 layers deep into this one haha.

I was in the middle of writing a somewhat lengthy discussion post about ways to improve error messages from injected functions...

The discussion post draft

I found myself pondering the console output of an error in an injected function (user blogs 401s if you're not logged in/incognito; easy fix, will PR) and noticed some things that could be improved about XKit Rewritten's error handling:

• Putting a .catch(console.error) handler on the main() call in runScript in main.js actually makes the console error less informative, since you can't tell what script errored. Could fix this by logging more info in that case or removing it. (Removing it would cause restartListeners to be skipped if there's an error in main() - dunno if that's good or bad tbh.)

• Stack traces in errors in injected functions naturally don't include the context they were called from, so it's entirely unclear what is causing an error (you can't tell what the injected function name is, i.e. which one it is, or where it was called from).

The function name is easy to insert somewhat elegantly into the displayed stack trace, since stack is just a string, e.g. stack: exception.stack + '\\n (at "${name}")' (prose indicating that this is XKit Rewritten could be added as well). A stack trace of the calling function could in theory be added as well, queried via new Error().stack, though calling this on every inject call seems quite silly, and the result has quite poor formatting.

It seems like the real way to get nice clear stack traces is to use console.warn inside the injected callback itself. (screenshot)

• There's a lot of extra information provided in Tumblr's apiFetch erroring that isn't included when you console.log the error object. This is, however, easy to recover via

...and then I did more testing and realized that most of it only applies to errors in which the injection returns a rejected promise with useful information rather than throwing, i.e. just apiFetch, basically. So, starting over:

The current error handling in the apiFetch injection passes through a rejected promise, which results in essentially no stack trace data being logged if there is an error:

Ultimately you can tell that this is a 404, what URL 404'd, and that this is XKit Rewritten related, so ultimately perhaps that's enough. But this code shows that more info can be added, at least in Chromium:

const requestApiFetch = async (resource, init) =>
  window.tumblr.apiFetch(resource, init)
    .catch(error => {
      const consoleWarn = console.warn.__sentry_original__ || console.warn; // unnecessary; just avoids tumblr's logging
      consoleWarn('XKit Rewritten API fetch was rejected with:', JSON.stringify(error, null, 2));
      throw error;
    });

export const apiFetch = (...args) => inject(requestApiFetch, args);

I tried some things with manipulating the stack property on the error objects, which kind of works, but ultimately it just seemed simpler to just console.warn console.error from a location in which the rich stack trace that is automatically included. In Chrome, this identifies the whole stack trace including the function that injected the script element; unfortunately, it doesn't in Firefox:

Anyways, this also prints the status data provided by Tumblr's apiFetch. Maybe this would be useful if a user encountered a problem and was providing the console output?