Add error handlers to some of the React chat components. Don't delay initialization completion while we wait up to 60 seconds for the emote menu extension.

changelog.html

@@ -1,3 +1,8 @@
+<div class="list-header">4.0.0-beta1.6<span>@c643fcdd1cb8343964c3</span> <time datetime="2018-03-01">(2018-03-01)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Changed: Add error handlers for the chat controller and chat container React components to, hopefully, stop chat from breaking entirely when React forgets how to DOM.</li>
+</ul>
+
 <div class="list-header">4.0.0-beta1.6<span>@5442f1e095968e230f60</span> <time datetime="2018-03-01">(2018-03-01)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Stop displaying empty messages with resub notices that don't have a message.</li>

src/sites/twitch-twilight/modules/chat/index.js

@@ -335,6 +335,22 @@ export default class ChatHook extends Module {
 		this.ChatController.on('receive-props', this.chatUpdated, this);
 
 		this.ChatController.ready((cls, instances) => {
+			const t = this,
+				old_catch = cls.prototype.componentDidCatch;
+			// Try catching errors. With any luck, maybe we can
+			// recover from the error when we re-build?
+			cls.prototype.componentDidCatch = function(err, info) {
+				// Don't log infinitely if stuff gets super screwed up.
+				const errs = this.state.ffz_errors || 0;
+				if ( errs < 100 ) {
+					this.setState({ffz_errors: errs + 1});
+					t.log.info('Error within Chat', err, info, errs);
+				}
+
+				if ( old_catch )
+					return old_catch.call(this, err, info);
+			}
+
 			for(const inst of instances) {
 				const service = inst.chatService;
 				if ( ! service._ffz_was_here )
@@ -357,6 +373,22 @@ export default class ChatHook extends Module {
 		this.ChatContainer.on('receive-props', this.containerUpdated, this);
 
 		this.ChatContainer.ready((cls, instances) => {
+			const t = this,
+				old_catch = cls.prototype.componentDidCatch;
+			// Try catching errors. With any luck, maybe we can
+			// recover from the error when we re-build?
+			cls.prototype.componentDidCatch = function(err, info) {
+				// Don't log infinitely if stuff gets super screwed up.
+				const errs = this.state.ffz_errors || 0;
+				if ( errs < 100 ) {
+					this.setState({ffz_errors: errs + 1});
+					t.log.info('Error within Chat Container', err, info, errs);
+				}
+
+				if ( old_catch )
+					return old_catch.call(this, err, info);
+			}
+
 			for(const inst of instances)
 				this.containerMounted(inst);
 		});

src/sites/twitch-twilight/modules/chat/line.js

@@ -64,7 +64,6 @@ export default class ChatLine extends Module {
 					props.showTimestamps !== this.props.showTimestamps;
 			}
 
-
 			cls.prototype.render = function() {
 				const types = t.parent.chat_types || {},
 

src/sites/twitch-twilight/modules/compat_emote_menu.js

@@ -6,7 +6,7 @@
 // ============================================================================
 
 import Module from 'utilities/module';
-import {has} from 'utilities/object';
+import {has, sleep} from 'utilities/object';
 
 export default class CompatEmoteMenu extends Module {
 	constructor(...args) {
@@ -18,7 +18,11 @@ export default class CompatEmoteMenu extends Module {
 		this.inject('chat.emotes');
 	}
 
-	async onEnable() {
+	onEnable() {
+		this.hookEmoteMenu();
+	}
+
+	async hookEmoteMenu() {
 		const em = await this.findEmoteMenu();
 		if ( ! em )
 			return this.log.info('Emote Menu for Twitch was not found after 60 seconds.');
@@ -65,8 +69,7 @@ export default class CompatEmoteMenu extends Module {
 		if ( delay >= 60000 )
 			return null;
 
-		return new Promise(s => {
+		await sleep(100);
-			setTimeout(() => this.findEmoteMenu(delay + 100).then(s), 100)
+		return this.findEmoteMenu(delay + 100);
-		});
 	}
 }

src/utilities/object.js

@@ -7,6 +7,11 @@ export function has(object, key) {
 }
 
 
+export function sleep(delay) {
+	return new Promise(s => setTimeout(s, delay));
+}
+
+
 export function timeout(promise, delay) {
 	return new Promise((resolve, reject) => {
 		let resolved = false;