[dev-overlay] highlight errored code line for runtime errors (#77078)
### What
In the runtime error code frame display, since there's usually a errored
line we highlighted, we want to highlight the certain that line to give
the better visibility.
We already know each token in the highlighted code frame but it lacks of
the concept of "line". I now parse the code frame leading tokens and
group them into lines, in order to apply the certain class name or
attributes to that line for styling purpose.
This PR wraps each line of code in a `div`, it will have 1 - 2 new
attributes.
* If it's a source code line, which is not just highlight mark like `^`,
it will have `data-nextjs-codeframe-line="<line number>"`
* if it's the line that errored in stack frame, it will have
`data-nextjs-codeframe-line--errored="true"`
And we apply the red background styling to the highlighted lines
| After | Before |
|:---|:--- |
|
|
|
Closes NDX-975
---------
Co-authored-by: rauno <freiberggg@gmail.com>
next.js
23373ced - [dev-overlay] highlight errored code line for runtime errors (#77078)
