rollbar.js icon indicating copy to clipboard operation
rollbar.js copied to clipboard

Updated examples and new ones for new replay bundles

Open matux opened this issue 3 months ago • 0 comments

Description of the change

  • Added comprehensive Replay (rollbar/replay) examples demonstrating both modern and legacy integration patterns.
  • Modernizes the webpack and React examples to use current tooling (Webpack 5, Babel 7, React 18) while preserving legacy examples for backward compatibility.

Modern Examples (New/Updated):

  • examples/webpack/ - Webpack 5 with modern ES module syntax
  • examples/webpack-replay/ - Webpack 5 + Replay using import from 'rollbar/replay'
  • examples/react/ - Webpack 5 + Babel 7 + React 18 with hooks
  • examples/react-replay/ - React 18 + Replay with modern patterns
  • examples/universal-browser-replay/ - Script tag usage with Replay bundles

Legacy Examples (Renamed for Compatibility):

  • examples/webpack4/ - Webpack 4 (previously webpack/)
  • examples/webpack4-replay/ - Webpack 4 + Replay with alias workaround
  • examples/react-webpack4/ - Webpack 4 + Babel 6 + React 16 (previously react/)
  • examples/react-webpack4-replay/ - React 16 + Replay with alias

Example main code

Modern (Webpack 5):

  import Rollbar from 'rollbar/replay';

  const rollbar = new Rollbar({
    accessToken: 'TOKEN',
    replay: {
      enabled: true,
      autoStart: true,
    },
  });

Legacy (Webpack 4):

  // webpack.config.js
  resolve: {
    alias: {
      'rollbar/replay': path.resolve(__dirname, 'node_modules/rollbar/dist/rollbar.replay.umd.min.js'),
    },
  }

Script Tag:

Uses pre-built bundle to avoid ES2021 syntax transpilation issues.

  <script>
    let _rollbarConfig = {
      rollbarJsUrl: '/dist/rollbar.replay.min.js',
      replay: { enabled: true, autoStart: true },
    };
  </script>

matux avatar Oct 15 '25 00:10 matux