Added Next.js example

[jamesmosier]

This example shows how to use rollbar-sourcemap-webpack-plugin with Next.js

I am using the nosources-source-map webpack devtool in this example which is described in the webpack docs as:

nosources-source-map - A SourceMap is created without the sourcesContent in it. It can be used to map stack traces on the client without exposing all of the source code. You can deploy the Source Map file to the webserver.

---

Pertinent files in this PR:

• examples/next-js/next.config.js
• examples/next-js/pages/_document.js
• examples/next-js/README.md

---

Previously I tried using hidden-source-map but Rollbar reported that the sourcemap was found but because Next doesn't add min.js extensions to the actual source files, Rollbar said it assumed the files were not minified and therefore wouldn't associate the uploaded map files with the source files on the server. Therefore nosources-source-map will allow the map files to be uploaded to Rollbar and also includes a comment at the end of each file with the destination of the sourcemap (which does not contain actual source code).

---

Closes #67

[pjaws]

I know you've probably spent a lot of time on this, but if you're able to, I would really recommend switching to Sentry. Took me 5 minutes to set up and never had a problem. I've had dozens with Rollbar, which I'm stuck with because that's what my company uses.

Thanks for this PR, though! I'll take a look and give it a shot. Hopefully it solves my source map woes at least! 😁

[pjaws]

So, it looks like this will only log client-side errors, right? I've set up my project for both client and server, though the source maps have continued to be an issue for me. I can post my config once I (hopefully) get this all working in my project!

[jamesmosier]

Correct. I figured for a minimal example that will help other get started in the right direction I would just use the browser SDK. Otherwise setting up Rollbar via their npm package starts to really get into the weeds with implementation details of Rollbar. Ultimately for those using the npm SDK it'd be a similar setup from a Rollbar initialization perspective:

import RollbarSdk from 'rollbar';

new RollbarSdk({
  enabled: ${process.env.NODE_ENV === 'production'},
  accessToken: `${process.env.ROLLBAR_ACCESS_TOKEN}`,
  captureUncaught: true,
  captureUnhandledRejections: true,
  payload: {
    environment: `${process.env.NODE_ENV || 'production'}`,
    client: {
      javascript: {
        source_map_enabled: true,
        code_version: `${process.env.NEXT_BUILD_ID}`,
        guess_uncaught_frames: true,
      },
    },
  },
})

[brandondoran]

I agree that only cover browser side is good enough, to keep it simple as possible.

[brandondoran]

@jamesmosier thank you so much for taking that time to do this! And @pjaws thanks for your feedback as well!

I just had suggestions for a couple README related tweaks. After those I will merge this.

[brandondoran]

Can you re-word this just a bit so it doesn't mention "PR"? Maybe just change to "example"?

[brandondoran]

@jamesmosier in the main README, there's a link to the react example. Would mind adding a link to the Next.js example too?

[jamesmosier]

Good catch! that was a copy/paste from the PR description 😄

updated them both!

[codecov-io]

Codecov Report

Merging #83 into master will not change coverage by %.
The diff coverage is n/a.

@@            Coverage Diff            @@
##            master       #83   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            3         3           
  Lines           74        74           
  Branches        18        18           
=========================================
  Hits            74        74           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 015c7aa...643ec23. Read the comment docs.

[brandondoran]

Thanks again for this contribution @jamesmosier!

[brandondoran]

published in [email protected]