我在日志中看到一个错误，我希望为我的Blazor服务器端应用程序跟踪。自2月份部署以来，我以这样或那样的方式看到了这一点。这似乎断断续续地发生，而且我似乎无法在我自己的本地开发环境或我的测试、登台和生产环境中重现它。
换句话说，这似乎是一个罕见的，间歇性的，但令人讨厌的问题。如果可能的话，我想把它修好。
这发生在OnAfterRenderAsync调用中，它调用IJsRuntime.Invoke*Async方法。它将产生如下消息:
Microsoft.JSInterop.JSException: window.$ is not a function
TypeError: window.$ is not a function
at Module.NewDocumentElement (https://<site>/_content/DragonSpark.Presentation//Environment/Browser/Document/DocumentElement.js:11:43)
at https://<site>/_framework/blazor.server.js:1:3501
at new Promise (<anonymous>)
at kt.beginInvokeJSFromDotNet (https://<site>/_framework/blazor.server.js:1:3475)
at https://<site>/_framework/blazor.server.js:1:72001
at Array.forEach (<anonymous>)
at kt._invokeClientMethod (https://<site>/_framework/blazor.server.js:1:71987)
at kt._processIncomingData (https://<site>/_framework/blazor.server.js:1:70029)
at vt.connection.onreceive (https://<site>/_framework/blazor.server.js:1:64432)
at WebSocket.o.onmessage (https://<site>/_framework/blazor.server.js:1:48766)
at async ValueTask<TValue> Microsoft.JSInterop.JSRuntime.InvokeAsync<TValue>(long targetInstanceId, string identifier, object[] args)
at async ValueTask<TOut> DragonSpark.Model.Operations.SelectingResult<TIn, TOut>.Get() in D:/a/1/s/Framework/DragonSpark/Model/Operations/SelectingResult.cs:line 23
at async ValueTask<TOut> DragonSpark.Model.Operations.OperationResulting<TIn, TOut>.Get() in D:/a/1/s/Framework/DragonSpark/Model/Operations/OperationResulting.cs:line 30
at async Task DragonSpark.Presentation.Components.Dialogs.DialogClassMonitor.OnAfterRenderAsync(bool firstRender) in D:/a/1/s/Framework/DragonSpark.Presentation/Components/Dialogs/DialogClassMonitor.razor:line 39
似乎jQuery在执行时没有加载，但它被列为我的文档的head作为我的文档的第一个script标签:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<base href="/" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#b5dce8">
<!-- CSS links (omitted) -->
<!-- CDN-based Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.syncfusion.com/blazor/20.1.52/syncfusion-blazor.min.js" type="text/javascript"></script>
<!-- Meta/OpenGraph links -->
</head>
我也试图将我的CDN脚本标签移动到正文，但这似乎也没有任何好处。错误仍然会发生——虽然很少，但仍然会发生。
任何指导和/或建议在这里解决这个棘手的问题，我将不胜感激。
我可以通过多次刷新我的Blazor服务器端应用程序在我的本地机器上重现这一过程。大约每20-30次尝试中就有一次会产生这个错误。
原来这与Blazor无关，但它似乎是浏览器的问题。来自code.jquery.com的js文件根本没有加载，尽管它是我的head标签中的第一个脚本。它没有出现在开发人员工具的Sources选项卡中。
我做了三件事来解决这个问题:
- 移动我的CDN脚本标签作为我的头标签的第一个资源。之前他们追求的是CSS文件。他们现在是第一个。
- 使用
slim.min.js变体如下所示(这似乎与文件大小有关) - 使用如下所示的两个标签:
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" type="text/javascript"></script>
尽管文档中有两个标签，但Sources选项卡只显示一个。此外，如果一个标签加载失败，另一个标签将取代它的位置。这似乎是Chrome的一个bug或一些奇怪的事情。也许我会向Google报告。
当您从Blazor调用Jsinterop调用.js脚本时，Blazor无法理解查询选择器'$'符号。你需要做的是替换
$() -> document keyword
ex document.getElementById("foo")
在OnAfterRenderAsync中调用的脚本