Improve logs and trace for [vite] Internal server error: undefined

[LeoWanty]

Which @angular/* package(s) are relevant/related to the feature request?

No response

Description

Hi,

I had a lot of troubles debuging a [vite] Internal server error: undefined caused by an unvalid url using the HttpClient. The problem is more general though.

The logs are far too unprecise to help finding the piece of code at fault. The traceback is not deep enough to recover the call sequence too. Plus, async calls and the observers nature make even more hazardous the use of console.log to investigate.

In my case, I simply got such tracebacks at first :

00:48:54 [vite] Internal server error: undefined
      at AbortSignal.abortHandler (C:\Users\Someone\WebstormProjects\my-project\.angular\cache\19.2.10\my-project\vite\deps_ssr\chunk-ZONHDKL3.js:10329:14)
      at [nodejs.internal.kHybridDispatch] (node:internal/event_target:827:20)
      at AbortSignal.dispatchEvent (node:internal/event_target:762:26)
      at runAbort (node:internal/abort_controller:447:10)
      at abortSignal (node:internal/abort_controller:433:3)
      at AbortController.abort (node:internal/abort_controller:466:5)
      at AbortSignal.abort (node:internal/deps/undici/undici:9536:14)
      at [nodejs.internal.kHybridDispatch] (node:internal/event_target:827:20)
      at AbortSignal.dispatchEvent (node:internal/event_target:762:26)
      at runAbort (node:internal/abort_controller:447:10) (x18)
TypeError [ERR_INVALID_ARG_TYPE]: The "str" argument must be of type string. Received undefined
    at stripVTControlCharacters (node:internal/util/inspect:2480:3)
    at prepareError (file:///C:/Users/Someone/WebstormProjects/my-project/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DbCvTk3B.js:20391:14)
    at logError (file:///C:/Users/Someone/WebstormProjects/my-project/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DbCvTk3B.js:20422:10)
    at viteErrorMiddleware (file:///C:/Users/Someone/WebstormProjects/my-project/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DbCvTk3B.js:20427:5)
    at call (file:///C:/Users/Someone/WebstormProjects/my-project/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DbCvTk3B.js:22742:7)
    at next (file:///C:/Users/Someone/WebstormProjects/my-project/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DbCvTk3B.js:22690:5)
    at call (file:///C:/Users/Someone/WebstormProjects/my-project/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DbCvTk3B.js:22755:3)
    at next (file:///C:/Users/Someone/WebstormProjects/my-project/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DbCvTk3B.js:22690:5)
    at call (file:///C:/Users/Someone/WebstormProjects/my-project/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DbCvTk3B.js:22755:3)
    at next (file:///C:/Users/Someone/WebstormProjects/my-project/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DbCvTk3B.js:22690:5)

At some point, I did remove a catchError in my HttpClient.get(url).pipe by accident and discovered the cause of the previous error (see the missing / in input):

ERROR TypeError: Invalid URL
    at new URL (node:internal/url:818:25)
    at relativeUrlsTransformerInterceptorFn (C:\Users\Someone\WebstormProjects\my-project\.angular\cache\19.2.10\my-project\vite\deps_ssr\chunk-QWZ53OKI.js:16370:18)
    at eval (C:\Users\Someone\WebstormProjects\my-project\.angular\cache\19.2.10\my-project\vite\deps_ssr\chunk-N34X6RCX.js:1434:84)
    at runInInjectionContext (C:\Users\Someone\WebstormProjects\my-project\.angular\cache\19.2.10\my-project\vite\deps_ssr\chunk-LOFXQD7Y.js:2257:12)
    at eval (C:\Users\Someone\WebstormProjects\my-project\.angular\cache\19.2.10\my-project\vite\deps_ssr\chunk-N34X6RCX.js:1434:67)
    at eval (C:\Users\Someone\WebstormProjects\my-project\angular\cache\19.2.10\my-project\vite\deps_ssr\chunk-N34X6RCX.js:1434:137)
    at transferCacheInterceptorFn (C:\Users\Someone\WebstormProjects\my-project\.angular\cache\19.2.10\my-project\vite\deps_ssr\chunk-N34X6RCX.js:2417:10)
    at eval (C:\Users\Someone\WebstormProjects\my-project\.angular\cache\19.2.10\my-project\vite\deps_ssr\chunk-N34X6RCX.js:1434:84)
    at runInInjectionContext (C:\Users\Someone\WebstormProjects\my-project\.angular\cache\19.2.10\my-project\vite\deps_ssr\chunk-LOFXQD7Y.js:2257:12)
    at eval (C:\Users\Someone\WebstormProjects\my-project\.angular\cache\19.2.10\my-project\vite\deps_ssr\chunk-N34X6RCX.js:1434:67) {
  code: 'ERR_INVALID_URL',
  input: 'https://localhost:8000my_url',
  base: 'http://localhost:4200/'
}

Notice that in the case of an HttpClient, it is very common to catchError to feed with default data. Like in the following:

  getData(): Observable<any[]> {
    return this.httpClient.get<any[]>(this.apiUrl).pipe(
      catchError(() => of(defaultData)),
      shareReplay(1)
    );
  }

Proposed solution

If you have any way of making the logs or the traceback more explicit when vite fails with Internal server error: undefined, it would be of great help !

Alternatives considered

If there is some tooling helping the debug of Vite, you may add some documentation or a blog post.

[JoostK]

The culprit here is catchError(() => of(defaultData)) as that effectively ignores the error, hiding the root cause.

Could you please include a reproduction, as it's not entirely clear to me where the Vite error originates (i.e. client vs server) . The vite error stack trace seems somewhat unrelated to the invalid URL exception; it occurs during error logging presumably without error message.

[LeoWanty]

Hi !

Thanks for the quick response !

There is a short example for the app.component.ts, that reproduce the error.

Don't hesitate to request some more details.

import { Component, Injectable } from '@angular/core';
import { AsyncPipe, NgIf } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { of } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  private defaultResponse = "Hello world! Default message when not getting data"


  constructor(private http: HttpClient) {}
  getData(url:string) {
    return this.http.get(url).pipe(
      catchError(() => of(this.defaultResponse)),
    );
  }
}

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="data$ | async as data">
      <pre>{{ data }}</pre>
    </div>
  `,
  imports: [
    AsyncPipe,
    NgIf
  ]
})
export class AppComponent {
  private url = 'https://example.com';  // <=== Change value for an unvalid url like `http:` -> error appears
  data$ = this.dataService.getData(this.url);

  constructor(private dataService: DataService) {}
}

---

Other imported file contents in my project :

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));

// app.config
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideClientHydration(),
    provideHttpClient(withFetch())
  ]
};

// app.routes
import { Routes } from '@angular/router';

export const routes: Routes = [];

[JoostK]

I created a minimal CLI project with the above snippets, with the important note that SSR needs to be enabled.

The vite errors [vite] Internal server error: undefined and its cause TypeError [ERR_INVALID_ARG_TYPE]: The "str" argument must be of type string. Received undefined are because of this line:

angular-cli/packages/angular/ssr/src/utils/promise.ts

Line 30 in 505c836

new DOMException(`${errorMessagePrefix} was aborted.\n${signal.reason}`, 'AbortError'),

with the DOMException presumably not having a message property. I'd classify that as vite bug, as promises may be rejected with any value and therefore aren't necessarily Error instances with message property.

Interestingly, this stack trace occurs very frequently and no page load in a browser is required; I suppose this happens during pre-rendering of the root page, given that the following logging is output when changing the DOMException to Error:

Error: Request for: http://localhost:4200/ was aborted.
TimeoutError: The operation was aborted due to timeout
    at AbortSignal.abortHandler (/Users/joost/Development/Github/angular/repros/ng61198-2/.angular/cache/19.2.11/ng61198-2/vite/deps_ssr/chunk-7KB24Z5A.js:10330:14)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:827:20)
    at AbortSignal.dispatchEvent (node:internal/event_target:762:26)
    at runAbort (node:internal/abort_controller:447:10)
    at abortSignal (node:internal/abort_controller:433:3)
    at AbortController.abort (node:internal/abort_controller:466:5)
    at AbortSignal.abort (node:internal/deps/undici/undici:9536:14)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:827:20)
    at AbortSignal.dispatchEvent (node:internal/event_target:762:26)
    at runAbort (node:internal/abort_controller:447:10)

/cc @alan-agius4

[teoeugene]

Hi, we have this similar error as in the original post after we updated our SSR app from Angular 17 to 19. There were no such errors in the update from 17 to 18, but shows up after updating to 19. We can't trace where this issue originates. Both errors below shows up in the console and the 2nd error shows up in the browser when the refresh fails:

First:

[vite] Internal server error: undefined
      at AbortSignal.abortHandler (D:\redacted\.angular\cache\19.2.10\main\vite\deps_ssr\chunk-L3V3PDYL.js:10329:14)
      at [nodejs.internal.kHybridDispatch] (node:internal/event_target:827:20)
      at AbortSignal.dispatchEvent (node:internal/event_target:762:26)
      at runAbort (node:internal/abort_controller:447:10)
      at abortSignal (node:internal/abort_controller:433:3)
      at AbortController.abort (node:internal/abort_controller:466:5)
      at AbortSignal.abort (node:internal/deps/undici/undici:9536:14)
      at [nodejs.internal.kHybridDispatch] (node:internal/event_target:827:20)
      at AbortSignal.dispatchEvent (node:internal/event_target:762:26)
      at runAbort (node:internal/abort_controller:447:10)

Second:

TypeError [ERR_INVALID_ARG_TYPE]: The "str" argument must be of type string. Received undefined
    at stripVTControlCharacters (node:internal/util/inspect:2480:3)
    at prepareError (file:///D:/redacted/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DbCvTk3B.js:20391:14)
    at logError (file:///D:/redacted/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DbCvTk3B.js:20422:10)
    at viteErrorMiddleware (file:///D:/redacted/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DbCvTk3B.js:20427:5)
    at call (file:///D:/redacted/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DbCvTk3B.js:22742:7)
    at next (file:///D:/redacted/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DbCvTk3B.js:22690:5)
    at call (file:///D:/redacted/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DbCvTk3B.js:22755:3)
    at next (file:///D:/redacted/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DbCvTk3B.js:22690:5)
    at call (file:///D:/redacted/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DbCvTk3B.js:22755:3)
    at next (file:///D:/redacted/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DbCvTk3B.js:22690:5)

The problem sort of "goes away" after forcing a browser refresh multiple times but when ng serve is restarted, it comes back again.

We don't have any similar code as @LeoWanty that might have cause it that we could try to debug and resolve.

[alan-agius4]

I did some digging and found that the root cause of the undefined error is the outdated Domino DomException, which results in .message being undefined.

As for the issue with multiple logs, I still need to investigate that further.