Client streams-in the NotFoundPage if it's provided to the Router.

Author: ilonatommy

src/Components/Components/src/NavigationManager.cs

@@ -54,15 +54,15 @@ public event EventHandler<NotFoundEventArgs> OnNotFound
 
     private EventHandler<NotFoundEventArgs>? _notFound;
 
-    private static readonly NotFoundEventArgs _notFoundEventArgs = new NotFoundEventArgs();
-
     // For the baseUri it's worth storing as a System.Uri so we can do operations
     // on that type. System.Uri gives us access to the original string anyway.
     private Uri? _baseUri;
 
     // The URI. Always represented an absolute URI.
     private string? _uri;
     private bool _isInitialized;
+    internal string NotFoundPageRoute { get; set; } = string.Empty;
+    internal Type NotFoundPageType { get; set; } = default!;
 
     /// <summary>
     /// Gets or sets the current base URI. The <see cref="BaseUri" /> is always represented as an absolute URI in string form with trailing slash.
@@ -212,7 +212,7 @@ private void NotFoundCore()
         }
         else
         {
-            _notFound.Invoke(this, _notFoundEventArgs);
+            _notFound.Invoke(this, new NotFoundEventArgs(NotFoundPageRoute, NotFoundPageType)); // ToDo: sending only the type would be enough and then we would get the route later
         }
     }
 

src/Components/Components/src/PublicAPI.Unshipped.txt

@@ -6,7 +6,9 @@ Microsoft.AspNetCore.Components.NavigationManager.OnNotFound -> System.EventHand
 Microsoft.AspNetCore.Components.NavigationManager.NotFound() -> void
 Microsoft.AspNetCore.Components.Routing.IHostEnvironmentNavigationManager.Initialize(string! baseUri, string! uri, System.Func<string!, System.Threading.Tasks.Task!>! onNavigateTo) -> void
 Microsoft.AspNetCore.Components.Routing.NotFoundEventArgs
-Microsoft.AspNetCore.Components.Routing.NotFoundEventArgs.NotFoundEventArgs() -> void
+Microsoft.AspNetCore.Components.Routing.NotFoundEventArgs.NotFoundEventArgs(string! url, System.Type! notFoundPageType) -> void
+Microsoft.AspNetCore.Components.Routing.NotFoundEventArgs.NotFoundPageType.get -> System.Type!
+Microsoft.AspNetCore.Components.Routing.NotFoundEventArgs.Path.get -> string!
 Microsoft.AspNetCore.Components.Infrastructure.ComponentStatePersistenceManager.ComponentStatePersistenceManager(Microsoft.Extensions.Logging.ILogger<Microsoft.AspNetCore.Components.Infrastructure.ComponentStatePersistenceManager!>! logger, System.IServiceProvider! serviceProvider) -> void
 Microsoft.AspNetCore.Components.Infrastructure.ComponentStatePersistenceManager.SetPlatformRenderMode(Microsoft.AspNetCore.Components.IComponentRenderMode! renderMode) -> void
 Microsoft.AspNetCore.Components.Infrastructure.RegisterPersistentComponentStateServiceCollectionExtensions

src/Components/Components/src/Routing/NotFoundEventArgs.cs

@@ -8,9 +8,23 @@ namespace Microsoft.AspNetCore.Components.Routing;
 /// </summary>
 public sealed class NotFoundEventArgs : EventArgs
 {
+    /// <summary>
+    /// Gets the path of NotFoundPage.
+    /// </summary>
+    public string Path { get; }
+
+    /// <summary>
+    /// Gets the type of NotFoundPage component.
+    /// </summary>
+    public Type NotFoundPageType { get; }
+
     /// <summary>
     /// Initializes a new instance of <see cref="NotFoundEventArgs" />.
     /// </summary>
-    public NotFoundEventArgs()
-    { }
+    public NotFoundEventArgs(string url, Type notFoundPageType)
+    {
+        Path = url;
+        NotFoundPageType = notFoundPageType;
+    }
+
 }

src/Components/Endpoints/src/Rendering/EndpointHtmlRenderer.EventDispatch.cs

@@ -4,6 +4,7 @@
 using Microsoft.AspNetCore.Components.Endpoints.Rendering;
 using Microsoft.AspNetCore.Components.Rendering;
 using Microsoft.AspNetCore.Components.RenderTree;
+using Microsoft.AspNetCore.Components.Routing;
 using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.WebUtilities;
 using Microsoft.Extensions.DependencyInjection;
@@ -77,21 +78,42 @@ private Task ReturnErrorResponse(string detailedMessage)
             : Task.CompletedTask;
     }
 
-    private void SetNotFoundResponse(object? sender, EventArgs args)
+    private async Task SetNotFoundResponseAsync(string baseUri, NotFoundEventArgs args)
     {
         if (_httpContext.Response.HasStarted)
         {
-            // We're expecting the Router to continue streaming the NotFound contents
+            if (args.NotFoundPageType == null || string.IsNullOrEmpty(args.Path))
+            {
+                throw new InvalidOperationException("The NotFoundPageType and Path must be specified in the NotFoundEventArgs to render NotFoundPage when the response has started.");
+            }
+            var instance = Activator.CreateInstance(args.NotFoundPageType) as IComponent;
+            if (instance == null)
+            {
+                throw new InvalidOperationException($"The type {args.NotFoundPageType.FullName} does not implement IComponent.");
+            }
+            if (_notFoundComponentId == -1)
+            {
+                _notFoundComponentId = AssignRootComponentId(instance);
+            }
+            if (string.IsNullOrEmpty(_notFoundUrl))
+            {
+                _notFoundUrl = $"{baseUri}{args.Path.TrimStart('/')}";
+            }
+            var defaultBufferSize = 16 * 1024;
+            await using var writer = new HttpResponseStreamWriter(_httpContext.Response.Body, Encoding.UTF8, defaultBufferSize, ArrayPool<byte>.Shared, ArrayPool<char>.Shared);
+            using var bufferWriter = new BufferedTextWriter(writer);
+            HandleNotFoundAfterResponseStarted(bufferWriter, _httpContext, _notFoundUrl, _notFoundComponentId);
+            await bufferWriter.FlushAsync();
         }
         else
         {
             _httpContext.Response.StatusCode = StatusCodes.Status404NotFound;
-
-            // When the application triggers a NotFound event, we continue rendering the current batch.
-            // However, after completing this batch, we do not want to process any further UI updates,
-            // as we are going to return a 404 status and discard the UI updates generated so far.
-            SignalRendererToFinishRendering();
         }
+
+        // When the application triggers a NotFound event, we continue rendering the current batch.
+        // However, after completing this batch, we do not want to process any further UI updates,
+        // as we are going to return a 404 status and discard the UI updates generated so far.
+        SignalRendererToFinishRendering();
     }
 
     private async Task OnNavigateTo(string uri)

src/Components/Endpoints/src/Rendering/EndpointHtmlRenderer.Streaming.cs

@@ -226,6 +226,15 @@ private static void HandleExceptionAfterResponseStarted(HttpContext httpContext,
         writer.Write("</template><blazor-ssr-end></blazor-ssr-end></blazor-ssr>");
     }
 
+    private static void HandleNotFoundAfterResponseStarted(TextWriter writer, HttpContext httpContext, string notFoundUrl, int componentId)
+    {
+        writer.Write("<blazor-ssr><template type=\"not-found\"");
+        writer.Write($" componentId=\"{componentId}\"");
+        writer.Write(">");
+        writer.Write(HtmlEncoder.Default.Encode(OpaqueRedirection.CreateProtectedRedirectionUrl(httpContext, notFoundUrl)));
+        writer.Write("</template><blazor-ssr-end></blazor-ssr-end></blazor-ssr>");
+    }
+
     private static void HandleNavigationAfterResponseStarted(TextWriter writer, HttpContext httpContext, string destinationUrl)
     {
         writer.Write("<blazor-ssr><template type=\"redirection\"");

src/Components/Endpoints/src/Rendering/EndpointHtmlRenderer.cs

@@ -52,6 +52,9 @@ internal partial class EndpointHtmlRenderer : StaticHtmlRenderer, IComponentPrer
     // wait for the non-streaming tasks (these ones), then start streaming until full quiescence.
     private readonly List<Task> _nonStreamingPendingTasks = new();
 
+    private int _notFoundComponentId = -1;
+    private string _notFoundUrl = string.Empty;
+
     public EndpointHtmlRenderer(IServiceProvider serviceProvider, ILoggerFactory loggerFactory)
         : base(serviceProvider, loggerFactory)
     {
@@ -85,7 +88,7 @@ internal async Task InitializeStandardComponentServicesAsync(
 
         if (navigationManager != null)
         {
-            navigationManager.OnNotFound += SetNotFoundResponse;
+            navigationManager.OnNotFound += async (sender, args) => await SetNotFoundResponseAsync(navigationManager.BaseUri, args);
         }
 
         var authenticationStateProvider = httpContext.RequestServices.GetService<AuthenticationStateProvider>();

src/Components/Web.JS/src/Rendering/StreamingRendering.ts

@@ -8,6 +8,8 @@ import { synchronizeDomContent } from './DomMerging/DomSync';
 
 let enableDomPreservation = true;
 let navigationEnhancementCallbacks: NavigationEnhancementCallbacks;
+let currentNotFoundRenderAbortController: AbortController | null;
+const acceptHeader = 'text/html; blazor-enhanced-nav=on';
 
 export function attachStreamingRenderingListener(options: SsrStartOptions | undefined, callbacks: NavigationEnhancementCallbacks) {
   navigationEnhancementCallbacks = callbacks;
@@ -75,6 +77,34 @@ class BlazorStreamingUpdate extends HTMLElement {
                 }
               }
               break;
+            case 'not-found':
+              const componentId = node.getAttribute('componentId');
+              if (!componentId) {
+                console.error('Streaming content for not-found response does not have a componentId attribute.');
+                break;
+              }
+              wrapDocumentInStreamingMarkers(componentId);
+              const notFoundUrl = toAbsoluteUri(node.content.textContent!);
+
+              if (componentId) {
+                currentNotFoundRenderAbortController?.abort();
+                currentNotFoundRenderAbortController = new AbortController();
+                const abortSignal = currentNotFoundRenderAbortController.signal;
+                fetch(notFoundUrl, Object.assign(<RequestInit>{
+                  signal: abortSignal,
+                  mode: 'no-cors',
+                  headers: {
+                    'accept': acceptHeader,
+                  },
+                }, undefined))
+                  .then(response => response.text())
+                  .then(html => {
+                    const docFrag = document.createRange().createContextualFragment(html);
+                    insertStreamingContentIntoDocument(componentId, docFrag);
+                  })
+                  .catch(error => console.error('Failed to fetch not-found content:', error));
+              }
+              break;
             case 'error':
               // This is kind of brutal but matches what happens without progressive enhancement
               replaceDocumentWithPlainText(node.content.textContent || 'Error');
@@ -86,6 +116,22 @@ class BlazorStreamingUpdate extends HTMLElement {
   }
 }
 
+function wrapDocumentInStreamingMarkers(componentIdAsString: string): void {
+  // Add a comment before the <head>
+  const markerStart = document.createComment(`bl:${componentIdAsString}`);
+  const head = document.querySelector('head');
+  document.documentElement.insertBefore(markerStart, head);
+
+  // Add a comment after the <body> or after the <head> if <body> is null
+  const markerEnd = document.createComment(`/bl:${componentIdAsString}`);
+  const body = document.querySelector('body');
+  if (body && body.parentNode) {
+    body.parentNode.insertBefore(markerEnd, body.nextSibling);
+  } else if (head && head.parentNode) {
+    head.parentNode.insertBefore(markerEnd, head.nextSibling);
+  }
+}
+
 function insertStreamingContentIntoDocument(componentIdAsString: string, docFrag: DocumentFragment): void {
   const markers = findStreamingMarkers(componentIdAsString);
   if (markers) {