auto-trace

auto-trace

A library that fixes all your stack trace problems.

This library helps transform garbage errors into beautiful objects filled with insight and understanding. This is especially useful for apps that use an error reporting service such as bug-snag or sentry.

• Provide a meaningful Stack Trace (for optimum error blameage)
• Prevent irresponsible throwing of Non-Error objects (which result in Error:[object Object])
• Attach extra context to errors
• Encourage a consistent pattern for error handling

Resource File

return $http
  .get()
  .then()
  .catch(catchAsyncStacktrace(extraContext))

Observable

return observable
  .then()
  .catch(catchAsyncStacktrace(extraContext))

Error Life cycle

There are two parts to the error life cycle

• Error Created new Error()
• Error Thrown throw err

These events do not always occur at the same time. $http is an example of this. Since $http makes an async request, an error stacktrace will contain the call stack of the invoker as the request comes in (this is the syncStacktrace). Often the more useful stacktrace is the call stack as the request went out Controller->Service->Resource (this is the asyncStacktrace).

API

catchError

catchError is a wrapper around asyncStacktrace which returns a method that will handle error processing and throwing. Pass this as your onError arg in RxJS subscriptions or as a callback in catch.

RxJS Subscription example: myObs.subscribe(onComplete, catchError())

If a callback is provided then that will be called and the error will have to be thrown manually:

myObs.subscribe(onComplete, catchError((error, throwError) => {
  error.showToast = false
  throwError(error)
}))

Asynchronous Stack-Trace

The asynchronous stacktrace is often the most useful, in the case of http requests, this is the stacktrace as the request is going out.

asyncStacktrace(callback, extraContext)

Returns a function that will wrap the caught response in an error object that contains the asynchronous stacktrace. Will append extraContext and call callback with wrapped error. This should be called as a function so that return value function will be passed into the catch statement.

• callback (optional) function that will be called with the wrapped error
• extraContext (optional) String or Object that will be stringified and appended to the error message

return $http
  .get()
  .then()
  .catch(asyncStacktrace(callback, {state: 'extra info'}))

catchAsyncStacktrace(extraContext)

Returns a function that will wrap caught response in an error object that contains the asynchronous stacktrace. Will append extraContext and throw the wrapped error. This should be called as a function so that return value function will be passed into the catch statement (see example).

• extraContext (optional) String or Object that will be stringified and appended to the error message

This function uses setTimeout(() => {throw err}) to throw the error.

The error will be caught be window.onerror and can be logged by reporting services like sentry and bugsnag, but will not disrupt normal code execution (and cannot be caught elsewhere within the app).

This is especially helpful when working in angular land - as throwing an error within a promise catch handler will cause a rootScope:digest Error.

return $http
  .get()
  .then()
  .catch(catchAsyncStacktrace({state: 'extra info'}))

Synchronous Stack-Trace

In the case of http requests, the synchronous stacktrace is the stacktrace as the request is response comes in. This is the normal, but less useful, stack-trace included by response errors. Often this trace follows the application function that serviced the request.

syncStacktrace

First order function, will wrap caught response in an error object that contains the asynchronous stacktrace and return the wrapped error. This should be passed (not called) as a function into the catch statement.

return $http
  .get()
  .then()
  .catch(syncStacktrace)

catchSyncStacktrace

First order function, will wrap caught response in an error object that contains the asynchronous stacktrace and throw the wrapped error. This should be passed (not called) as a function into the catch statement (see example).

This function uses setTimeout(() => {throw err}) to throw the error.

The error will be caught be window.onerror and can be logged by reporting services like sentry and bugsnag, but will not disrupt normal code execution (and cannot be caught elsewhere within the app).

This is especially helpful when working in angular land - as throwing an error within a promise catch handler will cause a rootScope:digest Error.

return $http
  .get()
  .then()
  .catch(catchSyncStacktrace)

Middleware

Looking for more useful information about your errors? Wish you had the data from both parts of the error life cycle. Look no further! Middlewares allow you to create higher order functions that will execute in both life cycle contexts.

addGlobalMiddleware(middlewareFn)

Adds global middleware function that will be called on all autoTrace errors.

Middlewares must be of the form asyncErr => syncRawErr => errToReturn

• asyncErr is an Error object with the Async stacktrace
• syncRawErr is the rawError passed to the handler, this could be any type of object (make sure to perform a type check).
• errToReturn will passed as the syncRawErr to the next middleware, and finally wrapped in an error object (if needed) and thrown (or passed into a callback).

removeAllGlobalMiddlewares()

Deletes all global middleware functions.

Middleware Examples

Let's say you want to record how long it takes for a request to fail. This requires context surrounding when the error was created and when the error was thrown.

const middleware = asyncErr => {
  const startTime = new Date()
  return syncErr => {
    const errorTime = new Date() - startTime;
    if(typeof syncErr === Error)
      syncErr.message += ' -TimeToFail: ' + errorTime
    else
      syncErr = new Error(JSON.stringify(syncErr) + ' -TimeToFail: ' + errorTime)
    return syncErr
  }
}

addGlobalMiddleware(middleware);

Resource File

const extraContext = '-More info'

return $http
  .get()
  .then()
  .catch(throwAsyncStacktrace(extraContext))

This will create Error: {message: 'original error message -TimeToFail: 10s -More info', trace: ...}

installation

npm install auto-trace