feat: conditionally load node dependencies and return empty if they can't be loaded

Author: victorandcode

src/__tests__/get-user-trace.js

@@ -1,19 +1,22 @@
+import fs from 'fs'
 import {getUserTrace} from '../get-user-trace'
 
 jest.mock('fs', () => ({
-  readFileSync: () => `
+  readFileSync: jest.fn(
+    () => `
     import { screen } from '@testing-library/dom'
 
     it('renders', () => {
       document.body.appendChild(
         document.createTextNode('Hello world')
       )
       screen.debug()
-      
-      
+
+
       expect(screen.getByText('Hello world')).toBeInTheDocument()
     })
   `,
+  ),
 }))
 
 let globalErrorMock
@@ -65,3 +68,25 @@ test('it returns only client error when node frames are present afterwards', ()
     "
   `)
 })
+
+test("it returns empty string if file from frame can't be read", () => {
+  const consoleWarnSpy = jest
+    .spyOn(global.console, 'warn')
+    .mockImplementationOnce(jest.fn)
+
+  // Make fire read purposely fail
+  fs.readFileSync.mockImplementationOnce(() => {
+    throw Error()
+  })
+  const filePath = '/home/john/projects/sample-error/error-example.js'
+  const stack = `Error: Kaboom
+      at somethingWrong (${filePath}:8:7)
+  `
+  globalErrorMock.mockImplementationOnce(() => ({stack}))
+
+  expect(getUserTrace(stack)).toEqual('')
+  expect(consoleWarnSpy).toHaveBeenCalledTimes(1)
+  expect(consoleWarnSpy).toHaveBeenCalledWith(
+    `Couldn't read file ${filePath} for displaying the code frame`,
+  )
+})

src/get-user-trace.js

@@ -1,36 +1,65 @@
-import fs from 'fs'
-import { codeFrameColumns } from '@babel/code-frame';
+// We try to load node dependencies
+let readFileSync = null
+let codeFrameColumns = null
 
-// Frame has the form "at myMethod (location/to/my/file.js:10:2)"
+try {
+  const nodeRequire = module && module.require
+  readFileSync = nodeRequire.call(module, 'fs').readFileSync
+  codeFrameColumns = nodeRequire.call(module, '@babel/code-frame')
+    .codeFrameColumns
+} catch {
+  // We're in a browser environment
+  console.warn(
+    'Printing the user trace is not supported in a browser environment',
+  )
+}
+
+// frame has the form "at myMethod (location/to/my/file.js:10:2)"
 function getCodeFrame(frame) {
   const locationStart = frame.indexOf('(') + 1
   const locationEnd = frame.indexOf(')')
   const frameLocation = frame.slice(locationStart, locationEnd)
 
-  const frameLocationElements = frameLocation.split(":")
-  const [filename, line, column] = [frameLocationElements[0], parseInt(frameLocationElements[1], 10), parseInt(frameLocationElements[2], 10)]
-  let rawFileContents = ""
+  const frameLocationElements = frameLocation.split(':')
+  const [filename, line, column] = [
+    frameLocationElements[0],
+    parseInt(frameLocationElements[1], 10),
+    parseInt(frameLocationElements[2], 10),
+  ]
+
+  let rawFileContents = ''
   try {
-    rawFileContents = fs.readFileSync(filename, 'utf-8')
+    rawFileContents = readFileSync(filename, 'utf-8')
   } catch {
     console.warn(`Couldn't read file ${filename} for displaying the code frame`)
+    return ''
   }
-  return codeFrameColumns(rawFileContents, {
-    start: { line, column },
-  }, {
-    highlightCode: true,
-    linesBelow: 0,
-  })
+
+  const codeFrame = codeFrameColumns(
+    rawFileContents,
+    {
+      start: {line, column},
+    },
+    {
+      highlightCode: true,
+      linesBelow: 0,
+    },
+  )
+  return `${codeFrame}\n`
 }
 
 function getUserTrace() {
+  // If we couldn't load dependencies, we can't generate a user trace
+  if (!readFileSync || !codeFrameColumns) {
+    return ''
+  }
   const err = new Error()
   const firstClientCodeFrame = err.stack
     .split('\n')
     .slice(1) // Remove first line which has the form "Error: TypeError"
     .find(frame => !frame.includes('node_modules/')) // Ignore frames from 3rd party libraries
 
-  return `${getCodeFrame(firstClientCodeFrame)}\n`
+  return getCodeFrame(firstClientCodeFrame)
 }
 
 export {getUserTrace}