Description
While testing project import behavior in Music Blocks, I noticed that loading certain malformed or non-project HTML files causes the import process to fail silently.
The issue happens in:
when the loader detects that the file contains the word "html" and then immediately tries to extract project data using:
Current logic:
if (cleanData.includes('id="codeBlock"')) {
extracted = cleanData.match(
'<div class="code" id="codeBlock">(.+?)</div>'
)[1];
} else {
extracted = cleanData.match(
'<div class="code">(.+?)</div>'
)[1];
}If the loaded HTML file does not contain the expected Music Blocks project <div class="code"> element, match() returns null.
This causes:
TypeError: Cannot read properties of null (reading '1')
The exception is later swallowed by the surrounding try/catch, so the user only sees a blank canvas and the project does not load.
Expected Behavior
If the selected HTML file does not contain valid Music Blocks project data, the loader should fail gracefully and show a user-facing error message instead of crashing internally.
Example:
Cannot find project data in this HTML file.
Current Behavior
Malformed or unrelated HTML files can trigger a silent import failure.
The project loader:
- throws a
TypeError
- stops loading
- leaves the canvas blank
- shows the error only in DevTools console
Steps to Reproduce
- Create an HTML file containing:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
Hello World
</body>
</html>
- Open Music Blocks
- Go to:
-
Select the HTML file
-
Observe:
- project fails to load
- blank canvas remains
- console shows:
TypeError: Cannot read properties of null (reading '1')
Root Cause
The loader assumes that any HTML file containing "html" also contains a valid Music Blocks project data block.
However, the code does not verify that match() actually succeeded before accessing [1].
Suggested Fix
Add a null check before reading the regex capture group:
let matchResult;
if (cleanData.includes('id="codeBlock"')) {
matchResult = cleanData.match(
'<div class="code" id="codeBlock">(.+?)</div>'
);
} else {
matchResult = cleanData.match(
'<div class="code">(.+?)</div>'
);
}
if (!matchResult || !matchResult[1]) {
that.errorMsg(_("Cannot find project data in this HTML file."));
finishLoading();
return;
}
extracted = matchResult[1];The same guard should also be applied to the second identical code path later in activity.js.
Checklist
Description
While testing project import behavior in Music Blocks, I noticed that loading certain malformed or non-project HTML files causes the import process to fail silently.
The issue happens in:
when the loader detects that the file contains the word
"html"and then immediately tries to extract project data using:Current logic:
If the loaded HTML file does not contain the expected Music Blocks project
<div class="code">element,match()returnsnull.This causes:
The exception is later swallowed by the surrounding
try/catch, so the user only sees a blank canvas and the project does not load.Expected Behavior
If the selected HTML file does not contain valid Music Blocks project data, the loader should fail gracefully and show a user-facing error message instead of crashing internally.
Example:
Current Behavior
Malformed or unrelated HTML files can trigger a silent import failure.
The project loader:
TypeErrorSteps to Reproduce
Select the HTML file
Observe:
Root Cause
The loader assumes that any HTML file containing
"html"also contains a valid Music Blocks project data block.However, the code does not verify that
match()actually succeeded before accessing[1].Suggested Fix
Add a null check before reading the regex capture group:
The same guard should also be applied to the second identical code path later in
activity.js.Checklist