Wait for the blob editor before switching edit mode tabs
What does this MR do and why?
Fixes uncaught TypeErrors in the single file editor when a user switches the Write / Preview tabs before the editor has loaded.
EditBlob in app/assets/javascripts/blob_edit/edit_blob.js called configureMonacoEditor() without keeping the promise, then bound the tab click handler synchronously. configureMonacoEditor is async: for an existing file it first awaits the raw file request, then creates the Monaco instance and assigns this.editor.
A click on a tab before that request resolved ran the handler with this.editor still undefined. For the Preview tab the handler calls this.editor.getValue() to post the content to the preview endpoint, and it ends with this.editor.focus(). Both threw:
Uncaught TypeError: Cannot read properties of undefined (reading 'getValue')Uncaught TypeError: Cannot read properties of undefined (reading 'focus')
The pane switched, but the preview content was never requested.
In CI this logged the errors in 4 examples of spec/features/projects/files/template_selector_menu_spec.rb, which toggle the preview right after the page loads.
Changes made:
app/assets/javascripts/blob_edit/edit_blob.js- Keep the editor promise in
editorReady. Await it at the start of the tab click handler and intoggleSoftWrap, which has the same race throughthis.editor.updateOptions. - Catch a failed raw file request in
configureMonacoEditor. Show theBLOB_EDITOR_ERRORalert and return, soeditorReadyalways settles. The tab handler returns early when there is no editor.
- Keep the editor promise in
spec/frontend/blob_edit/edit_blob_spec.js— new block "before the editor has loaded". It keeps the raw file request pending and covers:- a Preview click, which makes no preview request until the file resolves, then renders the preview
- a soft wrap click, which calls
updateOptionsonly once the file resolves - a failed load, which creates an alert, and later tab or soft wrap clicks do not throw
How to set up and validate locally
- Open any file in a project and click Edit > Edit single file.
- In DevTools, throttle the network to "Slow 3G" and reload.
- Click the Preview tab as soon as the tabs appear, before the editor content loads.
- Check the console has no
getValueorfocusTypeError, and that the preview renders once the file has loaded. - Remove the throttling and check Write and Preview still switch.
Screenshots
Both shots: Preview clicked while the raw file request was held, then the request released.
| Before | After |
|---|---|
![]() |
![]() |
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
- I have evaluated the MR acceptance checklist for this MR.
References
- Addresses one entry of #628901 (browser console error catalogue, section B)
- Errors surfaced by !255207 (closed) (feature specs fail on console errors)
- Stacked follow-up: !255539 (merged) (commit changes button has the same race; targets this branch)
- Sibling fixes from the same catalogue: !255305 (merged), !255309 (merged), !255311 (merged), !255313 (merged), !255315 (merged), !255316 (merged), !255319 (merged)

