Browser hang when logging console message

[stephent]

After putting my create-react-app into production using logdna-browser, I received two reports from end users of the browser hanging completely. My suspicion is that it is the same problem as this issue: pinojs/pino#990

On reverting the update that added logdna-browser, the same users reported the hanging problem was gone. I asked one of the users to send their browser console output to see what was there that might have been triggering the problem. I think it's likely to be the non-fatal error shown below (from somewhere deep in threejs):

(FWIW, this looks like it contains an instance of https://github.com/mrdoob/three.js/blob/master/src/math/Box3.js)

Additionally, I confirmed that logdna-browser is the only package in my project that uses fast-safe-stringify:

 npm ls fast-safe-stringify
[email protected] 
└─┬ @logdna/[email protected]
  └── [email protected] 

I've not been able to reproduce the browser hang so far, but I suspect outputting an object that contains circular references may trigger it.

[stephent]

Also likely relevant: davidmarkclements/fast-safe-stringify#46

[TerryMooreII]

@stephent Thank you for reporting this. I will read up on the issues that you posted and try to reproduce the issue.

[stephent]

BTW, this is my config for logdna-browser:

import logdna from '@logdna/browser';

logdna.init(process.env.REACT_APP_LOGDNA_INGESTION_KEY,
  {
    console: {
      integrations: ['log', 'info', 'warn', 'error']
    },
    enableStacktrace: false,
    env: process.env.NODE_ENV,
  }).addContext({
    // Context is appended to the metadata of each message sent to LogDNA
    // Add any custom meta data such as:
    version: process.env.REACT_APP_VERSION
  }
);

[TerryMooreII]

@stephent From what I have found out the issue is that the library we (and pino) use to handle the circular references is unable to handle large objects with deeply nested circular reference with out hanging the browser. Unfortunately, I have not been able to duplicate this issue with three.js. But I did open a draft PR that switches the browser logger to use a different package for handling circular reference when stringifying the logs. If you have been able to duplicate this issue locally, could you can pull down that PR and test to see if it handles the circular references without hanging the browser?

[stephent]

@TerryMooreII thanks for the update on this. I'm unable to reproduce locally - I think my only option is to push out a public beta and get some testers to try it out. How do I reference your version with the PR in my project's package.json?