Fix ansi in error details

Author: Ives van Hoorne

packages/app/src/app/components/Preview/DevTools/Tests/TestDetails/ErrorDetails/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import theme from 'common/theme';
+import ansiHTML from 'ansi-html';
 
 import type { TestError } from '../../';
 
@@ -58,9 +59,11 @@ const formatDiffMessage = (error: TestError, path: string) => {
         `<span style="color:${theme.green()}">$1</span>`
       )}</span>`;
   } else {
-    finalMessage = error.message + '\n\n' + error.stack;
+    finalMessage = escapeHtml(error.message + '\n\n' + error.stack);
   }
 
+  finalMessage = ansiHTML(finalMessage);
+
   if (
     error.mappedErrors &&
     error.mappedErrors[0] &&

packages/app/src/app/store/modules/files/actions.js

@@ -559,8 +559,8 @@ export function recoverFiles({ recover, controller, state }) {
         const titleB = `recovered '${module.title}'`;
         state.push('editor.tabs', {
           type: 'DIFF',
-          codeA: module.code,
-          codeB: recoverData.code,
+          codeA: module.code || '',
+          codeB: recoverData.code || '',
           titleA,
           titleB,
           fileTitle: module.title,