Error Tracking

[SachaG]

WIP: https://github.com/VulcanJS/Vulcan/tree/errors

Things to note compared to @ErikDakoda's original code:

• I changed the debug, info, etc. shortcut functions so that they have the same signature as the main log function (they accept a single params object).
• For now I commented out everything I wasn't using, we can re-enable the code progressively.
• I created a new ErrorCatcher component that you can use as an error boundary to wrap your component tree (typically in your Layout component) and catch any errors.
• I am not sure if ErrorsUserMonitor is still useful or if the functionality of monitoring user change should just be merged into ErrorCatcher. Or maybe even integrated with vulcan:events somehow via a global user.changed callback.

Overall it seems to work, I've got Sentry reporting server-side and client-side errors. I still need to look into some things though, such as identifying the current user; and how to handle document not found and permission errors (differentiate them by tag? log level?).

[SachaG]

• vulcan:errors: https://github.com/VulcanJS/Vulcan/tree/errors/packages/vulcan-errors
• vulcan:errors-sentry: https://github.com/VulcanJS/Vulcan/tree/errors/packages/vulcan-errors-sentry

[SachaG]

TODO:

• Track environment (development/staging/production)
• Make ErrorCatcher into a HoC?

[nnennajohn]

@SachaG I'd love to help with this. But seems you got most of it covered. The only changes I'd make is allowing for conditionally showing the error or showing a user friendly message instead if the environment is not dev. This is especially useful since most error messages are not useful to the user. You can still log it in the console, and you are already sending it to Sentry. Also, the possibility of showing a fallback component.

The show only in dev could possible be passed as a config to settings, and also a config setting to fallback message string. Not sure.

For the ErrorCatcher HOC, its pretty trivial. In the same file as ErrorCatcher:

export const withErrorCatcher = (WrappedComponent) => {
  return function WithErrorCatcherComponent(props) {
    return (
      < ErrorCatcher >
        <WrappedComponent {...props} />
      </ErrorCatcher >
    );
  }
}

Only problem is I am not sure how to pass options to withErrorCatcher this way. So I mostly use it as a regular component when I need to pass extra options.

Def let me know If I can help anyway.

Thanks.

[SachaG]

I was thinking maybe we could have a "show details" link that shows you the full error or something. Not sure about making a difference between dev/non-dev as having different behaviors in different environments can often make it super hard to track down a bug.