RuntimeErrorStack.js 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. const ErrorStackParser = require('error-stack-parser');
  2. const theme = require('../theme');
  3. const formatFilename = require('../utils/formatFilename');
  4. /**
  5. * @typedef {Object} RuntimeErrorStackProps
  6. * @property {Error} error
  7. */
  8. /**
  9. * A formatter that turns runtime error stacks into highlighted HTML stacks.
  10. * @param {Document} document
  11. * @param {HTMLElement} root
  12. * @param {RuntimeErrorStackProps} props
  13. * @returns {void}
  14. */
  15. function RuntimeErrorStack(document, root, props) {
  16. const stackTitle = document.createElement('h4');
  17. stackTitle.innerText = 'Call Stack';
  18. stackTitle.style.color = '#' + theme.white;
  19. stackTitle.style.fontSize = '1.0625rem';
  20. stackTitle.style.fontWeight = '500';
  21. stackTitle.style.lineHeight = '1.3';
  22. stackTitle.style.margin = '0 0 0.5rem';
  23. const stackContainer = document.createElement('div');
  24. stackContainer.style.fontSize = '0.8125rem';
  25. stackContainer.style.lineHeight = '1.3';
  26. stackContainer.style.whiteSpace = 'pre-wrap';
  27. let errorStacks;
  28. try {
  29. errorStacks = ErrorStackParser.parse(props.error);
  30. } catch (e) {
  31. errorStacks = [];
  32. stackContainer.innerHTML = 'No stack trace is available for this error!';
  33. }
  34. for (let i = 0; i < Math.min(errorStacks.length, 10); i += 1) {
  35. const currentStack = errorStacks[i];
  36. const functionName = document.createElement('code');
  37. functionName.innerHTML = '&emsp;' + currentStack.functionName || '(anonymous function)';
  38. functionName.style.color = '#' + theme.yellow;
  39. functionName.style.fontFamily = [
  40. '"Operator Mono SSm"',
  41. '"Operator Mono"',
  42. '"Fira Code Retina"',
  43. '"Fira Code"',
  44. '"FiraCode-Retina"',
  45. '"Andale Mono"',
  46. '"Lucida Console"',
  47. 'Menlo',
  48. 'Consolas',
  49. 'Monaco',
  50. 'monospace',
  51. ].join(', ');
  52. const fileName = document.createElement('div');
  53. fileName.innerHTML =
  54. '&emsp;&emsp;' +
  55. formatFilename(currentStack.fileName) +
  56. ':' +
  57. currentStack.lineNumber +
  58. ':' +
  59. currentStack.columnNumber;
  60. fileName.style.color = '#' + theme.white;
  61. fileName.style.fontSize = '0.6875rem';
  62. fileName.style.marginBottom = '0.25rem';
  63. stackContainer.appendChild(functionName);
  64. stackContainer.appendChild(fileName);
  65. }
  66. root.appendChild(stackTitle);
  67. root.appendChild(stackContainer);
  68. }
  69. module.exports = RuntimeErrorStack;