Fix: Reduce WebGL checks to reduce instances of Rats! error (#728)

We don't use metrics associated with whether the user's browser supports WebGL or 3D rendering, so this removes the WebGL checks from the browser info check for every Preview instance and isolates them to 3D and 360 files, which should reduce instances of the `Rats! WebGL hit a snag.` error.
box · Mar 22, 2018 · f2b389f · f2b389f
1 parent ad97a90
commit f2b389f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/src/lib/Browser.js b/src/lib/Browser.js
@@ -3,7 +3,7 @@ const MIME_H264_MAIN = 'video/mp4; codecs="avc1.4D401E"';
 const MIME_H264_HIGH = 'video/mp4; codecs="avc1.64001E"';
 const EXT_STANDARD_DERIVATIVES = 'OES_standard_derivatives';
 const EXT_LOSE_CONTEXT = 'WEBGL_lose_context';
-const EVENT_WEBGL_CONEXT_LOST = 'webglcontextlost';
+const EVENT_WEBGL_CONTEXT_LOST = 'webglcontextlost';
 
 let { userAgent } = navigator;
 let name;
@@ -184,7 +184,7 @@ class Browser {
         if (!gl) {
             const canvas = document.createElement('canvas');
             // Should stop 'Rats! WebGL hit a snag' error when checking WebGL support
-            canvas.addEventListener(EVENT_WEBGL_CONEXT_LOST, (e) => {
+            canvas.addEventListener(EVENT_WEBGL_CONTEXT_LOST, (e) => {
                 /* istanbul ignore next */
                 e.preventDefault();
                 /* istanbul ignore next */
@@ -353,10 +353,8 @@ class Browser {
             swf: Browser.hasFlash(),
             svg: Browser.hasSVG(),
             mse: Browser.hasMSE(),
-            webgl: Browser.hasWebGL(),
             mp3: Browser.canPlayMP3(),
             dash: Browser.canPlayDash(),
-            box3d: Browser.supportsModel3D(),
             h264: {
                 baseline: Browser.canPlayH264Baseline(),
                 main: Browser.canPlayH264Main(),

diff --git a/src/lib/__tests__/Browser-test.js b/src/lib/__tests__/Browser-test.js
@@ -500,4 +500,21 @@ describe('lib/Browser', () => {
             expect(hasIssue).to.be.false;
         });
     });
+
+    describe('getBrowserInfo()', () => {
+        it('should return browser capabilities', () => {
+            const browserInfo = Browser.getBrowserInfo();
+            const expectedFields = [
+                'name',
+                'swf',
+                'svg',
+                'mse',
+                'mp3',
+                'dash',
+                'h264'
+            ];
+
+            expect(expectedFields.every((field) => typeof browserInfo[field] !== 'undefined')).to.be.true;
+        });
+    });
 });