compatibility issue with nextjs 13.4

[Musashi-Sakamoto]

I am trying to install rollbar module to handle server side error on my new nextjs 13.4.2 project. When I try to run next build, it shows the following error.

- info Creating an optimized production build  
- info Compiled successfully
- info Linting and checking validity of types  
- info Collecting page data .TypeError: Cannot set properties of undefined (setting 'is')

utils/rollbar.ts

import Rollbar from 'rollbar';

const rollbar = new Rollbar({
  accessToken: process.env.ROLLBAR_SERVER_TOKEN as string,
});

export default rollbar;

page.tsx

import rollbar from '@/utils/rollbar';

export default function Home() {
  rollbar.info('Home page built done');
  return (
    <main className="pt-5 px-[25px]">
........

[ghost]

Hey @Musashi-Sakamoto, Thanks for reporting this issue. You can find a Next.js instruction in the Rollbar documentation. Can you check it out to see if it solves your problem?

[Musashi-Sakamoto]

@rollbar-bborsits Thank you for getting back to me quickly. The document seems a bit outdated. I doubt Next13 works with things like getInitialProps, _error.js.

[waltjones]

@Musashi-Sakamoto I have just tested this on 13.4.4, using the pattern in your example to setup Rollbar. I tested both js and ts, but didn't get an error. I'm using the default tsconfig generated by next build.

If I do force an error, the output provides a stack trace with the error. May try next build --debug and see if it provides more context?

[Musashi-Sakamoto]

@waltjones It doesn't provide any useful error with --debug option. Also, I tested with a new project created with create-next-app with tailwindcss option and it still happens. I am using v16.15.0 if it helps

yarn run v1.22.19
$ next build --debug
- info Loaded env from /Users/sakamotomusashi/work/invoice-simple/demo2/.env.production
- info Downloading WASM swc package...
- info Using wasm build of next-swc
- warn Attempted to load @next/swc-darwin-x64, but it was not installed
- info Creating an optimized production build  
- info Compiled successfully
- info Linting and checking validity of types  
- info Collecting page data ..TypeError: Cannot set properties of undefined (setting 'is')
    at Object.<anonymous> (/Users/sakamotomusashi/work/invoice-simple/demo2/.next/server/chunks/879.js:10853:28)
    at /Users/sakamotomusashi/work/invoice-simple/demo2/.next/server/chunks/879.js:10854:12
    at 457 (/Users/sakamotomusashi/work/invoice-simple/demo2/.next/server/chunks/879.js:10857:3)
    at __webpack_require__ (/Users/sakamotomusashi/work/invoice-simple/demo2/.next/server/webpack-runtime.js:25:43)
    at 8152 (/Users/sakamotomusashi/work/invoice-simple/demo2/.next/server/chunks/879.js:16436:12)
    at __webpack_require__ (/Users/sakamotomusashi/work/invoice-simple/demo2/.next/server/webpack-runtime.js:25:43)
    at 9882 (/Users/sakamotomusashi/work/invoice-simple/demo2/.next/server/chunks/879.js:19219:17)
    at __webpack_require__ (/Users/sakamotomusashi/work/invoice-simple/demo2/.next/server/webpack-runtime.js:25:43)
    at 5029 (/Users/sakamotomusashi/work/invoice-simple/demo2/.next/server/chunks/879.js:18185:18)
    at __webpack_require__ (/Users/sakamotomusashi/work/invoice-simple/demo2/.next/server/webpack-runtime.js:25:43)

> Build error occurred
Error: Failed to collect page data for /
    at /Users/sakamotomusashi/work/invoice-simple/demo2/node_modules/next/dist/build/utils.js:1152:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
error Command failed with exit code 1.

[Besuf]

Is there any updates on this? I'm having the same problem with Next 13.4.5. After some debugging, I discovered that the error is thrown when the rollbar instance is created.

[Besuf]

Okay, I have resolved it. I forgot to use the 'use client' directive. So any component that uses a rollbar instance should be marked with use client directive in order to enable the associated javascript to be bundled and run on the client side; otherwise, you will face issues on the client side.

[Musashi-Sakamoto]

yeah, but that means you can't report error on server side components

[Besuf]

Yes, currently, I don't report errors on the server component. According to the Next13 app router documentation, any server errors are serialized and sent to the nearest error.js component (the sent error is digested for security reasons). So, I make the report there inside the useEffect. However, I'm still trying to figure out the proper way to interpret the digested/hashed error inside Rollbar.

[Musashi-Sakamoto]

yeah, in that case, error.js component will be shown. For some cases, we want to catch errors on the server side components and do nothing but report errors...

[Besuf]

That's an excellent point. I haven't come up with a solution for that, at least not from the Next.js error handling perspective. I'm not sure if it's possible to make the Rollbar provider work on the server as well.

[Musashi-Sakamoto]

I was able to install rollbar and use it on server component. not sure why it worked this time..

[Besuf]

@Musashi-Sakamoto Which version of Nextjs and Rollbar did it work with?

[IsakFriisJespersen2]

Facing the same issue after migration to NextJs 13.4 as @Musashi-Sakamoto, catching an error on the server but still want to send the error to rollbar.

Did we have any updates on this? How can I get it working?

[barkinmeric]

Is there any updates or implementations on how to use rollbar in nextjs app router?