Creating custom code frame from thrown error

[Aaronius]

Hey there. I have a scenario where I'd like to create my own code frame based on error information coming from Parcel. When I say "code frame" here, I'm talking about the produced string that contains a snippet of problematic code; I'm not referring to a JS object containing location and code information that is used to produce a code frame. In other words, when an error is thrown from Parcel, I want to take information from that error and pass it through to Babel's code frame package to produce a code frame.

You might ask why we're using Babel to create a code frame instead of using the code frame that Parcel provides. The primary reason is that, aside from Parcel, we have a few other actors in our system that can generate errors based on code (babel's parser being one of them, Terser being another). These errors are displayed to users of our build system and we want to produce consistent-looking messages and code frames (as close as possible) to present to users of our build system.

Given an error coming from Parcel, I find it a bit burdensome to access what I need in order to create my own code frame. For example, it seems that error.diagnostics.*.codeFrame.code may not exist. I haven't seen this actually be the case yet, but that's what https://v2.parceljs.org/plugin-system/logger/#properties seems to suggest as well as the Parcel's own prettifying code:

parcel/packages/core/utils/src/prettyDiagnostic.js

Lines 52 to 55 in c4e494f

	let code =
	codeFrame.code ??
	(options &&
	(await options.inputFS.readFile(nullthrows(filePath), 'utf8')));

This puts the burden on me, the Parcel consumer, to basically duplicate this code ^^^ in my own code. It would make my life simpler if I could rely on error.diagnostics.*.codeFrame.code always existing. Is this a reasonable request? If so, I can log an issue.

I'm also not really sure if I'm guaranteed that error.diagnostics.*.codeFrame.codeHighlights will exist if error.diagnostics.*.codeFrame exists. I think so? Right now I've got guards in place so my code doesn't blow up if codeHighlights doesn't exist on codeFrame or if codeHighlights doesn't have any items in the array. Speaking of which, codeHighlights isn't always an array; sometimes it's an object. Because of this, I also have to duplicate this in my code:

parcel/packages/core/utils/src/prettyDiagnostic.js

Lines 48 to 50 in c4e494f

	let highlights = Array.isArray(codeFrame.codeHighlights)
	? codeFrame.codeHighlights
	: [codeFrame.codeHighlights];

I've logged that particular issue here: #5078.

Other questions that come up but I haven't found answers for in the docs: Will error.diagnostics always be defined? Will it always be an array? Will it always have at least one diagnostic object in it? Is this all up to plugins to decide or does Parcel enforce or normalize any of this?

Thanks for any insights.

[mischnic]

The primary reason is that, aside from Parcel, we have a few other actors in our system that can generate errors based on code (babel's parser being one of them, Terser being another). These errors are displayed to users of our build system and we want to produce consistent-looking messages and code frames (as close as possible) to present to users of our build system.

That is actually why we did our own codeframe as well, to normalize Babel's and Terser's codeframe format into one 😉

This puts the burden on me, the Parcel consumer, to basically duplicate this code ^^^ in my own code. It would make my life simpler if I could rely on error.diagnostics.*.codeFrame.code always existing. Is this a reasonable request? If so, I can log an issue.

I remember adding this behaviour and the reason is rather simple: if the function that wants to throw a diagnostic only knows the filepath and not the asset's code, it has to await fs.readFile(...) - thus making it not possible to throw errors in non-async functions (e.g. a babel-traverse visitor).

Will error.diagnostics always be defined?

A "normal" error doesn't have this property. Only if a ThrowableDiagnostic was thrown.

I'm also not really sure if I'm guaranteed that error.diagnostics..codeFrame.codeHighlights will exist if error.diagnostics..codeFrame exists. I think so?

According to the Flow types, yes:

parcel/packages/core/diagnostic/src/diagnostic.js

Line 27 in c4e494f

codeHighlights: DiagnosticCodeHighlight | Array<DiagnosticCodeHighlight>,

[Aaronius]

Unfortunately, I'm not familiar enough with Reporter.report to answer your question specifically, but if I catch an error from Parcel and the error has a diagnostic on it, and the diagnostic has a code frame object on it, then it would be great to have the code provided on the code frame object itself, rather than my code having to duplicate this:

parcel/packages/core/utils/src/prettyDiagnostic.js

Lines 52 to 55 in c4e494f

	let code =
	codeFrame.code ??
	(options &&
	(await options.inputFS.readFile(nullthrows(filePath), 'utf8')));

In other words, if I receive a code frame object from Parcel, I would love a guarantee that codeFrame.code exists. After all, what's a code frame without code?

[mischnic]

The two questions contained in my previous post:

I would love a guarantee that codeFrame.code exists

Yes, this is what I meant

2. You're not using a reporter but the API (https://v2.parceljs.org/features/parcel-api/), right?

code frame object from Parcel

[Aaronius]

Yeah, that's correct. I'm using the API and not the reporter. I should have been more explicit about that.

[Aaronius]

@mischnic do you want me to file an issue for this?

[mischnic]

Sure 👍