1640140 - DEVTOOLS ERROR with Large Regular Expressions

Status: RESOLVED FIXED

(DevTools :: Console, defect, P1)

Description

[tdulcet]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:76.0) Gecko/20100101 Firefox/76.0

Steps to reproduce:

Run console.log() with a very large regular expression. For example, go to https://web.cecs.pdx.edu/tdulcet/autocorrect/ and run console.log(symbolpatterns) in the Console.

I tested in Firefox 78 Nightly, Firefox 76, Firefox 68 ESR and Firefox 60 ESR before creating this bug and was able to produce the issue. No problems in Firefox 56 or in Chrome.

Actual results:

In Firefox 78 Nightly, I get this error: "[DEVTOOLS ERROR] We’re sorry, we couldn’t render the message. This shouldn’t have happened - please file a bug at https://bugzilla.mozilla.org/enter_bug.cgi?product=DevTools&component=Console with the message metadata in the description."

Metadata:
{
"id": "18",
"innerWindowID": null,
"allowRepeating": true,
"source": "console-api",
"timeStamp": 1590142167309,
"type": "log",
"helperType": null,
"level": "log",
"category": null,
"messageText": null,
"parameters": [
{
"type": "object",
"actor": "server0.conn2.child26/obj48",
"class": "RegExp",
"ownPropertyLength": 1,
"extensible": true,
"frozen": false,
"sealed": false,
"displayString": {
"type": "longString",
"actor": "server0.conn2.child26/longstractor49",
"length": 23073,
"initial": "/((100)|(--)|(\(e\))|(\.\.\.)|(::)|(:=)|(=)|(\+-)|(-\+)|(<<)|(<=)|(->)|(>=)|(>>)|(<=>)|(1\/4)|(1\/2)|(3\/4)|(1\/7)|(1\/9)|(1\/10)|(1\/3)|(2\/3)|(1\/5)|(2\/5)|(3\/5)|(4\/5)|(1\/6)|(5\/6)|(1\/8)|(3\/8)|(5\/8)|(7\/8)|(<--)|(<==)|(==>)|(-->)|(<-->)|(<--\|)|(<==\|)|(\|-->)|(\|==>)|(::=)|(__)|(==)|(!=)|(===)|(<-<)|(<<-)|(<-)|(<->)|(->>)|(>->)|(<==>)|(=>)|(>>-)|(>-)|(<>)|(-<)|(-<<)|(<-\|)|(<=\|)|(\/\\)|(\\\/)|(\|->)|(\|=>)|(<~~)|(<~)|()|(~>)|(>)|(<<<)|(<>)|(>>>)|(<\|)|(\|>)|(\\\\)|(\|\|)|(\.\.)|(---)|(\+\+)|(\+\+\+)|(-\|)|(\|)|(\|-)|(\|\|-)|(\|=)|(\|\|=)|(ZZZ)|(<!>)|(\(-\))|(\(\\\))|(\?\?)|(\[\])|(\(\))|(!\?)|(COOL)|(\[COOL\])|(FREE)|(\[FREE\])|(NEW)|(\[NEW\])|(SOS)|(\[SOS\])|(UP!)|(\[UP!\])|(\[BACK\])|(\[END\])|(\[ON!\])|(\[SOON\])|(\[TOP\])|(\[i\])|(\[OK\])|(\[VS\])|(\[x\])|(\[\\])|(:\+1:)|(:-1:)|(\[->\])|(\[<-\])|(\[<->\])|(\[#\])|(\[0\])|(\[1\])|(\[2\])|(\[3\])|(\[4\])|(\[5\])|(\[6\])|(\[7\])|(\[8\])|(\[9\])|(\[10\])|(:o\))|(=\))|(=-\))|(:>)|(:->)|(;p)|(;-p)|(;b)|(;-b)|(\(c\))|(\"
}
}
],
"repeatId": "{"frame":{"source":"moz-extension://3fb88906-3e8d-4be2-b52b-2f9bc5f98376/common/modules/AutocorrectHandler.js","sourceId":"server0.conn2.child26/source31","line":186,"column":12},"groupId":null,"indent":0,"level":"log","messageText":null,"parameters":[{"type":"object","actor":"server0.conn2.child26/obj48","class":"RegExp","ownPropertyLength":1,"extensible":true,"frozen":false,"sealed":false,"displayString":{"type":"longString","actor":"server0.conn2.child26/longstractor49","length":23073,"initial":"/((100)|(--)|(\\(e\\))|(\\.\\.\\.)|(::)|(:=)|(=)|(\\+-)|(-\\+)|(<<)|(<=)|(->)|(>=)|(>>)|(<=>)|(1\\/4)|(1\\/2)|(3\\/4)|(1\\/7)|(1\\/9)|(1\\/10)|(1\\/3)|(2\\/3)|(1\\/5)|(2\\/5)|(3\\/5)|(4\\/5)|(1\\/6)|(5\\/6)|(1\\/8)|(3\\/8)|(5\\/8)|(7\\/8)|(<--)|(<==)|(==>)|(-->)|(<-->)|(<--\\|)|(<==\\|)|(\\|-->)|(\\|==>)|(::=)|(__)|(==)|(!=)|(===)|(<-<)|(<<-)|(<-)|(<->)|(->>)|(>->)|(<==>)|(=>)|(>>-)|(>-)|(<>)|(-<)|(-<<)|(<-\\|)|(<=\\|)|(\\/\\\\)|(\\\\\\/)|(\\|->)|(\\|=>)|(<~~)|(<~)|()|(~>)|(>)|(<<<)|(<>)|(>>>)|(<\\|)|(\\|>)|(\\\\\\\\)|(\\|\\|)|(\\.\\.)|(---)|(\\+\\+)|(\\+\\+\\+)|(-\\|)|(\\|)|(\\|-)|(\\|\\|-)|(\\|=)|(\\|\\|=)|(ZZZ)|(<!>)|(\\(-\\))|(\\(\\\\\\))|(\\?\\?)|(\\[\\])|(\\(\\))|(!\\?)|(COOL)|(\\[COOL\\])|(FREE)|(\\[FREE\\])|(NEW)|(\\[NEW\\])|(SOS)|(\\[SOS\\])|(UP!)|(\\[UP!\\])|(\\[BACK\\])|(\\[END\\])|(\\[ON!\\])|(\\[SOON\\])|(\\[TOP\\])|(\\[i\\])|(\\[OK\\])|(\\[VS\\])|(\\[x\\])|(\\[\\\\])|(:\\+1:)|(:-1:)|(\\[->\\])|(\\[<-\\])|(\\[<->\\])|(\\[#\\])|(\\[0\\])|(\\[1\\])|(\\[2\\])|(\\[3\\])|(\\[4\\])|(\\[5\\])|(\\[6\\])|(\\[7\\])|(\\[8\\])|(\\[9\\])|(\\[10\\])|(:o\\))|(=\\))|(=-\\))|(:>)|(:->)|(;p)|(;-p)|(;b)|(;-b)|(\\(c\\))|(\\"}}],"source":"console-api","type":"log","userProvidedStyles":[],"private":false,"stacktrace":null}",
"stacktrace": null,
"frame": {
"source": "moz-extension://3fb88906-3e8d-4be2-b52b-2f9bc5f98376/common/modules/AutocorrectHandler.js",
"sourceId": "server0.conn2.child26/source31",
"line": 186,
"column": 12
},
"groupId": null,
"errorMessageName": null,
"exceptionDocURL": null,
"cssSelectors": "",
"userProvidedStyles": [],
"notes": null,
"indent": 0,
"prefix": "",
"private": false,
"chromeContext": false,
"hasException": false,
"isPromiseRejection": false
}

In Firefox 68 ESR, the Web Console goes blank, although there is this error in the Browser Console:
Invariant Violation: "Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Btype%2C%20initial%2C%20length%2C%20actor%7D&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings. "
invariant resource://devtools/client/shared/vendor/react-dom.js:33
reactProdInvariant resource://devtools/client/shared/vendor/react-dom.js:63
throwOnInvalidObjectType resource://devtools/client/shared/vendor/react-dom.js:9240
reconcileChildFibers resource://devtools/client/shared/vendor/react-dom.js:9908
reconcileChildrenAtExpirationTime resource://devtools/client/shared/vendor/react-dom.js:10161
reconcileChildren resource://devtools/client/shared/vendor/react-dom.js:10152
updateHostComponent resource://devtools/client/shared/vendor/react-dom.js:10475
beginWork resource://devtools/client/shared/vendor/react-dom.js:10898
performUnitOfWork resource://devtools/client/shared/vendor/react-dom.js:12713
workLoop resource://devtools/client/shared/vendor/react-dom.js:12730
renderRoot resource://devtools/client/shared/vendor/react-dom.js:12770
performWorkOnRoot resource://devtools/client/shared/vendor/react-dom.js:13359
performWork resource://devtools/client/shared/vendor/react-dom.js:13281
performSyncWork resource://devtools/client/shared/vendor/react-dom.js:13253
requestWork resource://devtools/client/shared/vendor/react-dom.js:13153
scheduleWork$1 resource://devtools/client/shared/vendor/react-dom.js:13022
enqueueSetState resource://devtools/client/shared/vendor/react-dom.js:8845
setState React
Redux 5
eventTelemetryMiddleware resource://devtools/client/webconsole/middleware/event-telemetry.js:21
historyPersistenceMiddleware resource://devtools/client/webconsole/middleware/history-persistence.js:36
thunk resource://devtools/client/webconsole/middleware/thunk.js:14
throttledDispatchPromise resource://devtools/client/webconsole/webconsole-wrapper.js:684
react-dom.js:11273:13

Expected results:

The regular expression should be logged to the Console.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Hello tdulcet, thanks for the detailed report! I'm going to investigate

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1640140 - Fix rendering of very large regexp. r=Honza.

If the displayString of the RegExp is very long (>10,000 chars),
it is returned as a longString grip, and it was making the regexp
reps to throw.
This patch fixes this issue and adds a test to ensure we deal with
these kind of objects now.

Depends on D76673

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9298de7e11dd
Fix rendering of very large regexp. r=Honza.

Comment 4

[Cristian Brindusan [:cbrindusan]]

https://hg.mozilla.org/mozilla-central/rev/9298de7e11dd