Improve error handling in beforeScreenshot

[dimadk24]

When an error is thrown in beforeScreenshot (can easily happen while creating some more-less complex test case with multiple DOM interactions or if break something in the code), it's not easy to spot it.

Current behavior In debug mode (viteshot debug) error is visible for a couple of seconds on the page, and after it quickly hides. In the browser console only several framework or DOM errors are visible (at least in the case of React): https://pastebin.com/JhQGnWJR In non-debug mode (viteshot) only internal DOM error is visible in the output: https://pastebin.com/914mSHvi. Error itself is visible on the screenshot only.

Expected behavior Only thrown error is visible better in both cases, so it's easy to understand and debug it. In debug mode it should be visible in the console and maybe (debatable, not sure about this one) block rendering of other snapshots. In console mode, it just should show thrown error.

As I see viteshot takes the screenshot of the error to put it in the image, but still would be nicer to show it in the console. And in the debug mode it just hides too fast to understand the root cause.

Minimal code to reproduce:

export const MyScreenshot = () => <div>Hello, World!</div>

MyScreenshot.beforeScreenshot = () => {
  throw new Error('test error')
}

viteshot config:

const playwrightShooter = require('viteshot/shooters/playwright')
const playwright = require('playwright')

module.exports = {
  framework: {
    type: 'react',
  },
  shooter: playwrightShooter(playwright.chromium),
  filePathPattern: '**/*.screenshot.@(js|jsx|tsx|vue|svelte)',
}

[fwouts]

Hi @dimadk24, thanks for this useful feedback.

I'm planning to rebuild Viteshot on top of Preview.js which should hopefully make this a bit better. No plans to fix it in the short term though (but PRs welcome!).