关于javascript:前端异常解析

引子

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

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

• Origin
• My GitHub

TraceKit 解析

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

Sentry 解析

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

// 非残缺源码，次要为了体现思路
let event
if (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 Event
if (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