引子

在前端异样示例外面察看了各类异样的示例，依照辨别判断的思路 3 ，看下该如何解析异样信息。次要还是 Sentry 和 TraceKit 外面局部解决逻辑。

@sentry/browser 版本 ： 5.9.1 。 TraceKit 版本： 0.4.6 。

  • Origin
  • My GitHub

TraceKit 解析

TraceKit 对于 JavaScript 定义的 Error 中几种类型有比拟好的解决，对异样相干信息进行再解析格式化。具体可见 Read TraceKit 。

Sentry 解析

Sentry 中在之前提过辨别的逻辑上，提供了对应的几种解决办法：

// 非残缺源码，次要为了体现思路let eventif (isErrorEvent(exception) && exception.error) {  event = eventFromStacktrace(computeStackTrace(exception));  return event;}if (isDOMError(exception) || isDOMException(exception)) {  event = eventFromString(exception);  return event;}// isError 蕴含的类型有 [object Error] [object Exception] [object DOMException] ，以及继承自 Error 对象的自定义对象。if (isError(exception)) {  event = eventFromStacktrace(computeStackTrace(exception));  return event;}// isPlainObject 查看类型是 [object Object]，isEvent查看的是 wat instanceof Eventif (isPlainObject(exception) || isEvent(exception)) {  event = eventFromPlainObject(exception);  return event;}event = eventFromString(exception);return event;

其中 computeStackTrace(ex) 办法是基于 TraceKit 中的解决办法进行一些革新。

上面对解决的办法进一步的理解。

eventFromStacktrace

export function eventFromStacktrace(stacktrace: TraceKitStackTrace): Event {  const exception = exceptionFromStacktrace(stacktrace);  return {    exception: {      values: [exception],    },  };}export function exceptionFromStacktrace(stacktrace: TraceKitStackTrace): Exception {  const frames = prepareFramesForEvent(stacktrace.stack); // 该办法进行一些数据过滤  const exception: Exception = {    type: stacktrace.name,    value: stacktrace.message,  };  if (frames && frames.length) {    exception.stacktrace = { frames };  }  // tslint:disable-next-line:strict-type-predicates  if (exception.type === undefined && exception.value === '') {    exception.value = 'Unrecoverable error caught';  }  return exception;}

该办法次要是对解决过后的异样信息，进行数据再次格式化，以及对一些状况的补充欠缺，例如 Unrecoverable error caught 。

最初产生的数据格式比拟残缺的是这样：

{  type: '',  value: '',  stacktrace: {},}

eventFromString

export function eventFromString(  input: string,  syntheticException?: Error,  options: {    attachStacktrace?: boolean;  } = {},): Event {  const event: Event = {    message: input,  };  //  这块逻辑跟自定义的异样无关，暂不探讨  if (options.attachStacktrace && syntheticException) {    const stacktrace = computeStackTrace(syntheticException);    const frames = prepareFramesForEvent(stacktrace.stack);    event.stacktrace = {      frames,    };  }  return event;}

该办法次要对数据进行再组装格式化。

最初产生的数据格式比拟残缺的是这样：

{  message: '',  stacktrace: {},}

eventFromPlainObject

export function eventFromPlainObject(exception: {}, syntheticException?: Error, rejection?: boolean): Event {  const event: Event = {    exception: {      values: [        {          type: isEvent(exception) ? exception.constructor.name : rejection ? 'UnhandledRejection' : 'Error',          value: `Non-Error ${            rejection ? 'promise rejection' : 'exception'          } captured with keys: ${extractExceptionKeysForMessage(exception)}`,        },      ],    },    extra: {      __serialized__: normalizeToSize(exception),    },  };  //  这块逻辑跟自定义的异样无关，暂不探讨  if (syntheticException) {    const stacktrace = computeStackTrace(syntheticException);    const frames = prepareFramesForEvent(stacktrace.stack);    event.stacktrace = {      frames,    };  }  return event;}

该办法次要对数据进行再组装格式化。

最初产生的数据格式比拟残缺的是这样：

{  values: [{}],  extra: {},  stacktrace: {},}

小结

Sentry 绝对于 TraceKit 提供了更多异样类型的解决，并且不同类型的异样可能会有独自的形容属性。如果须要依据本身的需要定制数据格式，倡议基于 TraceKit 的处理结果再次解决。

参考资料

  • TraceKit
  • Sentry