🔧 Add robust error handling for Monaco Editor

Alex J Lennon · Alex J Lennon · commit efb190c4de21 · 2025-09-06T10:47:14.000+01:00
- Added error handling and fallback for Monaco Editor loading failures
- Added fallback textarea when Monaco Editor fails to initialize
- Added console error logging for debugging CDN issues
- Improved CodeEditor component resilience
- Added error recovery messaging for users

This should resolve the 'unhandled error' issue on the deployed site
and provide better user experience when Monaco Editor CDN is unavailable.
diff --git a/src/web-tutorial/CSharpTutorial/Components/CodeEditor.razor b/src/web-tutorial/CSharpTutorial/Components/CodeEditor.razor
@@ -20,6 +20,13 @@
         </div>
         <div class="card-body p-0">
             <div id="@editorId" style="height: @Height; width: 100%;"></div>
+            @if (output.Any(o => o.Contains("Error loading code editor")))
+            {
+                <div class="p-3">
+                    <textarea class="form-control" style="height: @Height; font-family: 'Consolas', 'Monaco', monospace;" 
+                              @bind="fallbackCode" placeholder="Code editor failed to load. You can still view the code here.">@InitialCode</textarea>
+                </div>
+            }
         </div>
     </div>
     
@@ -60,13 +67,24 @@
     private List<string> output = new();
     private bool isRunning = false;
     private string originalCode = "";
+    private string fallbackCode = "";
     
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
             originalCode = InitialCode;
-            await JSRuntime.InvokeVoidAsync("codeEditor.initializeEditor", editorId, InitialCode, ReadOnly);
+            fallbackCode = InitialCode;
+            try
+            {
+                await JSRuntime.InvokeVoidAsync("codeEditor.initializeEditor", editorId, InitialCode, ReadOnly);
+            }
+            catch (Exception ex)
+            {
+                output.Add($"Error loading code editor: {ex.Message}");
+                output.Add("Please refresh the page or check your internet connection.");
+                StateHasChanged();
+            }
         }
     }
     
diff --git a/src/web-tutorial/CSharpTutorial/wwwroot/index.html b/src/web-tutorial/CSharpTutorial/wwwroot/index.html
@@ -12,7 +12,7 @@
     <link href="CSharpTutorial.styles.css" rel="stylesheet" />
     
     <!-- Monaco Editor -->
-    <script src="https://unpkg.com/monaco-editor@0.44.0/min/vs/loader.js"></script>
+    <script src="https://unpkg.com/monaco-editor@0.44.0/min/vs/loader.js" onerror="console.error('Failed to load Monaco Editor loader')"></script>
 </head>
 
 <body>
diff --git a/src/web-tutorial/CSharpTutorial/wwwroot/js/codeEditor.js b/src/web-tutorial/CSharpTutorial/wwwroot/js/codeEditor.js
@@ -4,9 +4,10 @@ window.codeEditor = {
     
     // Initialize Monaco Editor
     initializeEditor: function(containerId, initialCode, readOnly = false) {
-        return new Promise((resolve) => {
-            require.config({ paths: { vs: 'https://unpkg.com/monaco-editor@0.44.0/min/vs' } });
-            require(['vs/editor/editor.main'], function () {
+        return new Promise((resolve, reject) => {
+            try {
+                require.config({ paths: { vs: 'https://unpkg.com/monaco-editor@0.44.0/min/vs' } });
+                require(['vs/editor/editor.main'], function () {
                 const editor = monaco.editor.create(document.getElementById(containerId), {
                     value: initialCode,
                     language: 'csharp',
@@ -21,9 +22,16 @@ window.codeEditor = {
                     wordWrap: 'on'
                 });
                 
-                window.codeEditor.editors[containerId] = editor;
-                resolve(editor);
-            });
+                    window.codeEditor.editors[containerId] = editor;
+                    resolve(editor);
+                }, function(error) {
+                    console.error('Failed to load Monaco Editor:', error);
+                    reject(error);
+                });
+            } catch (error) {
+                console.error('Error initializing Monaco Editor:', error);
+                reject(error);
+            }
         });
     },
     

-Original file line number
+Diff line change
     <link href="CSharpTutorial.styles.css" rel="stylesheet" />
     <!-- Monaco Editor -->
 -    <script src="https://unpkg.com/[email protected]/min/vs/loader.js"></script>
 +    <script src="https://unpkg.com/[email protected]/min/vs/loader.js" onerror="console.error('Failed to load Monaco Editor loader')"></script>
 </head>
 <body>