使用 TypeScript 将 JSON（来自 Sentry）转换为 HTML

Question

我想学习 TypeScript。

我有一个由哨兵方法 event_from_exception() (Python) 返回的 JSON 字典。

我想用可扩展的局部变量和 pre_ 和 post_context 将它格式化为漂亮的 HTML。结果应该大致如下所示：

这是一个例子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"
}

如何使用 TypeScript 完成此操作？

Answer 1

选项 1. 将文件另存为 .json 并用浏览器打开（我试过使用 FireFox）你应该能够以非常漂亮的格式看到它，就像你发布的图片一样。

选项 2. 使用 JavaScript 根据 JSON 动态创建 DOM 对象。参考 this and this.

/*

以下是创建脚本的一些提示

解析JSON
使用递归函数根据您的喜好创建 div 或 p 标签。
还在每个元素上添加点击事件侦听器到 expand/collapse 子视图。

*/

希望对您有所帮助。

Answer 2

要在没有框架的情况下自行完成此操作，我将为 json 中的每个元素创建一个 class。然后我会在每个 class 上有一个 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>`);
  }
}

这只是伪代码，但应该能让您走上正轨。

Answer 3

为您的数据创建架构。这将帮助您使用 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;
}

从您的data渲染HTML。

您可以使用 template literal 如果您没有喜欢的 Web 框架（React、Vue）。

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}</pre>
                <div style="margin-left:2rem">
                    ${frame.pre_context.map((line, i) =>`
                        <pre>${frame.lineno + i - frame.pre_context.length}. ${line}</pre>
                    `).join("")}

                    <pre><strong>${frame.lineno}. ${frame.context_line}</strong></pre>
                    ${frame.post_context.map((line, i) => `
                        <pre>${frame.lineno + i + 1}. ${line}</pre>
                    `).join("")}
                </div>
            </div>
        `).join("")}</div>
    `).join("")}</div>
`;
document.body.innerHTML = html;

例如：https://codesandbox.io/s/52x8r17zo4

使用 TypeScript 将 JSON（来自 Sentry）转换为 HTML

Convert JSON (from Sentry) to HTML with TypeScript

javascript

node.js

json

typescript

sentry