我想学习TypeScript.
我有一个由sentry方法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完成？
解决方法
>为数据创建架构.这将有助于您使用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.
你可以使用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;
