Next.js项目接入Sentry错误日志收集

Next.js项目接入Sentry错误日志收集

1.在sentry官网上注册账号

2.在账号下新建 new project

• platform选择NODE.JS
• 自定义Project name之后点Create Project
• 创建完之后跳转到代码页

3.在next.js项目中安装sentry模块

yarn add @sentry/browser @sentry/node @sentry/tracing

4.在next.js项目文件中接入错误捕获

• next.config.js 文件，配置文件添加以下代码

// next.config.js
	{
   
        env: {
   
        	// 换成自己project的DSN
        	// 在sentry project->setting->Client Keys (DSN)中复制
            SENTRY_DSN: "https://xxxxxxxxxxxxxxxxxxxx@xxxxxx.ingest.sentry.io/xxxxxxx"
        },
        webpack(config, options){
   
        	// 服务端时 使用@sentry/node模块，在浏览器端使用@sentry/browser模块
            if (!options.isServer) {
   
                config.resolve.alias['@sentry/node'] = '@sentry/browser'
            }
            return config