Commit Graph

2 Commits

Author SHA1 Message Date
Niklas Mischkulnig 9b8a7a1055 Turbopack: improve issue printing colors (#94858)
1. Align the code highlight marker color with the issue severity
2. Make the issue title colored
3. Prefix issues with `Warning` or `Error`


<img width="1383" height="862" alt="Bildschirmfoto 2026-06-16 um 18 59
03"
src="https://github.com/user-attachments/assets/f98c606d-4ea8-40c2-836d-e395f1df904c"
/>


<img width="1039" height="450" alt="Bildschirmfoto 2026-06-16 um 19 03
39"
src="https://github.com/user-attachments/assets/2747f914-0587-4178-a87d-344f24715c96"
/>



<details>
<summary>Old</summary>

<img width="1267" height="745" alt="Bildschirmfoto 2026-06-16 um 17 04
35"
src="https://github.com/user-attachments/assets/837739ff-82f7-4ea2-8767-ca7d866a8570"
/>

</details>
2026-06-16 21:29:37 +02:00
Luke Sandberg ce14ca88a4 Reimplement code frame rendering in native code (#85592)
## What

Replaces the `@babel/code-frame` dependency with a new Rust-based implementation (`next-code-[frame](https://github.com/arthurprs/qfilter/pull/20#issuecomment-3986882055)` crate) for rendering code frames in error messages.

### Why

- **Crash fix**: `@babel/code-frame` uses the `js-tokens` library for syntax highlighting, which has [known issues](https://github.com/lydell/js-tokens?tab=readme-ov-file#known-failures) with large string literals and long lines. This can cause Next.js to throw RangeErrors when rendering errors, hiding the original issue!
- **Long line support**: The old implementation had no concept of terminal width, dumping entire lines into the output. The new implementation uses "horizontal scrolling" — truncating lines and centering the error location in the visible window.
- **Performance**: The Rust implementation only processes the visible line range (typically ~6 lines), not the entire file. Syntax highlighting uses a skip-scan heuristic to start tokenizing near the visible window rather than from byte 0.
- **Dependency reduction**: Drops the semi-unmaintained `@babel/code-frame` bundled dependency in favor of code we control.

### Benchmarks

In-process benchmarks comparing `render_code_frame()` (Rust, via criterion) against `codeFrameColumns()` (Babel, via hrtime with DCE prevention). Both have syntax highlighting and color output enabled. No process startup or file I/O is included in the measurement.

| Scenario | `next-code-frame` (Rust) | `@babel/code-frame` | Speedup |
|---|---|---|---|
| Small file (~490 lines TSX) | **5.4 µs** | 507 µs | **~94x** |
| Large file (~39k lines JS) | **143 µs** | 82.9 ms | **~580x** |
| Large file minified | **51 µs** | - | **-** |

The gap widens with file size because Babel's `highlight()` runs a regex tokenizer over the **entire source** before slicing to the visible window, while the Rust implementation uses a windowed line index and skip-scan heuristic — only processing the visible window regardless of file size.  However, for minified files we do end up tokenizing the whole thing so we end up being only 8x faster

### How

- New `crates/next-code-frame/` Rust crate with:
  - Frame rendering with terminal-width-aware horizontal scrolling
  - Regex-based syntax highlighting (matching Babel's color scheme)
  - Skip-scan heuristic for O(1)-ish highlighting regardless of file size
  - Windowed line index that only scans/stores offsets for the visible region
  - Comprehensive test suite (800+ lines)
- Exposed via both NAPI (native) and WASM bindings
- JS wrappers in `packages/next/src/shared/lib/errors/`:
  - `code-frame.ts` — primary wrapper using native bindings
  - `optional-code-frame.ts` — graceful fallback returning `undefined` if bindings are unavailable
- All existing callsites (`diagnosticFormatter`, `parseScss`, dev overlay, turbopack utils) updated
- for `patch-error-inspect.ts` i adopted an `injection` style approach to avoid coupling to the native dependency

### Concerns / review focus areas

- **Reliability**: The regex-based tokenizer is best-effort and language-agnostic — it should never crash on invalid syntax, but highlighting accuracy may differ from Babel's `js-tokens` in edge cases.
- **Native dependency**: This moves code frame rendering into the native binary. Performance should be better, but worth verifying there are no regressions in environments where native bindings behave differently (e.g. WASM fallback path).
- **Regressions**: The output format and color scheme closely match Babel's, but there may be subtle differences. The horizontal scrolling behavior is new.

Fixes #85357
Closes PACK-5754
2026-03-03 04:59:11 -08:00