Конвертировать JSON (из Sentry) в HTML с помощью TypeScript - PullRequest
Новая
       10

Конвертировать JSON (из Sentry) в HTML с помощью TypeScript

0 голосов
/ 17 октября 2018

Я хочу выучить TypeScript.

У меня есть словарь JSON, возвращенный методом sentry event_from_exception() (Python).

Я хотел бы отформатировать его как красивый HTML с расширяемым локальнымпеременные и pre_ и post_context.Результат должен выглядеть примерно так:

traceback-in-django-debug-view

Вот пример json: 

{
  "exception": {
    "values": [
      {
        "stacktrace": {
          "frames": [
            {
              "function": "main", 
              "abs_path": "/home/modlink_cok_d/src/sentry-json.py", 
              "pre_context": [
                "from sentry_sdk.utils import event_from_exception", 
                "", 
                "def main():", 
                "    local_var = 1", 
                "    try:"
              ], 
              "lineno": 9, 
              "vars": {
                "exc": "ValueError()", 
                "local_var": "1"
              }, 
              "context_line": "        raise ValueError()", 
              "post_context": [
                "    except Exception as exc:", 
                "        event, info = event_from_exception(sys.exc_info(), with_locals=True)", 
                "        print(json.dumps(event, indent=2))", 
                "", 
                "main()"
              ], 
              "module": "__main__", 
              "filename": "sentry-json.py"
            }
          ]
        }, 
        "type": "ValueError", 
        "value": "", 
        "module": "exceptions", 
        "mechanism": null
      }
    ]
  }, 
  "level": "error"
}

Как это можно сделать смашинопись

Ответы [ 3 ]

0 голосов
/ 22 октября 2018

Чтобы сделать это самостоятельно без фреймворка, я бы создал класс для каждого элемента в json.Тогда у меня будет toHTML(domParent) метод для каждого класса, который выполняет итерацию по его подкомпонентам: 

class Stacktrace { 
  frames: Frame[];
  type: string;
  value: string;
  module: string;
  mechanism: string;

  toHTML(domParent) {
    for (let frame of Frame) {
      frame.toHTML(domParent); 
    }
    domParent.addChild(`<div>${type}</div>`);
    domParent.addChild(`<div>${value}</div>`);
    domParent.addChild(`<div>${module}</div>`);
    domParent.addChild(`<div>${mechanism}</div>`);
  }
}

Это просто псевдокод, но он должен привести вас на правильный путь.

0 голосов
/ 23 октября 2018
  1. Создайте схему для ваших данных.Это поможет вам в работе с TypeScript и IDE.

Вы можете использовать https://app.quicktype.io, который дает вам. 

export interface Welcome {
    exception: Exception;
    level:     string;
}

export interface Exception {
    values: Value[];
}

export interface Value {
    stacktrace: Stacktrace;
    type:       string;
    value:      string;
    module:     string;
    mechanism:  null;
}

export interface Stacktrace {
    frames: Frame[];
}

export interface Frame {
    function:     string;
    abs_path:     string;
    pre_context:  string[];
    lineno:       number;
    vars:         Vars;
    context_line: string;
    post_context: string[];
    module:       string;
    filename:     string;
}

export interface Vars {
    exc:       string;
    local_var: string;
}
Рендеринг HTML из вашего data.

Вы можете использовать литерал шаблона , если у вас нет предпочитаемого веб-фреймворка (React, Vue). 

<code>const data = JSON.parse(json);
const html = `
    <div>${data.exception.values.map(value => `
        <div>${value.stacktrace.frames.map(frame => `
            <div>
                <pre>${frame.abs_path} in ${frame.function}
$ {frame.pre_context.map ((line, i) => `
${frame.lineno + i - frame.pre_context.length}. ${line}
`) .join ("")} 
<strong>${frame.lineno}. ${frame.context_line}</strong>
$ {frame.post_context.map ((line, i) => `
${frame.lineno + i + 1}. ${line}
`) .join (" ")} `) .join ("")} `) .join (" ")} `;document.body.innerHTML = html;

Например: https://codesandbox.io/s/52x8r17zo4

0 голосов
/ 22 октября 2018

Вариант 1. сохранить файл как .json и открыть в браузере (я пробовал с FireFox), вы сможете увидеть его в очень хорошем формате, как на картинке, опубликованной вами.

вариант 2.использовать JavaScript для динамического создания объектов DOM в зависимости от JSON.См. this и this .

/ *

Ниже приведены некоторые советы по созданию сценария

  • parse JSON
  • используйте рекурсивную функцию для создания тегов div или p в соответствии с вашими предпочтениями.
  • также добавьте прослушиватель событий щелчка на каждом элементе, чтобы развернуть / свернуть дочерние представления.

* /

Надеюсь, это поможет.

...