ai_coder/vscode-debug-visualizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Improves error messages.

Browse Source
This commit is contained in:
Henning Dieterichs
2020-03-18 18:53:35 +01:00
parent d2e0138bae
commit 9efd1d7cd6
14 changed files with 203 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.vscode/launch.json vendored
View File

@@ -8,7 +8,7 @@
"runtimeExecutable": "${execPath}",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}/extension",
"${workspaceFolder}\\demo"
"${workspaceFolder}\\demos\\js"
],
"env": {
"HOT_RELOAD": "true",
@@ -24,7 +24,7 @@
"runtimeExecutable": "${execPath}",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}/extension",
"${workspaceFolder}\\demo"
"${workspaceFolder}\\demos\\php"
],
"env": {
"HOT_RELOAD": "true",
@@ -40,7 +40,7 @@
"runtimeExecutable": "${execPath}",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}/extension",
"${workspaceFolder}\\demo"
"${workspaceFolder}\\demos\\js"
],
"env": {
"HOT_RELOAD": "",
@@ -55,7 +55,7 @@
"runtimeExecutable": "${execPath}",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}/extension",
"${workspaceFolder}\\demo"
"${workspaceFolder}\\demos\\php"
],
"env": {
"HOT_RELOAD": "",

2
demos/php/.vscode/launch.json vendored
View File

@@ -8,7 +8,7 @@
"name": "PHP - Demo",
"type": "php",
"request": "launch",
"program": "${workspaceFolder}/php/demo.php",
"program": "${workspaceFolder}/demo.php",
"xdebugSettings": {
"max_data": -1
}

2
demos/php/.vscode/settings.json vendored
View File

@@ -1,6 +1,6 @@
{
"debugVisualizer.debugAdapterConfigurations": {
"php": {
"phpa": {
"context": "watch",
"expressionTemplate": "${expr}"
}

4
extension/src/DataSource/DataExtractionProvider/ConfiguredDataExtractionProviderFactory.ts
View File

@@ -6,7 +6,11 @@ import {
} from "./DataExtractionProvider";
import { Config, DebugAdapterConfig } from "../../Config";
import { GenericDataExtractionProvider } from "./GenericDataExtractionProviderFactory";
import { registerUpdateReconciler, hotClass } from "@hediet/node-reload";
registerUpdateReconciler(module);
@hotClass(module)
export class ConfiguredDataExtractionProviderFactory
implements DataExtractionProviderFactory {
constructor(private readonly config: Config) {}

3
extension/src/DataSource/DataExtractionProvider/DataExtractionProvider.ts
View File

@@ -3,6 +3,7 @@ import {
DataExtractorId,
} from "@hediet/debug-visualizer-data-extraction";
import { VsCodeDebugSession } from "../../VsCodeDebugger";
import { FormattedMessage } from "../../contract";
export interface DataExtractionProviderFactory {
createDataExtractionProvider(
@@ -15,7 +16,7 @@ export interface DataExtractionProvider {
args: DataExtractionProviderArgs
): Promise<
| { kind: "data"; result: DataExtractionResult }
| { kind: "error"; message: string }
| { kind: "error"; message: FormattedMessage }
>;
}

22
extension/src/DataSource/DataExtractionProvider/GenericDataExtractionProviderFactory.ts
View File

@@ -9,7 +9,12 @@ import {
DataExtractionProviderArgs,
} from "./DataExtractionProvider";
import { parseEvaluationResultFromGenericDebugAdapter } from "./parseEvaluationResultFromGenericDebugAdapter";
import { FormattedMessage } from "../../contract";
import { hotClass, registerUpdateReconciler } from "@hediet/node-reload";
registerUpdateReconciler(module);
@hotClass(module)
export class GenericDataExtractionProviderFactory
implements DataExtractionProviderFactory {
createDataExtractionProvider(
@@ -28,7 +33,7 @@ export class GenericDataExtractionProvider implements DataExtractionProvider {
frameId,
}: DataExtractionProviderArgs): Promise<
| { kind: "data"; result: DataExtractionResult }
| { kind: "error"; message: string }
| { kind: "error"; message: FormattedMessage }
> {
const finalExpression = this.getFinalExpression({
expression,
@@ -44,7 +49,20 @@ export class GenericDataExtractionProvider implements DataExtractionProvider {
} catch (error) {
return {
kind: "error",
message: error.message,
message: {
kind: "list",
items: [
error.message,
`Used debug adapter: ${this.session.session.configuration.type}`,
{
kind: "inlineList",
items: [
"Evaluated expression is",
{ kind: "code", content: finalExpression },
],
},
],
},
};
}

7
extension/src/DataSource/DataExtractionProvider/JsDataExtractionProviderFactory.ts
View File

@@ -11,7 +11,12 @@ import {
DataExtractionProvider,
DataExtractionProviderArgs,
} from "./DataExtractionProvider";
import { FormattedMessage } from "../../contract";
import { registerUpdateReconciler, hotClass } from "@hediet/node-reload";
registerUpdateReconciler(module);
@hotClass(module)
export class JsDataExtractionProviderFactory
implements DataExtractionProviderFactory {
createDataExtractionProvider(
@@ -39,7 +44,7 @@ class JsDataEvaluator implements DataExtractionProvider {
frameId,
}: DataExtractionProviderArgs): Promise<
| { kind: "data"; result: DataExtractionResult }
| { kind: "error"; message: string }
| { kind: "error"; message: FormattedMessage }
> {
while (true) {
try {

48
extension/src/DataSource/DataExtractionProvider/parseEvaluationResultFromGenericDebugAdapter.ts
View File

@@ -2,12 +2,13 @@ import {
DataExtractionResult,
isExtractedData,
} from "@hediet/debug-visualizer-data-extraction";
import { FormattedMessage } from "../../contract";
export function parseEvaluationResultFromGenericDebugAdapter(
resultText: string
):
| { kind: "data"; result: DataExtractionResult }
| { kind: "error"; message: string } {
| { kind: "error"; message: FormattedMessage } {
const jsonData = resultText.trim();
let resultObj;
@@ -37,7 +38,26 @@ export function parseEvaluationResultFromGenericDebugAdapter(
if (!isExtractedData(resultObj)) {
return {
kind: "error",
message: "Data does not match ExtractedData interface.",
message: {
kind: "list",
items: [
"Evaluation result does not match ExtractedData interface.",
{
kind: "inlineList",
items: [
"Evaluation result was:",
{
kind: "code",
content: JSON.stringify(
resultObj,
undefined,
4
),
},
],
},
],
},
};
}
} catch (e) {
@@ -69,8 +89,26 @@ function parseJson(str: string) {
try {
return JSON.parse(str);
} catch (error) {
throw new Error(
`Could not parse \`${str}\` as JSON.\n${error.message}`
);
throw new FormattedError({
kind: "list",
items: [
"Could not parse evaluation result as JSON:",
error.message,
{
kind: "inlineList",
items: [
"Evaluation result was:",
{
kind: "code",
content: str,
},
],
},
],
});
}
}
class FormattedError {
constructor(public readonly message: FormattedMessage) {}
}

17
extension/src/contract.ts
View File

@@ -18,9 +18,24 @@ function unchecked<T>(): types.Type<T, any, unknown> {
);
}
export type FormattedMessage =
| string
| {
kind: "list";
items: FormattedMessage[];
}
| {
kind: "inlineList";
items: FormattedMessage[];
}
| {
kind: "code";
content: string;
};
export type DataExtractionState =
| { kind: "loading" }
| { kind: "error"; message: string }
| { kind: "error"; message: FormattedMessage }
| { kind: "noDebugSession" }
| {
kind: "data";

5
webview/src/components/ExpressionInput.tsx
View File

@@ -76,11 +76,8 @@ export class ExpressionInput extends React.Component<{ model: Model }> {
horizontalScrollbarSize: 0,
verticalScrollbarSize: 0,
},
/*theme: { dark: "vs-dark", light: "vs-light" }[
this.props.model.theme
],*/
});
//
this.editor.onDidContentSizeChange(e => {
this.contentHeight = e.contentHeight;
});

78
webview/src/components/NoData.tsx
View File

@@ -4,41 +4,79 @@ import { observable } from "mobx";
import Measure from "react-measure";
@observer
export class NoData extends React.Component<{ label: string }> {
@observable height = 0;
@observable width = 0;
export class NoData extends React.Component<{ children: React.ReactChild }> {
@observable size = { width: 0, height: 0 };
@observable innerSize = { width: 0, height: 0 };
render() {
const { width, height } = this;
const { width, height } = this.size;
const { width: innerWidth, height: innerHeight } = this.innerSize;
return (
<Measure
client={true}
onResize={e => {
if (e.client) {
this.height = e.client.height;
this.width = e.client.width;
this.size = {
height: e.client.height,
width: e.client.width,
};
}
}}
>
{({ measureRef }) => (
<div className="component-NoData" ref={measureRef}>
<div
className="component-NoData"
ref={measureRef}
style={{ position: "relative" }}
>
<svg>
<line x1={0} y1={0} x2={width} y2={height} />
<line x1={width} y1={0} x2={0} y2={height} />
<rect
x={width / 2 - 50}
y={height / 2 - 20}
width={100}
height={40}
/>
<text
x={width / 2}
y={height / 2}
textAnchor="middle"
alignmentBaseline="central"
children={this.props.label}
/>
</svg>
<div
className="part-content"
style={{
position: "absolute",
overflow: "auto",
width: "100%",
height: "100%",
}}
>
<Measure
client={true}
onResize={e => {
if (e.client) {
this.innerSize = {
height: e.client.height,
width: e.client.width,
};
}
}}
>
{({ measureRef }) => (
<div
className="part-content-inner"
ref={measureRef}
style={{
position: "relative",
width: "fit-content",
height: "fit-content",
padding: 10,
left: Math.max(
0,
width / 2 - innerWidth / 2
),
top: Math.max(
0,
height / 2 - innerHeight / 2
),
}}
>
{this.props.children}
</div>
)}
</Measure>
</div>
</div>
)}
</Measure>

43
webview/src/components/Visualizer.tsx
View File

@@ -2,6 +2,7 @@ import React = require("react");
import { Model } from "../model/Model";
import { observer } from "mobx-react";
import { NoData } from "./NoData";
import { FormattedMessage } from "debug-visualizer/src/contract";
@observer
export class Visualizer extends React.Component<{ model: Model }> {
@@ -14,17 +15,21 @@ export class Visualizer extends React.Component<{ model: Model }> {
renderContent(): JSX.Element {
const s = this.props.model.state;
if (s.kind === "loading") {
return <NoData label="Loading" />;
return <NoData>Loading</NoData>;
} else if (s.kind === "error") {
return <NoData label={"Error: " + s.message} />;
return (
<NoData>
<Message message={s.message} />
</NoData>
);
} else if (s.kind === "noExpression") {
return <NoData label="No Expression" />;
return <NoData>No Expression Entered</NoData>;
} else if (s.kind === "noDebugSession") {
return <NoData label="No Debug Session" />;
return <NoData>No Active Debug Session</NoData>;
} else if (s.kind === "data") {
const vis = this.props.model.visualizations;
if (!vis || !vis.visualization) {
return <NoData label="No Visualization" />;
return <NoData>No Visualization Available</NoData>;
}
return vis.visualization.render();
@@ -34,3 +39,31 @@ export class Visualizer extends React.Component<{ model: Model }> {
}
}
}
function Message(props: { message: FormattedMessage }): React.ReactElement {
if (typeof props.message === "string") {
return <span>{props.message}</span>;
} else if (props.message.kind === "list") {
return (
<div>
{props.message.items.map((i, idx) => (
<p>
<Message key={idx} message={i} />
</p>
))}
</div>
);
} else if (props.message.kind === "inlineList") {
return (
<div>
{props.message.items.map((i, idx) => (
<Message key={idx} message={i} />
))}
</div>
);
} else if (props.message.kind === "code") {
return <pre>{props.message.content}</pre>;
}
throw new Error("Bug");
}

17
webview/src/style.scss
View File

@@ -139,18 +139,19 @@ body {
width: 100%;
height: 100%;
rect {
fill: var(--vscode-editor-background);
}
line {
stroke: gray;
}
}
text {
fill: var(--vscode-editor-foreground);
stroke-width: 0px;
}
.part-content-inner {
background: var(--vscode-editor-background);
color: var(--vscode-editor-foreground);
}
pre {
margin-top: 4px;
margin-bottom: 4px;
}
}

5
yarn.lock
View File

@@ -92,11 +92,6 @@
stack-trace "^0.0.10"
ws "^7.0.0"
"@hediet/semantic-json@0.1.0":
version "0.1.0"
resolved "https://registry.yarnpkg.com/@hediet/semantic-json/-/semantic-json-0.1.0.tgz#ca3831778f1e59e555d0112decd5fe598437fdd3"
integrity sha512-lNdXabUmyxXnysXadTKyiKK9ik5L8b9SXu/QshgvE271QObPtp2Ubmh+rLNNCEAO65DE2VAxcesWmRKYfaQSJg==
"@hediet/std@^0.6.0":
version "0.6.0"
resolved "https://registry.yarnpkg.com/@hediet/std/-/std-0.6.0.tgz#f7d2ffc1180ecef6ff272d0d6780f0c0d9337e4e"